/* ============================================================
   Dial-up + pitu-pitu
   ============================================================ */

/* ---------- MODEM ---------- */
.dial{ padding: 10px; }
.dial-row{ display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dial-row label{ flex: 0 0 118px; }
.dial-row input{
  flex: 1; font: 11px var(--ui-font); padding: 2px 4px;
  border: 1px inset var(--face-dk); background: #fff;
}
.dial-check{ display: block; margin: 8px 0; }
.dial-log{
  margin: 8px 0; height: 76px; overflow: auto;
  background: #fff; border: 1px inset var(--face-dk);
  padding: 4px 6px; font: 11px var(--ui-font); color: #333;
}
.dial-btns{ display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }

.dial-status{ padding: 10px; }
.dial-status p{ margin: 0 0 8px; }
.dial-status table{ width: 100%; font: 11px var(--ui-font); }
.dial-status td:last-child{ text-align: right; font-family: "Courier New", monospace; }

.tray-ico{
  border: 0; background: transparent; color: #fff;
  font-size: 13px; cursor: default; padding: 0 4px;
}

/* ---------- PITU-PITU ---------- */

/* Gwiazdka zamiast slonka. Kolor niesie status.
   ASSET: podmiana na PNG -> zamien clip-path na background-image */
.pp-star{
  display: inline-block; width: 12px; height: 12px; flex: 0 0 12px;
  background: #f0c000;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pp-star.on-online   { background: #f5c518; }
.pp-star.on-away     { background: #f58b18; }
.pp-star.on-busy     { background: #d63b2f; }
.pp-star.on-offline  { background: #9aa0a6; }
.pp-star.on-invisible{ background: #9aa0a6; opacity: .5; }

/* logowanie */
.pp-login{ padding: 12px; }
.pp-logo{
  display: flex; align-items: center; gap: 6px;
  font: bold 16px var(--ui-font); color: #d9820c; margin-bottom: 10px;
}
.pp-logo .pp-star{ width: 18px; height: 18px; flex: 0 0 18px; }
.pp-tabs{ display: flex; gap: 2px; margin-bottom: 10px; }
.pp-tab{
  flex: 1; padding: 4px; border: 1px solid var(--face-dk); border-bottom: 0;
  background: #ddd9cb; font: 11px var(--ui-font); cursor: default;
}
.pp-tab.on{ background: var(--face); font-weight: bold; }
.pp-row{ display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pp-row label{ flex: 0 0 64px; }
.pp-row input{
  flex: 1; font: 11px var(--ui-font); padding: 3px 4px;
  border: 1px inset var(--face-dk); background: #fff;
}
.pp-btns{ text-align: right; margin-top: 10px; }
.pp-note{ font-size: 10px; color: #555; margin: 8px 0 0; }
.pp-err{
  margin-top: 8px; padding: 5px 7px; background: #fde8e6;
  border: 1px solid #d99; color: #900; font-size: 11px;
}
.pp-ai{
  margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--face-dk);
  font-size: 10px; color: #666;
}

/* lista kontaktow */
.pp-roster{ height: 100%; display: flex; flex-direction: column; background: var(--face); }
.pp-me{
  display: flex; align-items: center; gap: 5px; padding: 6px;
  border-bottom: 1px solid var(--face-dk); flex-wrap: wrap;
}
.pp-me-nick{ font-weight: bold; }
.pp-me-uin{ color: #777; font-size: 10px; }
.pp-status{ flex: 1 0 100%; font: 11px var(--ui-font); margin-top: 4px; }
.pp-desc{
  margin: 5px 6px; padding: 3px 5px; font: italic 11px var(--ui-font);
  border: 1px inset var(--face-dk); background: #fff;
}
.pp-list{ flex: 1; overflow: auto; background: #fff; margin: 0 6px 6px; border: 1px inset var(--face-dk); }
.pp-contact{
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; cursor: default; font-size: 11px;
}
.pp-contact:hover{ background: #e8f0fe; }
.pp-contact.off{ color: #999; }
.pp-contact.off .pp-nick{ font-style: italic; }
.pp-contact.unread{ font-weight: bold; background: #fff6d5; }
.pp-contact.unread::after{ content: "✉"; margin-left: auto; }
.pp-nick{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-desc-t{ color: #888; font-size: 10px; font-style: italic; margin-left: 4px; overflow: hidden; white-space: nowrap; }
.pp-bar{ display: flex; gap: 4px; padding: 0 6px 6px; }
.btn.sm{ min-width: 0; padding: 3px 7px; font-size: 10px; flex: 1; }

/* rozmowa */
.pp-chat{ height: 100%; display: flex; flex-direction: column; background: var(--face); }
.pp-log{
  flex: 1; overflow: auto; background: #fff; margin: 5px;
  border: 1px inset var(--face-dk); padding: 5px;
}
.pp-msg{ margin-bottom: 7px; font-size: 11px; line-height: 1.4; }
.pp-who{ font-weight: bold; color: #1a5fb4; }
.pp-msg.mine .pp-who{ color: #c33; }
.pp-msg.sys{ color: #999; font-style: italic; }
.pp-t{ color: #aaa; font-size: 10px; }
.pp-typing{ padding: 0 8px 3px; font: italic 10px var(--ui-font); color: #888; }
.pp-compose{ display: flex; gap: 5px; padding: 0 5px 5px; }
.pp-compose textarea{
  flex: 1; height: 46px; resize: none; font: 11px var(--ui-font);
  padding: 4px; border: 1px inset var(--face-dk);
}

/* ---------- EMOTIKONY ---------- */

/* Znak zastepczy renderuje sie z data-c. Podmiana na Twoje PNG:
   .emo{ background-image: var(--emo-src); }
   .emo::after{ content: ""; }
   i wtedy per-emotka: .emo[data-e="smile"]{ --emo-src: url(../assets/emo/smile.png) } */
.emo{
  display: inline-block; width: 16px; height: 16px;
  vertical-align: -3px; line-height: 16px; text-align: center;
  background: center/contain no-repeat;
}
.emo::after{ content: attr(data-c); font-size: 14px; }

.pp-compose{ position: relative; }

.pp-emo-btn{
  flex: 0 0 24px; height: 24px; align-self: flex-end;
  border: 1px outset var(--face-lt); background: var(--face);
  cursor: default; font-size: 13px; line-height: 1; padding: 0;
}
.pp-emo-btn:active{ border-style: inset; }

/* display:grid przebija wbudowane [hidden]{display:none} przegladarki,
   wiec ukrycie trzeba zadeklarowac jawnie - inaczej paleta wisi zawsze */
.pp-emo-pal[hidden]{ display: none; }

.pp-emo-pal{
  position: absolute; left: 0; bottom: 30px; z-index: 50;
  width: 176px; padding: 4px;
  display: grid; grid-template-columns: repeat(8, 20px); gap: 2px;
  background: var(--face); border: 1px solid var(--face-dk);
  box-shadow: 2px 2px 6px rgba(0,0,0,.35);
}
.emo-pick{
  width: 20px; height: 20px; padding: 0;
  border: 1px solid transparent; background: transparent; cursor: default;
}
.emo-pick:hover{ border-color: #2f65c9; background: #e8f0fe; }

/* ---------- POKOJ ROZMOW ---------- */
.pp-room{ height: 100%; display: flex; background: var(--face); }
.pp-room-main{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pp-room-users{
  flex: 0 0 120px; border-left: 1px solid var(--face-dk);
  display: flex; flex-direction: column; overflow: auto;
}
.pp-room-users .pp-contact{ padding: 3px 5px; }

.pp-group{
  padding: 3px 6px; background: #dcd8c8;
  font-size: 10px; font-weight: bold; color: #555;
  border-top: 1px solid var(--face-dk); border-bottom: 1px solid var(--face-dk);
}
.pp-contact.stranger{ color: #444; }
.pp-contact.stranger .pp-desc-t{ margin-left: auto; }

/* ---------- WYGASZACZ ---------- */
#saver{
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  /* wygaszanie zamiast zniknięcia - w obie strony */
  opacity: 0;
  transition: opacity .7s ease;
}
#saver.on{ opacity: 1; }
#saver canvas{
  /* piksele maja zostac pikselami przy skalowaniu */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}