/* Poczta odbiorcy — makieta programu pocztowego (ks-poczta.js). [Yuri 15.10]
   [D] celowo NIE wygląda jak sklep: krój systemowy, chłodna szarość okna, zaznaczenie systemowe. Sklep jest tylko w treści maila
   (logo, przyciski, kolory marki), bo tę część projektujemy naprawdę. Tokeny sklepu z app.css; własne tylko dla „cudzego” okna. */
.pc { --pc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --pc-okno: #F6F6F8; --pc-wyb: #DCE3F5; --pc-nie: #2E5BD8;
  position: fixed; inset: 0; z-index: 95; display: none; font-family: var(--pc-font); }
.pc.otw { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 16px; }
html.pc-on { overflow: hidden; }
html.pc-on .ks-prz, body:has(#szuf.otw) .ks-prz { display: none; }   /* przewodnik konta należy do sklepu, nie do poczty */
.pc-tlo { position: absolute; inset: 0; background: rgba(20, 20, 24, .55); animation: pcTlo .22s var(--p1o) both; }
.pc.wych .pc-tlo { animation: pcTloW .2s var(--p1o) both; }

/* pasek makiety nad oknem: ten sam język co pasek „Makieta” sklepu (mono, przerywana ramka) */
.pc-mak { position: relative; flex: none; width: min(1240px, 100%); display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px dashed #8b8ca0; border-radius: 8px; padding: 6px 6px 6px 12px; font: 500 12px/1.3 ui-monospace, Menlo, monospace; color: #44455a; animation: pcOkno .32s var(--p2o) both; }
.pc-mak span { flex: 1; min-width: 0; }
.pc-mak button { font: inherit; border: 1px solid var(--linia2); border-radius: 4px; padding: 6px 10px; background: var(--tusz); color: #fff; border-color: var(--tusz); white-space: nowrap; }

.pc-okno { position: relative; flex: 1; min-height: 0; width: min(1240px, 100%);
  display: grid; grid-template-columns: 188px 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); color: #1d1d22; animation: pcOkno .32s var(--p2o) .04s both; }
.pc.wych .pc-okno, .pc.wych .pc-mak { animation: pcOknoW .2s var(--p1o) both; }
.pc-okno button { font-family: var(--pc-font); }

.pc-g { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--pc-okno); border-bottom: 1px solid #E3E3E8; }
.pc-g-n { font-weight: 600; font-size: 15px; width: 156px; }
.pc-szuk { flex: 1; max-width: 420px; padding: 6px 12px; border-radius: 7px; background: #fff; border: 1px solid #E0E0E6; color: #8A8A96; font-size: 13px; }
.pc-g-k { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5B5B66; min-width: 0; }
.pc-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #6E6E7A; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.pc-av-s { width: 40px; height: 40px; background: #fff; border: 1px solid #E3E3E8; overflow: hidden; padding: 5px; }
.pc-av-s img { width: 100%; height: auto; }
.pc-adr { color: #6B6B76; font-weight: 400; overflow-wrap: anywhere; }

.pc-fold { background: var(--pc-okno); border-right: 1px solid #E3E3E8; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pc-fold span { padding: 7px 10px; border-radius: 6px; color: #55555F; display: flex; justify-content: space-between; }
.pc-fold .on { background: #E6E6EC; color: #1d1d22; font-weight: 600; }
.pc-fold i { font-style: normal; font-weight: 600; color: var(--pc-nie); }

.pc-lista { border-right: 1px solid #E3E3E8; overflow-y: auto; overscroll-behavior: contain; }
.pc-lista-h { font-size: 13px; font-weight: 600; color: #6B6B76; padding: 12px 16px 8px; letter-spacing: 0; }
.pc-lista ul { list-style: none; margin: 0; padding: 0; }
.pc-lista li > button, .pc-inny { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 11px 16px 12px 24px; border-bottom: 1px solid #EDEDF1; position: relative; }
.pc-lista li > button:hover { background: #F3F3F6; }
.pc-lista li > button[aria-current="true"] { background: var(--pc-wyb); }
.pc-lista li > button.nowy::before { content: ''; position: absolute; left: 9px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--pc-nie); }
.pc-l-o { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.pc-l-o b { font-weight: 500; } .nowy .pc-l-o b { font-weight: 700; }
.pc-l-o time { font-size: 12px; color: #6B6B76; flex: none; }
.pc-l-t { font-size: 14px; line-height: 1.3; } .nowy .pc-l-t { font-weight: 600; }
.pc-l-z { font-size: 13px; line-height: 1.35; color: #6B6B76; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-inny { color: #8A8A96; }
.pc-inny .pc-l-o b { color: #6B6B76; }

.pc-cz { overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.pc-wroc { display: none; }
.pc-pusto { height: 100%; display: grid; place-items: center; color: #8A8A96; font-size: 14px; }
.pc-cz-g { padding: 20px 28px 16px; border-bottom: 1px solid #EDEDF1; }
.pc-cz-g h2 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; outline: none; }
.pc-cz-od { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; font-size: 14px; line-height: 1.4; }
.pc-cz-od b { font-weight: 600; }
.pc-cz-od time { font-size: 13px; color: #6B6B76; }
.pc-cz-do { display: block; color: #6B6B76; font-size: 13px; overflow-wrap: anywhere; }
.pc-cz-a { display: flex; gap: 8px; margin-top: 14px; }
.pc-cz-a button { padding: 6px 12px; border-radius: 7px; border: 1px solid #DADAE0; font-size: 13px; background: #fff; }
.pc-cz-a button:hover { background: #F3F3F6; }
.pc-odp { margin: 10px 0 0; font-size: 13px; color: #1d1d22; background: #F3F3F6; border-radius: 7px; padding: 8px 12px; }

/* treść maila: to projektujemy naprawdę — szablon maila sklepu (600 px, biała karta na szarym, marka sklepu) */
.pc-cz-t { background: var(--kadr); padding: 28px 20px 32px; font-family: var(--font); }
.pc-mail { max-width: 600px; margin: 0 auto; background: #fff; border-radius: var(--r); padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; line-height: 1.55; font-size: 16px; color: var(--tusz); }
.pc-mail p { margin: 0; }
.pc-mail > .btn, .pc-mail > a.btn { align-self: flex-start; }
.pc-mail-logo { height: 30px; width: auto; align-self: flex-start; margin-bottom: 10px; }
.pc-mail .ks-m-img { margin: 4px 0; }
.pc-mail .ks-sprawa-a { display: flex; gap: 10px; flex-wrap: wrap; }
.pc-mail-s { max-width: 600px; margin: 14px auto 0; font-size: 13px; line-height: 1.5; color: var(--tusz2); text-align: center; }

@keyframes pcTlo { from { opacity: 0; } } @keyframes pcTloW { to { opacity: 0; } }
@keyframes pcOkno { from { opacity: 0; transform: translateY(14px); } }
@keyframes pcOknoW { to { opacity: 0; transform: translateY(8px); } }

/* tost z akcją „Zobacz maila” */
.toast.z-a { display: flex; align-items: center; gap: 16px; }
.ks-tost-a { color: var(--zolc); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.ks-tost-a:focus-visible { outline-color: var(--zolc); }

/* Zespół: adres przy osobie */
.ks-os-m { display: block; font-size: 13px; color: var(--tusz2); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .pc-okno { grid-template-columns: 300px minmax(0, 1fr); }
  .pc-fold { display: none; }
  .pc-g-n { width: auto; }
}
/* telefon i wąski tablet: lista ALBO mail, jak w aplikacji pocztowej */
@media (max-width: 760px) {
  .pc.otw { padding: 8px 0 0; }
  .pc-mak { width: calc(100% - 16px); flex-wrap: wrap; gap: 6px 10px; }
  .pc-mak span { flex-basis: 100%; order: 3; }
  .pc-mak button { margin-left: auto; }
  .pc-okno { width: 100%; border-radius: 12px 12px 0 0; grid-template-columns: minmax(0, 1fr); }
  .pc-szuk, .pc-g-k .pc-adr { display: none; }
  .pc-lista { border-right: 0; }
  .pc-cz { display: none; }
  .pc-okno.czyta .pc-lista { display: none; }
  .pc-okno.czyta .pc-cz { display: block; }
  .pc-wroc { display: block; padding: 12px 16px 0; color: var(--pc-nie); font-size: 15px; font-weight: 500; }
  .pc-cz-g { padding: 12px 16px 14px; }
  .pc-cz-g h2 { font-size: 18px; }
  .pc-cz-od { grid-template-columns: 36px minmax(0, 1fr); }
  .pc-cz-od time { grid-column: 2; }
  .pc-cz-t { padding: 16px 10px 24px; }
  .pc-mail { padding: 22px 18px; font-size: 15px; }
  .pc-mail .ks-m-dl { grid-template-columns: 72px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-tlo, .pc-okno, .pc-mak { animation: none !important; }
}