/* Poczta: tylko to, czego nie ma w klockach z app.css (sekcja „System”). */

/* Lista */
.poczta-rzad .rzad-tytul { font-weight: 500; }
.poczta-rzad.nowe .rzad-tytul { font-weight: 700; }
/* Nieprzeczytane jak w Mail na iOS: kropka i pogrubiony nadawca, bez barwionego tła */
.kropka-nowa { display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--k); vertical-align: middle; }
.poczta-rzad.nowe > .awatar:first-child { color: var(--text); }
.poczta-meta { margin-top: 4px; }
/* Wątek dopisany na żywo (plan 49): tło akcentu gaśnie w 1,5 s. Przy ograniczonym ruchu app.css wyłącza animację,
   zostaje samo krótkie tło, które lista zdejmuje po tym samym czasie. */
.poczta-rzad.swiezy { background: var(--accent-soft); animation: poczta-swiezy 1.5s ease-out forwards; }
@keyframes poczta-swiezy { from { background: var(--accent-soft); } to { background: transparent; } }
.poczta-licz { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); }
.poczta-licz.k { color: var(--k); }
.pigulka .i.maly { width: 14px; height: 14px; }
.rzad-pod.jedna-linia { flex-wrap: nowrap; gap: 0 8px; }
.rzad-pod.jedna-linia > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzad-pod .temat { flex: 0 1 auto; max-width: 60%; color: var(--muted); }
.poczta-rzad.nowe .rzad-pod .temat { color: var(--text); }
.rzad-pod .fragment { flex: 1 1 0; }
.jak-podlaczyc { margin-top: 28px; }
.jak-podlaczyc > summary { display: inline-flex; align-items: center; gap: 6px; }
.jak-podlaczyc > .powierzchnia { margin-top: 10px; }

/* Instrukcja podłączenia */
.instrukcja { max-width: 62ch; }
.instrukcja p { margin: 0 0 10px; }
.instrukcja ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); }
.instrukcja b { color: var(--text); }
.instrukcja pre, .instrukcja code { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.instrukcja pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.instrukcja code { color: var(--text); }

/* Szczegół */
.watek-temat { font: 700 22px/1.3 var(--font-head); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.zdanie-pod .i { vertical-align: -2px; }
.watek-tagi { margin: 10px 0 0; }
.watek-tagi .tag { font-size: 12.5px; line-height: 23px; }
.akcje-watku { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 16px; }
.akcje-watku .przycisk { padding: 7px 13px; }
.akcje-watku .menu-akcji-lista { right: auto; left: 0; }
.akcje-watku .menu-akcji-lista form { display: contents; }
@media (max-width: 760px) {
  .akcje-watku .przycisk { min-height: 44px; }  /* cel dotyku */
  .akcje-watku .ikona-btn { width: 44px; height: 44px; }
}

/* Notatka wewnętrzna: żółtawe (kolor „notatki”) pudełko z zaznaczonym „tylko dla zespołu”, wyraźnie inne niż mail */
.panel.notatka-wew { background: color-mix(in srgb, var(--k) 4%, var(--surface)); border-color: color-mix(in srgb, var(--k) 22%, transparent); border-style: dashed; padding-bottom: 14px; }
.notatka-wew label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.notatka-wew label small { font-size: 12px; font-weight: 400; color: var(--faint); }
.notatka-wew textarea { min-height: 64px; margin-top: 8px; padding: 6px 8px; background: transparent; border: 1px solid transparent; border-radius: 6px; box-shadow: none; font-size: 14px; }
.notatka-wew textarea:hover { background: var(--hover); }
.notatka-wew textarea:focus { background: var(--surface); border-color: var(--accent); }
.notatka-wew .os-meta { margin: 4px 0 0; }

.os.watek { gap: 18px; }
.os.watek .os-blok { min-width: 0; }
.os.watek .os-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.os.watek .od-nas .os-blok { background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; }
.os.watek .od-nas-av { color: var(--text); }
.os.watek .os-tresc + .os-tresc, .os.watek .os-tresc + details, .os.watek details + .os-tresc, .os.watek details + details { margin-top: 8px; }
.zwiniete > summary { display: inline-flex; margin-top: 2px; font-size: 12.5px; color: var(--faint); cursor: pointer; list-style: none; }
.zwiniete > summary::-webkit-details-marker { display: none; }
.zwiniete > summary::before { content: "…"; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: var(--raise); color: var(--muted); }
.zwiniete > summary:hover { color: var(--muted); }
.zwiniete[open] > summary { margin-bottom: 4px; }
.zwiniete .os-tresc { color: var(--muted); font-size: 13.5px; }

.panel .instrukcja { background: transparent; border: 0; padding: 0; }

/* Ludzie / Automaty (plan 53): cienka kreska między widokami dla ludzi a Automatami */
.pigulki-rozdzielacz { flex: none; align-self: stretch; width: 1px; margin: 4px 4px; background: var(--line-strong, var(--line)); }
/* „Przypomnij” w menu wątku: wybór dnia */
.menu-akcji-lista .przypomnij-dzien { display: flex; align-items: center; gap: 6px; padding: 2px 5px 4px; }
.menu-akcji-lista .przypomnij-dzien input { flex: 1; min-width: 0; }
.menu-akcji-lista .przypomnij-dzien button { width: auto; flex: none; background: var(--chip); }

/* Telefon: cele dotyku co najmniej 44 px */
@media (max-width: 760px) {
  .pasek-narzedzi .pigulka { min-height: 44px; }
  .akcje-watku .menu-akcji-lista .przypomnij-dzien input { min-height: 44px; }  /* przyciski paska i menu: wyżej i app.css */
  /* Menu „…” zaczepione o cały pasek, nie o przycisk: gdy „…” ląduje przy prawej krawędzi, menu nie wychodzi poza ekran */
  .akcje-watku { position: relative; }
  .akcje-watku .menu-akcji { position: static; }
  .akcje-watku .menu-akcji-lista { left: 0; right: auto; max-width: 100%; }
  .pigulki-rozdzielacz { margin: 8px 4px; }
}

/* Załączniki pod wiadomością (plan 52): plik z serwera poczty na kliknięcie, zdjęcie i PDF w arkuszu. */
.zal-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-width: 560px; }
.zal { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 52px; padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: background .15s, border-color .15s; }
.zal:hover { border-color: var(--line-strong); }
.zal-ikona { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-right: 6px; border-radius: 9px; background: var(--chip); color: var(--muted); }
.zal-ikona .i { width: 17px; height: 17px; }
.zal-tresc { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 6px; border-radius: 8px; color: var(--text); text-decoration: none; }
a.zal-tresc:hover .zal-nazwa { color: var(--accent-text); }
.zal-tresc:focus-visible, .zal-pobierz:focus-visible, .zal-akcja:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.zal-nazwa { display: flex; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.zal-rdzen { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zal-tresc small { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.zal-pobierz { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; color: var(--muted); transition: background .15s, color .15s; }
.zal-pobierz:hover { background: var(--hover); color: var(--text); }
.zal-pobierz.laduje, a.zal-tresc.laduje { cursor: progress; opacity: .55; }
.zal-pobierz.laduje .i { animation: zal-puls 1s ease-in-out infinite; }
@keyframes zal-puls { 50% { transform: translateY(2px); } }

/* Arkusz podglądu: na telefonie od dołu jak każdy arkusz, na komputerze wyśrodkowany i szeroki. */
.zal-arkusz .arkusz-panel { display: flex; flex-direction: column; height: min(86dvh, 920px); }
@media (min-width: 761px) {
  .zal-arkusz .arkusz-panel { width: min(960px, calc(100vw - 48px)); margin: 0 auto; bottom: 16px; border-radius: 26px; border-bottom: 1px solid var(--line) !important; }
}
.zal-nag { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.zal-nag-tekst { flex: 1; min-width: 0; }
.zal-nag .arkusz-tytul { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zal-meta { display: block; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.zal-akcja { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--text); font: 500 14px var(--font); text-decoration: none; cursor: pointer; transition: background .15s; }
.zal-akcja:hover { background: var(--sel); }
.zal-akcja[hidden] { display: none; }
.zal-zamknij { padding: 0; }
.zal-podglad { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 16px; background: var(--raise); overflow: hidden; }
img.zal-widok { max-width: 100%; max-height: 100%; object-fit: contain; }
iframe.zal-widok { width: 100%; height: 100%; border: 0; background: var(--surface); }
.zal-stan { display: grid; justify-items: center; gap: 12px; max-width: 44ch; padding: 24px 20px; text-align: center; color: var(--muted); }
.zal-stan p { margin: 0; }
.zal-stan .i { width: 26px; height: 26px; color: var(--muted); }
.zal-krec { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); animation: zal-krec .8s linear infinite; }
@keyframes zal-krec { to { transform: rotate(360deg); } }

.zal-blad-strona .zal-blad-nazwa { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }

/* Odpowiedź z Backstage (plan 50): układ i klasy pola jak w Wiadomościach IG (.wia-odp, .wia-pasek, .wia-formulka). */
.odp-panel { scroll-margin-top: 16px; }
.odp-do { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.odp-do .i { flex: none; color: var(--faint); }
.odp-do-kto { min-width: 0; overflow-wrap: anywhere; }
.odp-do b { color: var(--text); font-weight: 600; }
.odp-adres, .odp-z { color: var(--faint); }
.odp-z { margin-left: auto; overflow-wrap: anywhere; }
.odp-panel .wia-blad[hidden], .odp-wysylka[hidden], .odp-panel [data-odp-wstaw][hidden] { display: none; }
.odp-w-toku:empty { display: none; }
.odp-w-toku { display: grid; gap: 8px; margin: 0 0 10px; }
.odp-wysylka { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--raise); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.odp-wysylka .i { flex: none; color: var(--accent); }
.odp-wysylka-tekst { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.odp-wysylka form { display: contents; }
.odp-wysylka .przycisk { padding: 6px 12px; }
.odp-panel textarea { min-height: 120px; max-height: 60vh; resize: vertical; field-sizing: content; }
.odp-szkic:empty { display: none; }
.odp-podpis > summary { margin-top: 0; }
.odp-podpis .os-tresc { color: var(--faint); font-size: 13px; }
.odp-brak { margin: 0 0 10px; }
.wia-pasek .przycisk[aria-busy="true"] { cursor: progress; opacity: .7; }
@media (max-width: 760px) {
  .odp-z { margin-left: 0; flex-basis: 100%; padding-left: 22px; }
  .odp-wysylka .przycisk, .odp-panel .wia-pasek .przycisk, .odp-panel .wia-formulka select { min-height: 44px; }
  .odp-podpis > summary { min-height: 44px; align-items: center; }
  .odp-panel textarea { font-size: 16px; } /* iOS nie powiększa strony przy fokusie */
}