:root{
  --bg:#0b0c10; --fg:#e6e6e6; --muted:#a9a9a9; --card:#13151b;
  --acc:#7dd3fc; --ok:#22c55e; --err:#ef4444;
  --vh: 1vh; /* ustawiane przez vh.js */
}

/* ===== Bazowe ===== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:24px}
header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.nav a{margin-right:12px}

/* Ulepszone zachowanie na mobile dla nagłówka */
@media (max-width: 900px){
  header{flex-wrap:wrap; row-gap:8px}
  .nav{width:100%; display:flex; gap:12px; flex-wrap:wrap}
  .nav a, .nav form button{width:auto}
}

.card{background:var(--card);border:1px solid #22242e;border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2)}

input,textarea,button,select{width:100%;padding:12px;border-radius:12px;border:1px solid #2a2d39;background:#0f1117;color:#fff}
button{cursor:pointer;background:#2563eb;border-color:#1e40af;font-weight:600}
.row{display:grid;gap:14px}
.muted{color:var(--muted)}
.pill{background:#ffc800;border:1px solid #ffc800;color:#000;padding:6px 10px;border-radius:999px;font-size:12px}
.tip{font-size:13px;color:#b8b8b8}
.toggle{display:flex;gap:10px;align-items:center}
.toggle label{display:flex;gap:6px;align-items:center;cursor:pointer}

/* UWAGA: to było źródłem wczesnego scrolla.
   Zostawiamy jako bazę, ale poniżej nadpisujemy w kontekście czatu */
.thread-list{max-height:480px;overflow:auto}

.thread-item{padding:10px;border-radius:10px;border:1px solid #262a36;margin-bottom:8px;background:#11131a}
.thread-item:hover,.thread-item:focus{background:rgba(255,255,255,0.03);outline:none}

/* Bąbelki */
.msg{padding:10px;border-radius:12px;margin:8px 0;max-width:90%}
.msg.guest{background:#1f2937}
.msg.owner{background:#0b3a2a}
.msg.user{background:#1d2a3a}
.msg small{display:block;color:#a0a0a0;margin-top:4px}

.flash{background:var(--err);color:#fff;padding:10px;border-radius:10px;margin-bottom:12px}

/* ===== CHAT: pełna wysokość na stronach czatu, przy zachowaniu szerokości wrapa ===== */
html.chat-page, body.chat-page{
  height: calc(var(--vh) * 100);
  overflow: hidden; /* strona nie scrolluje (tylko na /wiadomosci – patrz layout.php) */
}
.wrap.chat-page{
  height: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr; /* header + reszta */
  overflow: hidden;
}

/* kontener czatu wypełnia pozostałą przestrzeń */
.chat-shell{
  height: 100%;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  overflow: hidden;
}
@media (max-width:900px){
  .chat-shell{ grid-template-columns: 1fr; }
}

/* Panele przewijalne wewnętrznie */
.chat-list, .chat-messages{
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prawy panel: header / messages / composer */
.chat-panel{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  height: 100%;
  border: none;
  background: transparent;
}
.chat-header{
  position: sticky;
  top: 0;
  z-index: 1;
  background: transparent;
  padding: 8px 6px;
  border: 0;
}
.chat-messages{ padding: 8px 10px; }
.chat-composer{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 10px;
  background: transparent;
}
.chat-composer .row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.chat-composer textarea{
  width: 100%; resize: vertical; min-height: 40px; max-height: 160px; padding: 10px;
}
.chat-composer button{ width: auto; padding: 10px 14px; }

/* Mobile: lista -> rozmowa (TYLKO w obrębie .chat-shell!) */
.chat-back{ display:none; margin-right:8px }
@media (max-width:900px){
  /* ⬇⬇⬇ KLUCZ: zawężone do .chat-shell — nie ukrywamy profilu */
  .chat-shell .chat-list{ display:block }
  .chat-shell .chat-panel{ display:none }
  .chat-shell.thread-open .chat-list{ display:none }
  .chat-shell.thread-open .chat-panel{ display:grid }

  .chat-back{ display:inline-block }
  .chat-messages{ padding:8px }
  .chat-composer{ padding:8px }
}

/* Unread badge */
.badge{
  display:inline-block;min-width:20px;padding:0 6px;border-radius:12px;
  font-size:12px;line-height:20px;text-align:center;background:#dc2626;color:#fff;font-weight:600;
}

/* /wiadomosci – lewy panel: scroll dopiero gdy potrzebny */
.chat-shell > .chat-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden; /* panel jako taki nie przewija się */
}
.chat-shell > .chat-list .thread-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* pojawi się dopiero przy nadmiarze */
  -webkit-overflow-scrolling: touch;
  /* ⬇⬇⬇ nadpisujemy globalne 480px, żeby NIE wymuszać wczesnego scrolla */
  max-height: none;
}

/* Dodatkowo: po prawej nic nie wymusza wczesnego scrolla — mamy tylko overflow:auto; */

.tick { font-size: 12px; margin-left: 6px; vertical-align: baseline; user-select: none; }
.tick--sent      { opacity: .6; }
.tick--delivered { opacity: .85; }
.tick--read      { opacity: 1; color: #0ea5b5; } /* niebieskie ✓✓ przy przeczytanych */\n
/* === Mobile: allow natural vertical scrolling in chat === */
@media (max-width: 900px){
  .chat-shell .thread-list,
  .chat-shell .thread-item,
  .chat-messages{
    touch-action: pan-y;
  }
}
\n

/* === Simple names & avatars for chat === */
.msg-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.msg-head .name{ font-weight:600; font-size:13px; }
.msg-head .time{ color:#a0a0a0; font-size:12px; margin-left:auto; }
.avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:inline-block; }
.avatar--fallback{ background:#2a2d39; color:#e6e6e6; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.msg-body{ white-space:pre-wrap; }

/* Thread list avatars */
.thread-item .avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:inline-block; }
.thread-item .avatar--fallback{ background:#2a2d39; color:#e6e6e6; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

/* Thread list avatars: bigger */
.thread-item .avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; display:inline-block; }
.thread-item .avatar--fallback{ width:44px; height:44px; border-radius:50%; background:#2a2d39; color:#e6e6e6; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.thread-item .thread-title strong{ font-weight:700; font-size:15px; line-height:1.2; }


/* === Overflow-safe trims for /wiadomosci and thread view === */

/* Left list: keep names on one line w/ ellipsis */
.thread-item .thread-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.thread-item .thread-title strong{
  display:block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Left list: clamp preview ('tip') to 2 lines with ellipsis */
.thread-item .tip{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Inside thread: message bubbles never overflow horizontally */
.msg{ max-width: 95%; } /* keep some margin inside the panel */
.msg .msg-body{
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}

/* Very long URLs and code should wrap too */
.msg .msg-body a{ word-break: break-all; overflow-wrap: anywhere; }
.msg .msg-body pre,
.msg .msg-body code,
.msg .msg-body kbd,
.msg .msg-body samp{
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Media inside messages scales to container */
.msg .msg-body img,
.msg .msg-body video,
.msg .msg-body iframe{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Prevent tiny scroll traps on touch when selecting text */
.chat-messages{ overscroll-behavior-y: contain; }


/* === Thread title layout: name truncates, badge sticks to the right === */
.thread-item .thread-title{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* required so the name can shrink */
}
.thread-item .thread-title .avatar,
.thread-item .thread-title .avatar--fallback{
  flex: 0 0 auto;
}
.thread-item .thread-title strong{
  flex: 1 1 auto;         /* take remaining space */
  min-width: 0;           /* allow text-overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-item .thread-title .badge{
  margin-left: 8px;
  flex: 0 0 auto;         /* do not shrink */
  align-self: center;
}

/* Optional: make the right-edge alignment crisp */
.thread-item{ position: relative; }


/* ====== DARK THEME VARIABLES (class on <html>) ====== */
html.theme-dark{
  --bg:#1a1a1e;
  --fg:#e6e7eb;
  --muted:#9aa0a6;
  --card:#202024;
  --border:#2d2d31;
  --soft:#242429;
  --acc:#5865f2;
  --acc-hover:#4752d1;
  --acc-weak:#2a2d31;
  --ok:#22c55e;
  --err:#ef4444;
}

/* ====== LIGHT THEME – Jasny, minimalistyczny motyw ====== */
html:not(.theme-dark){
  --bg:#ffffff;
  --fg:#111315;
  --muted:#667085;
  --card:#ffffff;
  --border:#e6e7eb;
  --soft:#f5f7fa;

  /* Akcent (turkus — łatwo zmienić w jednym miejscu) */
  --acc:#0ea5b5;
  --acc-hover:#0b8fa0;
  --acc-weak:#e9f7fa;

  --ok:#16a34a;
  --err:#e11d48;
}

html:not(.theme-dark) body{ background:#f1f1f1; color: var(--fg); }
html.theme-dark body{ background:#1a1a1e; }
body{
  font:16px/1.6 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Linki */
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--acc) 75%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Karty */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Formularze */
input, textarea, select, button{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--fg);
}
input::placeholder, textarea::placeholder{ color:#94a3b8; }
input:focus, textarea:focus, select:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}

/* Przyciski */
button{
  cursor:pointer;
  background:var(--acc);
  border-color:var(--acc);
  color:#fff;
  font-weight:700;
  transition:background .15s ease, transform .05s ease;
}
button:hover{ background:var(--acc-hover); border-color:var(--acc-hover); }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.6; cursor:not-allowed; }

.btn{ background:var(--acc); border-color:var(--acc); color:#fff; }
.btn:hover{ background:var(--acc-hover); border-color:var(--acc-hover); }
.btn--ghost{ background:transparent; color:var(--acc); border-color:var(--border); }
.btn--ghost:hover{ background:var(--acc-weak); border-color:color-mix(in srgb, var(--acc) 40%, var(--border)); }
.btn--outline{ background:#fff; color:var(--acc); border-color:var(--acc); }
.btn--outline:hover{ background:var(--acc-weak); }

/* Lista wątków */
.thread-list{ max-height:none; }
.thread-item{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:10px;
}
.thread-item:hover,.thread-item:focus{ background:#f3f4f6; }
.thread-item .thread-title strong{ color:#0f172a; }
.thread-item .tip{ color:var(--muted); }

/* Badge */
.badge{ background:#ef4444; color:#fff; }

/* Panel czatu */
.chat-panel{ background:transparent; }
.chat-header{ background:#f1f1f1; border-bottom:1px solid #eef0f2; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.chat-messages{ background:#f9fafb; }
.chat-composer{
  background:#fff;
  border-top:1px solid var(--border);
}

/* Avatary */
.avatar--fallback{ background:#e5e7eb; color:#374151; }

.tip{ color:var(--muted); }
.muted{ color:#7a7a7a; }

.msg .msg-body a{ color:var(--acc); word-break: break-all; overflow-wrap: anywhere; }

.row hr, .chat-header hr{
  border:0; height:1px; background:#eceff1; margin:8px 0;
}

@media (max-width:900px){
  .chat-messages, .chat-composer{ background:#fff; }
}

/* ====== DYMKI WIADOMOŚCI ====== */

/* Ogólne dymki */
.msg {
  display: inline-block;
  clear: both;
  padding: 10px 14px;
  border-radius: 16px;
  margin: 6px 0;
  max-width: 95%;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;
  font-size: 15px;
}

/* Guest & User — po lewej */
.msg.guest,
.msg.user {
  background: linear-gradient(180deg,#f8fbff,#eef2ff);
  border: 1px solid #e0e7ff;
  color: #0f172a;
  float: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
  border-top-right-radius: 4px;
}

/* Owner — po prawej, stonowany wygląd */
.msg.owner {
  background: linear-gradient(180deg,#f0fdf4,#e7f9f2);
  border: 1px solid #d1fae5;
  color: #0f172a;
  float: right;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}

/* Trójkąciki dymków */
.msg.guest::after,
.msg.user::after,
.msg.owner::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

/* Trójkącik po lewej */
.msg.guest::after,
.msg.user::after {
  left: -6px;
  border-right-color: #ffffff;
  border-left: 0;
  border-top: 0;
  margin-bottom: 1px;
  display:none;
}

/* Trójkącik po prawej */
.msg.owner::after {
  right: -6px;
  border-left-color: #f2f5f6;
  border-right: 0;
  border-top: 0;
  margin-bottom: 1px;
  display:none;
}

/* Czytelne odstępy między wiadomościami */
.chat-messages .msg + .msg {
  margin-top: 8px;
}

/* Kontener wiadomości — floaty + padding */
.chat-messages {
  background: #f9fafb;
  overflow-y: auto;
  padding: 10px;
  background-image:url("/uploads/groovepaper.png");
}

/* Wyczyszczenie floatów */
.chat-messages::after {
  content: "";
  display: block;
  clear: both;
  margin-top:20px;
}

/* ===== Nawigacja z ikonkami ===== */
.main-header {
  background: #fff;
  border-bottom: 1px solid #e6e7eb;
  padding: 10px 14px;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  text-decoration: none;
  width: 28px;
  height: 28px;
  transition: color .15s ease;
}

.nav-icon:hover {
  color: var(--acc);
}

.nav-icon svg {
  width: 24px;
  height: 24px;
}

.logout-btn {
  background: none;
  border: none;
  padding: 0;
}
.logout-btn button {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logout-btn svg {
  width: 24px;
  height: 24px;
}

/* Ikona nawigacji jest kotwicą dla badge */
.nav-icon { position: relative; }

/* Overlay badge w prawym górnym narożniku ikony */
.nav-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(45 100% 65%), hsl(25 100% 70%));
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
.nav-badge[hidden]{ display: none !important; }

/* Opcjonalnie delikatne dopasowanie przy 3+ znakach (np. 99+) */
.nav-badge:is([data-len="3"], [data-len="4"]) { font-size: 10px; }

/* Aktywny stan ikonek – jak hover */
.nav-icon.is-active,
.nav-icon[aria-current="page"]{
  color: var(--acc);
}

/* ===== Mobile nagłówek: logo po lewej, ikonki po prawej ===== */
@media (max-width: 900px){
  /* ustaw header jako flex-kontener w obrębie .wrap */
  .wrap > header{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* logo/nazwa – nie łamie się */
  .wrap > header > div:first-child a{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  /* nawigacja przy prawej krawędzi */
  .wrap > header > nav.nav{ margin-left: auto !important; }

  /* ikony w jednej linii */
  .wrap > header > nav.nav > .nav-container{
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  /* form wylogowania nie „udaje” ikony */
  .wrap > header .nav .logout-btn{
    display: inline !important;
    margin: 0; padding: 0; border: 0;
  }
  .wrap > header .nav .logout-btn > .nav-icon{
    inline-size: 28px; block-size: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0;
  }
  .wrap > header .nav .logout-btn > .nav-icon svg{
    inline-size: 22px; block-size: 22px;
  }
}

/* aktywna ikonka jak hover (jeśli jeszcze nie masz) */
.nav-icon.is-active,
.nav-icon[aria-current="page"]{ color: var(--acc); }

/* ===== Header w jednej linii (logo po lewej, ikonki po prawej) ===== */

/* PODSTAWA – działa na każdej szerokości (bez zmian układu treści) */
.wrap > header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* Logo/tytuł po lewej niech się nie łamie */
.wrap > header > div:first-child a{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Nawigacja przy prawej krawędzi */
.wrap > header > nav.nav{
  margin-left: auto !important;
  float: none !important;
}

/* Ikonki w jednej linii */
.wrap > header > nav.nav > .nav-container{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Wszystkie ikonki – ten sam, mały, inline-klik */
.wrap > header .nav .nav-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 28px !important;
  block-size: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  vertical-align: middle !important;
}

/* Formularz wylogowania nie może być blokiem – zachowuj się jak ikonka */
.wrap > header .nav .logout-btn{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Przycisk wewnątrz formy – identyczny jak .nav-icon */
.wrap > header .nav .logout-btn > button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 28px !important;
  block-size: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
}

/* Rozmiar SVG w każdej ikonie */
.wrap > header .nav .nav-icon svg,
.wrap > header .nav .logout-btn > button svg{
  inline-size: 22px !important;
  block-size: 22px !important;
}

/* Badge pozostaje overlayem (jeśli używasz) */
.wrap > header .nav .nav-icon{ position: relative !important; }

/* Dla bardzo wąskich ekranów – to samo, ale pilnujemy braku zawijania */
@media (max-width: 900px){
  .wrap > header{ flex-wrap: nowrap !important; }
  .wrap > header > nav.nav > .nav-container{ flex-wrap: nowrap !important; }
}

/* ===== Ikonki przy prawej krawędzi nagłówka (wewnątrz .wrap) ===== */

/* zamiast space-between użyjemy flex-start + auto push dla nav */
.wrap > header{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* <-- kluczowa zmiana */
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* logo/nazwa po lewej, bez łamania */
.wrap > header > div:first-child a{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* nawigacja przejmuje „resztę” i pcha się do prawej */
.wrap > header > nav.nav{
  margin-left: auto !important;            /* wypchnij nav na prawo */
  flex: 1 1 auto !important;               /* pozwól mu zająć przestrzeń */
  display: flex !important;
  justify-content: flex-end !important;    /* ikony do samej prawej krawędzi */
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* kontener z ikonkami: jedna linia, bez dodatkowej poduszki z prawej */
.wrap > header > nav.nav > .nav-container{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;                    /* odstęp między ikonkami */
  padding-right: 0 !important;
  margin-right: 0 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* ikonki spójne rozmiarowo + brak „rozpychania” */
.wrap > header .nav .nav-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 28px !important;
  block-size: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  vertical-align: middle !important;
  position: relative !important; /* kotwica dla badge */
}

.wrap > header .nav .nav-icon svg{
  inline-size: 22px !important;
  block-size: 22px !important;
}

/* formularz wylogowania zachowuje się jak pojedyncza ikonka */
.wrap > header .nav .logout-btn{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.wrap > header .nav .logout-btn > button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 28px !important;
  block-size: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
}

/* dla bardzo wąskich ekranów - brak zawijania */
@media (max-width: 900px){
  .wrap > header{ flex-wrap: nowrap !important; }
  .wrap > header > nav.nav > .nav-container{ flex-wrap: nowrap !important; }
}

/* ===== Keyboard-safe chat inputs (mobile) ===== */

/* 1) /wiadomosci: wysokość wg VIZUALNEGO viewportu (uwzględnia klawiaturę) */
@supports (height: 100dvh){
  html.chat-page,
  body.chat-page{
    height: 100dvh; /* zamiast 100vh/--vh -> nie chowa composera pod klawiaturą */
  }
}

/* Composer trzyma się dołu i ma zapas na safe-area (iOS) */
.chat-composer{
  position: sticky;         /* kotwiczymy w dolnej krawędzi przewijanego obszaru */
  bottom: 0;
  z-index: 3;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Na mobile: kiedy focus jest w composerze, daj bufor w messages,
   żeby nic nie "wciskało" się pod composer ani pod klawiaturę */
@media (max-width: 900px){
  /* bufor pod listą wiadomości, gdy composer ma focus */
  .chat-panel:has(.chat-composer:focus-within) .chat-messages{
    padding-bottom: 140px;  /* przybliżona wysokość composera + mały zapas */
  }

  /* iOS nie powiększa viewportu sztucznie (brak zoom-in) przy font-size >=16px */
  .chat-composer textarea{
    font-size: 16px;
    scroll-margin-bottom: 140px; /* gdy przeglądarka przewija do focusu, zostawia margines */
  }
}

/* 2) /profil/<nick> – czat gościa nad formularzem (#sendForm) */

/* Formularz przyklejamy do dołu ekranu (w obrębie strony), tak jak composer */
@media (max-width: 900px){
  #sendForm{
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #fff;               /* spójne z jasnym motywem kart */
    border-top: 1px solid var(--border);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* Lista wiadomości w boxie nad formularzem – kontrolowana wysokość,
     żeby formularz nie wypadał z ekranu przy pokazanej klawiaturze */
  .profile-chat-box{
    max-height: calc(100dvh - 220px);  /* ~header + marginesy + formularz */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Gdy focus jest w formularzu, dodajemy bufor na dole listy,
     żeby najnowsze wiadomości nie wpadały pod formularz/klawiaturę */
  .wrap:has(#sendForm :is(textarea, input):focus) .profile-chat-box{
    padding-bottom: 120px;
  }

  /* Analogiczna sztuczka jak wyżej – brak zoomu i margines przewijania do focusu */
  #sendForm textarea,
  #sendForm input[type="text"]{
    font-size: 16px;
    scroll-margin-bottom: 120px;
  }
}

/* ===========================================================
   Chat input: zawsze widoczny + równa wysokość z przyciskiem
   =========================================================== */

/* 0) Wspólne: ustandaryzowana wysokość composera i przycisku */
:root{
  --composer-h: 44px;      /* desktop */
}
@media (max-width: 900px){
  :root{ --composer-h: 48px; } /* mobile – ciut wyższe dla kciuka */
}

/* Tekst >=16px, by iOS nie robił auto-zooma */
.chat-composer textarea,
.chat-composer input[type="text"],
#sendForm textarea,
#sendForm input[type="text"]{
  font-size: 16px;
}

/* Równa wysokość: pole i przycisk */
.chat-composer textarea,
.chat-composer input[type="text"]{
  height: var(--composer-h);
  min-height: var(--composer-h);
  max-height: var(--composer-h);
  padding-block: 10px;
  resize: none;             /* jedno „piętro” – schludnie jak przycisk */
  line-height: 1.2;
}

.chat-composer .btn,
.chat-composer button[type="submit"]{
  height: var(--composer-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
}

/* Profil: to samo dla #sendForm */
#sendForm textarea,
#sendForm input[type="text"]{
  height: var(--composer-h);
  min-height: var(--composer-h);
  max-height: var(--composer-h);
  padding-block: 10px;
  resize: none;
  line-height: 1.2;
}
#sendForm .btn,
#sendForm button[type="submit"]{
  height: var(--composer-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
}

/* 1) /wiadomosci: nie chowaj composera pod klawiaturą */
@supports (height: 100dvh){
  html.chat-page, body.chat-page{ height: 100dvh; }
}

/* trzymamy przy dolnej krawędzi widocznego obszaru */
.chat-composer{
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: #f1f1f1;            /* w razie overlayu */
  border-top: 1px solid var(--border);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* więcej „powietrza” na dole listy wiadomości, gdy piszemy */
.chat-messages{
  overscroll-behavior-y: contain;
  scroll-padding-bottom: calc(var(--composer-h) + 24px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

@media (max-width: 900px){
  /* gdy focus w composerze – zrób miejsce pod nim (na mobile) */
  .chat-panel:has(.chat-composer:focus-within) .chat-messages{
    padding-bottom: calc(var(--composer-h) + 72px);
  }

  /* EXTRA–solid: na focus przełącz composer w tryb „fixed” (nad klawiaturą) */
  /* Dzięki temu nawet w bardziej upartych przeglądarkach pole nie schowa się. */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-composer{
    position: fixed;
    left: 0; right: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: var(--wrap-max, 980px); /* zachowaj szerokość .wrap */
    padding-inline: 12px;
    z-index: 9;
  }

  /* …i dołóż miejsce w liście, by ostatnie wiadomości nie wpadały pod overlay */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-messages{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom));
  }
}

/* 2) /profil/<nick>: formularz #sendForm tak samo przy dolnej krawędzi */
@media (max-width: 900px){
  #sendForm{
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #fff;
    border-top: 1px solid var(--border);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* solidny wariant „fixed” podczas pisania – nad klawiaturą */
  .wrap:has(#sendForm :is(textarea:focus, input:focus)) #sendForm{
    position: fixed;
    left: 0; right: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: var(--wrap-max, 980px);
    padding-inline: 12px;
    z-index: 10;
  }

  /* lista wiadomości nad formularzem (dopasuj klasę, jeśli masz inną niż .profile-chat-box) */
  .profile-chat-box{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(var(--composer-h) + 24px);
	padding: 0px !important;
	width:105% !important;
  }
  .wrap:has(#sendForm :is(textarea:focus, input:focus)) .profile-chat-box{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - (var(--composer-h) + 160px)); /* elastyczny bufor */
  }
}

/* 3) Małe kosmetyki – równe rogi i odstępy w composerze */
.chat-composer input,
.chat-composer textarea,
#sendForm input,
#sendForm textarea{
  border-radius: 12px;
}

.site-logo img{
  display:block;            /* bez “dziur” pod obrazkiem */
  width:164px;              /* CSS-px (stały rozmiar w layoucie) */
  height:auto;              /* proporcje */
  image-rendering:auto;     /* domyślne, najostrzejsze na mobilkach */
}
@media (max-width:420px){
  /* jeśli chcesz logo nieco mniejsze na bardzo wąskich ekranach */
  .site-logo img{ width:155px; }
}

/* —— Presence on profile —— */
.presence {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  font-size:.92rem;
  color:#6b7280; /* gray-500 */
  vertical-align:middle;
}
.presence .presence-dot {
  width:8px;
  height:8px;
  border-radius:999px;
  background:#9ca3af; /* gray-400 */
  box-shadow:0 0 0 2px #fff; /* ring, ładnie na białym tle */
}
.presence--online { color:#059669; }           /* emerald-600 */
.presence--online .presence-dot { background:#10b981; } /* emerald-500 */
.presence--offline { color:#6b7280; }          /* gray-500 */

@media (max-width:480px){
  .presence { font-size:.88rem; gap:5px; }
}

/* ——— Ludzie online na stronie głównej ——— */
.home-online { margin-top: 24px; }
.home-online__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.home-online .see-all { font-size: .92rem; color: #4b5563; text-decoration: none; }
.home-online .see-all:hover { text-decoration: underline; }

.online-rail {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.online-chip {
  position: relative;
  width: 48px; height: 48px; border-radius: 999px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f3f4f6; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .15s ease;
}
.online-chip:hover { transform: translateY(-1px); }
.online-chip__img { width: 100%; height: 100%; object-fit: cover; }
.online-chip__fallback { font-weight: 600; color: #6b7280; }

/* zielona kropka „online” (wszyscy tu są online, więc pokazujemy stały wskaźnik) */
.online-chip::after {
  content: "";
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 999px;
  background: #10b981;
  border: 2px solid #fff;
}

/* mobile: poziomy scroll */
@media (max-width: 680px) {
  .online-rail { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; }
  .online-rail::-webkit-scrollbar { display: none; }
}

/* ——— Kompaktowa karta na start ——— */
.card--compact { padding: 14px 16px; }
.card--compact .h,
.card--compact h2 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 6px; }
.card--compact p { font-size: .92rem; margin: 6px 0 0; }
.row--tight { gap: 8px; margin-top: 8px; }
.btn-sm { padding: 8px 12px; font-size: .92rem; }
.tip--sm { font-size: .9rem; opacity: .9; }

/* ——— Sekcja „Czat online” (kompakt + większe avatary) ——— */
.home-online--tight { margin-top: 18px; }
.home-online__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.home-online__head .h,
.home-online__head h2 { font-size: 1.0rem; line-height: 1.2; margin: 0; }
.see-all--sm { font-size: .9rem; color: #4b5563; text-decoration: none; }
.see-all--sm:hover { text-decoration: underline; }

.online-rail { display: flex; flex-wrap: wrap; gap: 12px; }
.online-rail--lg { gap: 14px; }

/* Większe avatary: 64px (desktop), 56px (małe ekrany) */
.online-chip { position: relative; width: 48px; height: 48px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: transform .15s ease; }
.online-chip--lg { width: 64px; height: 64px; }
.online-chip:hover { transform: translateY(-1px); }
.online-chip__img { width: 100%; height: 100%; object-fit: cover; }
.online-chip__fallback { font-weight: 600; color: #6b7280; font-size: 1rem; }

/* zielona kropka dla online */
.online-chip::after {
  content: "";
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 999px;
  background: #10b981;
  border: 2px solid #fff;
}

/* Mobile: trochę mniejsze i przewijane poziomo */
@media (max-width: 680px) {
  .home-online__head .h,
  .home-online__head h2 { font-size: .98rem; }
  .see-all--sm { font-size: .88rem; }
  .online-rail { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; }
  .online-rail::-webkit-scrollbar { display: none; }
  .online-chip--lg { width: 56px; height: 56px; }
}

/* ——— HERO ——— */
.hero{
  margin: 8px 0 16px;
  background: radial-gradient(1200px 300px at 20% -20%, #ffffff 0%, transparent 60%), radial-gradient(1000px 260px at 100% 0%, #f7fafc 0%, transparent 60%);
  border: 1px solid #eef2f7; border-radius: 16px; padding: 22px 18px;
}
.hero__content{ max-width: 900px; }
.hero h1{ font-size: 1.55rem; line-height: 1.2; margin: 0 0 8px; }
.hero p{ margin: 0 0 14px; color: #4b5563; }
.hero__cta{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero__link{ color:#6b7280; font-size:.92rem; }
.hero__stats{ display:flex; gap:16px; margin: 14px 0 0; padding:0; list-style:none; }
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{ font-size:1.1rem; }
.hero__stats span{ font-size:.85rem; color:#6b7280; }

/* ——— Buttons ——— */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; padding:10px 14px; font-weight:600; text-decoration:none; border:1px solid transparent;
}
.btn-primary{ background:#111827; color:#fff; }
.btn-primary:hover{ background:#0b1220; }
.btn-ghost{ background:#fff; color:#111827; border-color:#e5e7eb; }
.btn-ghost:hover{ background:#f9fafb; }

/* ——— Sekcje i siatki ——— */
.section{ margin-top:22px; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.section .h{ font-size:1.05rem; margin:0; }
.muted{ color:#6b7280; font-size:14px; }
.muted--sm{ font-size:.92rem; }

/* ——— Online rail (większe avatary) ——— */
.online-rail{ display:flex; flex-wrap:wrap; gap:12px; }
.online-rail--xl{ gap:14px; }
.online-chip{ position:relative; width:48px; height:48px; border-radius:999px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; background:#f3f4f6; text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.04); transition: transform .15s ease;
}
.online-chip--xl{ width:72px; height:72px; }
.online-chip:hover{ transform: translateY(-1px); }
.online-chip__img{ width:100%; height:100%; object-fit:cover; }
.online-chip__fallback{ font-weight:600; color:#6b7280; font-size:1rem; }
/* zielona kropka w rogu */
.online-chip::after{
  content:""; position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:999px;
  background:#10b981; border:2px solid #fff;
}

/* ——— Grid kart profili ——— */
.grid{ display:grid; gap:12px; }
.grid--cards{ grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
.grid--chips{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }

.card{ background:#f9fafb; border:1px solid #e5e7eb; border-radius:14px; }
.card--profile{ padding:0; overflow:hidden; text-decoration:none; color:inherit; }
.card--profile .card__media{ aspect-ratio: 4 / 3; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.card--profile .card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card--profile .card__fallback{ font-weight:700; font-size:1.6rem; color:#6b7280; }
.card--profile .card__body{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; }
.badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:.82rem; line-height:1; }
.badge--soft{ background:#f3f4f6; color:#374151; }

/* ——— Chips (nowi dołączający) ——— */
.chip{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; }
.chip:hover{ background:#f9fafb; }
.chip__img{ width:26px; height:26px; border-radius:999px; object-fit:cover; }
.chip__fallback{ width:26px; height:26px; border-radius:999px; background:#eef2f7; display:inline-flex; align-items:center; justify-content:center; font-weight:600; color:#64748b; }

/* ——— How it works ——— */
.how{ margin-top:22px; border:1px solid #eef2f7; border-radius:14px; padding:14px; background:#fff; }
.how .h{ margin:0 0 6px; font-size:1.05rem; }
.steps{ margin:8px 0 0; padding-left:18px; color:#374151; }
.steps li + li{ margin-top:4px; }

/* ——— Ads ——— */
.ad{ margin: 16px 0; }
.ad--leader{ }
.ad--box{ display:flex; justify-content:center; }

/* ——— Mobile ——— */
@media (max-width: 680px){
  .hero{ border-radius:12px; padding:18px 14px; }
  .hero h1{ font-size:1.35rem; }
  .hero__stats{ gap:12px; }
  .online-rail{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; scrollbar-width:none; }
  .online-rail::-webkit-scrollbar{ display:none; }
  .grid--cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ——— PROFILE HERO ——— */
.profile-hero .p-hero__grid{
  display:grid; grid-template-columns: 180px 1fr; gap:16px; align-items:center;
}
.p-h{ font-size:1.35rem; line-height:1.2; margin:0; }
.p-name{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.p-stats{ list-style:none; padding:0; margin:8px 0 12px; display:flex; gap:16px; flex-wrap:wrap; }
.p-stats li{ display:flex; flex-direction:column; }
.p-stats strong{ font-size:1.05rem; }
.p-stats span{ font-size:.85rem; color:#6b7280; }
.p-share{ display:flex; gap:8px; align-items:center; }
.p-share input{ flex:1 1 auto; min-width:0; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; font-size:.95rem; background:#fff; }
.p-body{ margin-top:14px; }
.p-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.p-replies{ margin-top:12px; }

/* ——— AVATAR & TOOLS (migracja z inline) ——— */
.avatar-wrap{ display:flex; flex-direction:column; align-items:center; margin:6px 0; position:relative; }
.avatar-box{ width:160px; height:160px; border-radius:999px; overflow:hidden; position:relative; background:#f0f0f0;
  display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:600; color:#666; text-transform:uppercase;
}
.avatar-box img{ display:block; width:100%; height:100%; object-fit:cover; }
.avatar-tools{ display:flex; gap:8px; margin-top:8px; opacity:0; transition:opacity .15s; }
.avatar-wrap:hover .avatar-tools{ opacity:1; }
@media (hover:none){ .avatar-tools{ opacity:1 } }
.avatar-btn{ appearance:none; border:0; background:#fff; cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; border-bottom:2px solid #a1a7b3; }
.avatar-btn:hover{ background:#e6e6e6; }
.avatar-btn svg{ width:18px; height:18px; opacity:.85; }

/* ——— BIO (migracja z inline) ——— */
.bio-wrap{ margin:8px 0 0; }
.bio-row{ display:flex; align-items:center; gap:10px; }
.bio-icon{ width:18px; height:18px; opacity:.7; flex:0 0 18px; }
.bio-text{ min-height:22px; line-height:1.55; word-wrap:break-word; }
.bio-placeholder{ color:#888; }
.bio-tools{ margin-left:auto; display:flex; gap:8px; opacity:0; transition:opacity .15s; }
.bio-row:hover .bio-tools{ opacity:1; }
@media (hover:none){ .bio-tools{ opacity:1 } }
.bio-btn{ appearance:none; border:0; background:transparent; cursor:pointer; padding:4px; border-radius:8px; }
.bio-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }
.bio-btn svg{ width:18px; height:18px; opacity:.85; }
.bio-editor{ margin:8px 0 0; display:block; }
.bio-editor textarea{ width:100%; max-width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #ddd; border-radius:10px; line-height:1.55; min-height:88px; }
.bio-counter{ font-size:12px; color:#888; margin-top:6px; text-align:right; }
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; padding:8px 12px; background:#111; color:#fff; border-radius:10px; z-index:9999; display:none; }
.toast.show{ display:block; }

/* ——— AKTYWNOŚĆ (lista) ——— */
.activity-list{ display:flex; flex-direction:column; gap:8px; }
.activity-item{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.activity-item:hover{ background:#f9fafb; }
.activity-dot{ width:6px; height:6px; border-radius:999px; background:#10b981; flex:0 0 auto; }
.activity-label{ font-weight:600; }
.activity-time{ margin-left:auto; color:#6b7280; font-size:.9rem; }

/* ——— CHIPY „podobne profile” ——— */
.grid{ display:grid; gap:12px; }
.grid--chips{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
.chip{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; }
.chip:hover{ background:#f9fafb; }
.chip__img{ width:26px; height:26px; border-radius:999px; object-fit:cover; }
.chip__fallback{ width:26px; height:26px; border-radius:999px; background:#eef2f7; display:inline-flex; align-items:center; justify-content:center; font-weight:600; color:#64748b; }

/* ——— Mobile ——— */
@media (max-width: 800px){
  .profile-hero .p-hero__grid{ grid-template-columns: 1fr; }
  .p-columns{ grid-template-columns: 1fr; }
  .avatar-box{ width:140px; height:140px; }
  .p-h{ font-size:1.25rem; }
}

/* ——— Profil: kompakt hero ——— */
.profile-hero--compact .p-hero__grid{
  display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:center;
}
.p-h--compact{ font-size:1.25rem; margin:0; }
.p-stats--tight{ margin:6px 0 8px; gap:12px; }
.p-share--tight input{ padding:6px 10px; font-size:.92rem; }
.btn--xs{ padding:6px 10px; font-size:.9rem; border-radius:8px; }

/* avatar mniejszy w hero */
.avatar-box--sm{ width:120px; height:120px; }

/* ——— Bio w hero, minimalne marginesy ——— */
.p-bio{ margin-top:8px; }
.h--xs{ font-size:.95rem; margin:0 0 6px; }
.bio-row--tight{ gap:8px; }
.bio-tools--tight .bio-btn{ padding:2px; }
.bio-text{ font-size:.95rem; }

/* ——— Karta „Napisz do mnie” bardziej zwarta ——— */
.p-sendcard{ padding-top:10px; padding-bottom:10px; }
.p-send--tight textarea{ min-height:84px; }
.p-replies{ margin-top:10px; }

/* Mobile */
@media (max-width: 800px){
  .profile-hero--compact .p-hero__grid{ grid-template-columns: 1fr; gap:10px; }
  .avatar-box--sm{ width:110px; height:110px; }
  .p-h--compact{ font-size:1.18rem; }
}

/* =============== PROFILE – LAYOUT UPGRADE =============== */

/* Desktop: klarowny układ prawej kolumny (name/share, stats, bio) */
.profile-hero--compact .p-hero__right{
  display: grid;
  grid-template-areas:
    "name  share"
    "stats share"
    "bio   bio";
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
}
.p-name{ grid-area: name; display:flex; align-items:center; gap:10px; }
.p-share--tight{ grid-area: share; justify-self: end; display:flex; gap:8px; align-items:center; }
.p-stats--tight{ grid-area: stats; margin: 2px 0 4px; }
.p-bio{ grid-area: bio; }

/* Desktop: „pille” dla statystyk */
.p-stats--tight{
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px 12px;
  align-items: stretch;
}
.p-stats--tight li{
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  min-width: 120px;
}
.p-stats--tight li strong{ display:block; font-size:1.05rem; line-height:1.1; }
.p-stats--tight li span{ display:block; font-size:.85rem; color:#6b7280; }

/* Presence – subtelny wygląd */
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; flex:0 0 auto; }
.presence .presence-text{ line-height:1; }

/* Avatar kolumna – lekkie wyrównanie */
.profile-hero--compact .p-hero__grid{
  grid-template-columns: 150px 1fr;  /* było 140px → odrobinę więcej oddechu */
}

/* Mobile: wszystko na środku + status POD nickiem */
@media (max-width: 800px){
  .profile-hero--compact .p-hero__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* p-hero__right jako kolumna, wszystko center */
  .profile-hero--compact .p-hero__right{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  /* Nick + presence jeden pod drugim */
  .p-name{
    width: 100%;
    display:flex;
    flex-direction: column;   /* <— status pod nickiem */
    align-items: center;
    gap: 4px;
  }
  .p-h--compact{
    font-size: 1.22rem;
  }
  .presence{
    justify-content: center;
  }

  /* Statystyki wyśrodkowane */
  .p-stats--tight{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-items: center;
    text-align: center;
  }
  .p-stats--tight li{
    min-width: 0;
    padding: 8px 10px;
  }

  /* Share na pełną szerokość i na środku */
  .p-share--tight{
    width: 100%;
    justify-content: center;
  }
  .p-share--tight input{
    width: 100%;
    text-align: center;
  }

  /* Bio – węższe marginesy, center */
  .p-bio{
    width: 100%;
  }
  .bio-row--tight{ justify-content: center; }
}

/* Małe dopieszczanie odstępów i typografii na desktopie */
.p-h--compact{ letter-spacing: .1px; }
.p-share--tight input{ padding: 7px 10px; }

/* Opcjonalnie: delikatny separator pod p-name (desktop) */
@media (min-width: 801px){
  .p-name{
    position: relative;
    padding-bottom: 4px;
  }
  .p-name::after{
    content:"";
    position:absolute; left:0; bottom:-4px; width: 56px; height:1px;
    background: #eef2f7;
  }
}

/* PROIL: bez statystyk — przejrzystszy grid */

/* Desktop: prawa kolumna = nazwa/share w pierwszym wierszu, potem bio */
.profile-hero--compact .p-hero__right{
  display: grid;
  grid-template-areas:
    "name  share"
    "bio   bio";
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
}
.p-name{ grid-area: name; display:flex; align-items:center; gap:10px; }
.p-share--tight{ grid-area: share; justify-self: end; display:flex; gap:8px; align-items:center; }
.p-bio{ grid-area: bio; }

/* Avatar kolumna */
.profile-hero--compact .p-hero__grid{
  display:grid;
  grid-template-columns: 150px 1fr; /* lekki oddech */
  gap:12px;
  align-items:center;
}

/* Mobile: centrowanie, status pod nickiem, bio na środku */
@media (max-width: 800px){
  .profile-hero--compact .p-hero__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .profile-hero--compact .p-hero__right{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .p-name{
    width: 100%;
    display:flex;
    flex-direction: column; /* status pod nickiem */
    align-items: center;
    gap: 4px;
  }
  .p-share--tight{
    width: 100%;
    justify-content: center;
  }
  .p-share--tight input{
    width: 100%;
    text-align: center;
  }
}

/* Drobne dopieszczenia */
.p-h--compact{ font-size:1.22rem; letter-spacing:.1px; margin:0; }
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; flex:0 0 auto; }
.avatar-box--sm{ width:120px; height:120px; }

/* === Link do profilu w pełnym wierszu + ikonka kopiowania === */
.profile-hero--compact .p-hero__right{
  display: grid;
  grid-template-areas:
    "name  name"
    "share share"
    "bio   bio";
  grid-template-columns: 1fr;
  gap: 10px 16px;
  align-items: center;
}
.p-name{ grid-area: name; display:flex; align-items:center; gap:10px; }
.p-share--full{ grid-area: share; display:flex; align-items:center; gap:8px; width:100%; }
.p-share--full input{
  flex:1 1 auto; min-width:0;
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  font-size:.95rem;
}
.icon-btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
.icon-btn svg{ width:18px; height:18px; opacity:.9; }
.icon-btn:hover{ background:#f9fafb; transform: translateY(-1px); }
.icon-btn.is-copied{ outline:2px solid #10b98133; }

/* === Bio editor: minimalna wysokość, desktop i mobile === */
.bio-editor textarea{
  min-height: 56px;  /* było 88px */
  height: 56px;      /* startowo bardzo nisko */
  resize: vertical;  /* można ręcznie powiększyć */
  max-height: 140px; /* górny limit */
  line-height: 1.5;
}
@media (max-width:800px){
  .bio-editor textarea{
    min-height: 48px;
    height: 48px;
    max-height: 120px;
  }
}

/* Mobile: center wszystko (status pod nickiem) */
@media (max-width: 800px){
  .profile-hero--compact .p-hero__right{
    text-align:center;
  }
  .p-name{
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
  }
  .p-share--full input{
    text-align: center;
  }
}

/* Avatar kolumna – zostawiamy kompakt */
.profile-hero--compact .p-hero__grid{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  align-items:center;
}
@media (max-width:800px){
  .profile-hero--compact .p-hero__grid{
    grid-template-columns: 1fr;
  }
}

/* Presence subtelny */
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; }

/* === GRID: nick + status pod avatarem (desktop), link + bio po prawej === */
.profile-hero--compact .p-hero__grid{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:14px;
  align-items:center;
}
.p-hero__left{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.p-name--under{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.p-h--compact{ font-size:1.22rem; margin:0; letter-spacing:.1px; }

/* Presence pod nickiem, subtelnie */
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; background:#10b981; }

/* Avatar kompakt */
.avatar-box--sm{ width:120px; height:120px; }

/* === Pełny link + widoczna ikonka kopiowania === */
.p-share--full{
  grid-area: share;
  width:100%;
  display:flex; align-items:center; gap:8px;
}
.p-hero__right{ display:grid; grid-template-areas: "share" "bio"; gap:10px; }
.p-share--full input{
  flex:1 1 auto; min-width:0;
  padding:9px 12px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  font-size:.96rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:#111827;
}
.icon-btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.icon-btn svg{ width:20px; height:20px; opacity:.95; }
.icon-btn:hover{ background:#f9fafb; transform: translateY(-1px); border-color:#e3e6ea; }
.icon-btn.is-copied{ outline:2px solid #10b98133; }

/* === Bio editor: bardzo niska wysokość, ale można rozciągnąć === */
.bio-editor textarea{
  min-height: 48px;
  height: 48px;
  resize: vertical;
  max-height: 120px;
  line-height: 1.45;
}
@media (max-width:800px){
  .profile-hero--compact .p-hero__grid{ grid-template-columns: 1fr; }
  .p-hero__right{ grid-template-areas: "share" "bio"; }
  .p-share--full input{ text-align:center; }
  .bio-editor textarea{ min-height: 44px; height: 44px; max-height: 110px; }
}

/* === GRID: nick + status pod avatarem (desktop), link + bio po prawej === */
.profile-hero--compact .p-hero__grid{
  display:grid;
  grid-template-columns: 200px 1fr; /* odrobinkę szerzej dla schludności */
  gap:16px;
  align-items:center;
}
.p-hero__left{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.p-name--under{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.p-h--compact{ font-size:1.22rem; margin:0; letter-spacing:.1px; }

/* Presence */
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; background:#10b981; }

/* Avatar kompakt */
.avatar-box--sm{ width:128px; height:128px; }

/* === Pełny link + etykieta + widoczna ikonka kopiowania === */
.p-hero__right{ display:grid; grid-template-areas: "share" "bio"; gap:12px; }
.p-share--full{ grid-area: share; display:flex; flex-direction:column; gap:6px; width:100%; }
.p-label{ font-size:.8rem; color:#6b7280; letter-spacing:.2px; }
.p-share__row{ display:flex; align-items:center; gap:10px; width:100%; }
.p-share__row input{
  flex:1 1 auto; min-width:0;
  padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  font-size:.96rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:#111827;
}
.icon-btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  width:40px; height:40px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.icon-btn svg{ width:20px; height:20px; opacity:.95; }
.icon-btn:hover{ background:#f9fafb; transform: translateY(-1px); border-color:#e3e6ea; }
.icon-btn.is-copied{ box-shadow: 0 0 0 3px #10b98133; }

/* Bio w hero */
.p-bio{ grid-area: bio; }
.h--xs{ font-size:.95rem; margin:0 0 6px; }
.bio-row--tight{ gap:8px; }
.bio-text{ font-size:.95rem; }
.bio-tools--tight .bio-btn{ padding:2px; }

/* Bio editor: bardzo niska wysokość, ale można rozciągnąć */
.bio-editor textarea{
  min-height: 48px;
  height: 48px;
  resize: vertical;
  max-height: 120px;
  line-height: 1.45;
}

/* A11y: screen-reader-only (dla feedback kopiowania) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mobile */
@media (max-width:800px){
  .profile-hero--compact .p-hero__grid{ grid-template-columns: 1fr; gap:12px; }
  .p-hero__right{ grid-template-areas: "share" "bio"; }
  .p-share__row input{ text-align:center; }
  .avatar-box--sm{ width:120px; height:120px; }
}


/* HERO: narożny licznik */
.profile-hero{ position: relative; }
.p-meta-corner{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:999px;
  padding:6px 10px; box-shadow:0 1px 0 rgba(0,0,0,.03);
  font-weight:600; color:#1f2937;
}
.p-meta-corner svg{ width:16px; height:16px; opacity:.9; }
.p-meta-num{ font-variant-numeric: tabular-nums; }

/* Grid + lewa/prawa kolumna */
.profile-hero--compact .p-hero__grid{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:16px;
  align-items:center;
}
.p-hero__left{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.p-name--under{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.p-h--compact{ font-size:1.22rem; margin:0; letter-spacing:.1px; }

/* Presence pod nickiem */
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; background:#10b981; }

/* Avatar kompakt */
.avatar-box--sm{ width:128px; height:128px; }

/* Avatar tools – ZAWSZE widoczne (dla ownera) */
.avatar-tools{ display:flex; gap:8px; margin-top:8px; opacity:1 !important; }
.avatar-wrap:hover .avatar-tools{ opacity:1; }
.avatar-btn{
  appearance:none; border:0; background:#fff; cursor:pointer;
  padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; border-bottom: 2px solid #a1a7b3;
}
.avatar-btn:hover{ background:#e9e9e9; }
.avatar-btn svg{ width:18px; height:18px; opacity:.9; }

/* Bio w prawej kolumnie */
.p-hero__right{ display:block; }
.p-bio{ }
.h--xs{ font-size:.95rem; margin:0 0 6px; }
.bio-row--tight{ gap:8px; }
.bio-text{ font-size:.95rem; }
.bio-tools--tight .bio-btn{ padding:2px; }

/* Bio editor – bardzo niska wysokość, można rozciągnąć */
.bio-editor textarea{
  min-height: 48px;
  height: 48px;
  resize: vertical;
  max-height: 120px;
  line-height: 1.45;
}

/* Mobile */
@media (max-width:800px){
  .profile-hero--compact .p-hero__grid{ grid-template-columns: 1fr; gap:12px; }
  .p-meta-corner{ top:8px; right:8px; }
  .avatar-box--sm{ width:120px; height:120px; }
}

/* Sekcja profilu – layout bazowy */
.profile-hero{ position: relative; }
.profile-hero--compact .p-hero__grid{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:16px;
  align-items:start;               /* <— prawa kolumna od samej góry */
}

/* Lewa kolumna */
.p-hero__left{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.p-name--under{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.p-h--compact{ font-size:1.22rem; margin:0; letter-spacing:.1px; }

/* Presence */
.presence{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:.9rem; }
.presence .presence-dot{ width:8px; height:8px; border-radius:999px; background:#10b981; }

/* Avatar */
.avatar-box--sm{ width:128px; height:128px; }
.avatar-tools{ display:flex; gap:8px; margin-top:8px; opacity:1 !important; }
.avatar-btn{
  appearance:none; border:0; background:#fff; cursor:pointer;
  padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; border-bottom: 2px solid #a1a7b3;
}
.avatar-btn:hover{ background:#e9e9e9; }
.avatar-btn svg{ width:18px; height:18px; opacity:.9; }

/* Prawa kolumna – O mnie od samej góry */
.p-hero__right{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.p-bio{ width:100%; }
.h--xs{ font-size:.95rem; margin:0 0 6px; }
.bio-row--tight{ gap:8px; }
.bio-text{ font-size:.95rem; }
.bio-tools--tight .bio-btn{ padding:2px; }

/* Bio editor – bardzo niska wysokość, można rozciągnąć */
.bio-editor textarea{
  min-height: 48px;
  height: 48px;
  resize: vertical;
  max-height: 120px;
  line-height: 1.45;
}

/* Licznik: desktop w prawym górnym rogu; mobile pod statusem */
.p-meta-corner{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:999px;
  padding:6px 10px; box-shadow:0 1px 0 rgba(0,0,0,.03);
  font-weight:600; color:#1f2937;
}
/* Desktop: pozycja narożna */
@media (min-width:801px){
  .p-meta-corner{
    position:absolute; top:10px; right:10px;
  }
}
/* Mobile: pod statusem (bez absolute) */
@media (max-width:800px){
  .p-meta-corner{
    position: static;
    margin-top: 4px;
  }
  .profile-hero--compact .p-hero__grid{
    grid-template-columns: 1fr;
    gap:12px;
  }
  .avatar-box--sm{ width:120px; height:120px; }
}

/* === Badge w rozmowach przy prawej krawędzi (override) === */
.thread-item .thread-title{
  display: flex;             /* upewniamy się, że to flex */
  align-items: center;
  gap: 10px;
  width: 100%;               /* nagłówek ma wypełniać cały wiersz */
  min-width: 0;              /* pozwala na ellipsis dla nicka */
}
.thread-item .thread-title > .badge{
  margin-left: auto;         /* pchnij badge do prawej */
  flex: 0 0 auto;            /* nie zwijaj badge */
  order: 99;                 /* nawet jeśli badge nie jest ostatni w DOM */
}

/* Tekst (nick) może się kurczyć, by zrobić miejsce dla badge */
.thread-item .thread-title strong{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Gorące profile: ujednolicone chipy + odznaka "🔥 rozmów" --- */

/* W hot rail NIE pokazujemy zielonej kropki online z bazowej .online-chip::after */
.home-hot .online-chip::after { display: none; }

/* Pomarańczowa odznaka w prawym górnym rogu chipu */
.heat-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-inline-size: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f97316;  /* orange-500 */
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* Na bardzo wąskich ekranach odznaka ciut mniejsza */
@media (max-width: 420px){
  .heat-badge{
    top: -5px; right: -5px;
    min-inline-size: 20px; height: 20px; line-height: 20px;
    font-size: 10px;
  }
}

/* --- Gorące profile: kompaktowe karty (spójne z online) --- */
.hot-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
@media (max-width:680px){
  .hot-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.hot-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color:inherit;
}
.hot-card:hover{
  transform: translateY(-1px);
  border-color:#e3e6ea;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}

.hot-card__avatar{
  width:72px; height:72px; border-radius:999px; overflow:hidden;
  background:#f3f4f6; display:flex; align-items:center; justify-content:center;
}
.hot-card__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.hot-card__fallback{ font-weight:700; color:#6b7280; font-size:1.1rem; }

.hot-card__name{
  font-size:.95rem; line-height:1.2; text-align:center; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* miękka pastylka „🔥 24 h: X” */
.badge--heat{
  background:#fff7ed;           /* pomarańcz bardzo soft */
  color:#9a3412;                 /* orange-800 */
  border:1px solid #fed7aa;      /* orange-200 */
  border-radius:999px;
  padding:4px 8px;
  font-size:.78rem;
  line-height:1;
  font-weight:700;
}

/* ciut gęściej na bardzo małych ekranach */
@media (max-width:420px){
  .hot-card__avatar{ width:64px; height:64px; }
  .badge--heat{ font-size:.74rem; padding:3px 7px; }
}

/* Kropka przy statusie na profilu: tylko dla online */
.presence .presence-dot{ display: none; }
.presence--online .presence-dot{ display: inline-block; }

/* === PROFILE / MOBILE: ODEPNIJ #sendForm (wraca do normalnego flow) === */
@media (max-width: 900px){
  /* 1) formularz nie jest przypięty */
  body:not(.chat-page) #sendForm{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    max-width: none !important;
    margin: 0 !important;
    /* zachowujemy dotychczasowe wypełnienia karty, więc bez własnego tła/borderu */
    background: transparent !important;
    border-top: 0 !important;
    padding-inline: 0 !important; /* szerokością zarządza karta */
  }

  /* 2) wyłącz „fixed on focus” z wcześniejszych reguł */
  .wrap:has(#sendForm :is(textarea:focus, input:focus)) #sendForm{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  /* 3) usuń dolny bufor dodawany pod dokowany pasek */
  .wrap:has(#sendForm){
    padding-bottom: 0 !important;
  }

  /* 4) jeśli używasz skrzynki wiadomości nad formularzem na profilu — też bez bufora/limitów */
  .wrap:has(#sendForm :is(textarea:focus, input:focus)) .profile-chat-box{
    padding-bottom: 0 !important;
    max-height: none !important;
  }
}

/* === /wiadomosci (chat-page) — composer zawsze widoczny na mobile === */
@media (max-width: 900px){
  html.chat-page,
  body.chat-page{
    height: 100dvh;           /* realny viewport, nie chowa się pod klawiaturą */
    overflow: hidden;
  }
  .wrap.chat-page{
    height: 100%;
    overflow: hidden;
  }
  .chat-shell{
    height: 100%;
  }
  .chat-panel{
    grid-template-rows: auto 1fr auto; /* header / messages / composer */
    min-height: 0;
  }
  .chat-messages{
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior-y: contain;
    /* zostaw bufor na dole, gdy nie ma focusu */
    scroll-padding-bottom: calc(var(--composer-h) + 24px);
  }

  /* Composer przypięty do dołu panelu (bez focusu) */
  .chat-composer{
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  }

  /* Wysokość pola = wysokość przycisku (schludnie) */
  .chat-composer textarea,
  .chat-composer input[type="text"]{
    height: var(--composer-h);
    min-height: var(--composer-h);
    max-height: var(--composer-h);
    resize: none;
    line-height: 1.2;
    font-size: 16px; /* bez zoomu na iOS */
  }
  .chat-composer .btn,
  .chat-composer button[type="submit"]{
    height: var(--composer-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 14px;
  }

  /* Gdy fokus w polu — unieś composer nad klawiaturę */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-composer{
    position: fixed;
    left: 0; right: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: var(--wrap-max, 980px);
    padding-inline: 12px;
    z-index: 9;
  }
  /* …i dołóż miejsce, żeby ostatnie wiadomości nie wpadały pod overlay */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-messages{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom));
  }
}

/* === /wiadomosci — odporne na klawiaturę (mobile) === */
@media (max-width: 900px){
  /* Stabilne jednostki viewportu (iOS/Android) */
  @supports (height: 100svh){
    html.chat-page, body.chat-page{ height: 100svh; overflow: hidden; }
  }
  @supports not (height: 100svh){
    html.chat-page, body.chat-page{ height: 100dvh; overflow: hidden; }
  }

  .wrap.chat-page{ height: 100%; overflow: hidden; }
  .chat-shell{ height: 100%; }
  .chat-panel{ grid-template-rows: auto 1fr auto; min-height: 0; }

  /* Lista wiadomości – zapas na dół, bez „przycinania” */
  .chat-messages{
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: calc(var(--composer-h) + 24px);
  }

  /* Domyślnie przyklejony do dołu panelu */
  .chat-composer{
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  }

  /* Równa wysokość pola i przycisku */
  .chat-composer textarea,
  .chat-composer input[type="text"]{
    height: var(--composer-h);
    min-height: var(--composer-h);
    max-height: var(--composer-h);
    resize: none;
    line-height: 1.2;
    font-size: 16px; /* brak auto-zooma iOS */
  }
  .chat-composer .btn,
  .chat-composer button[type="submit"]{
    height: var(--composer-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 14px;
  }

  /* ✅ Gdy klawiatura jest otwarta (klasa z JS) – unieś composer nad nią */
  .kb-open .chat-composer{
    position: fixed;
    left: 0; right: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: var(--wrap-max, 980px);
    padding-inline: 12px;
    z-index: 9;
  }
  .kb-open .chat-messages{
    /* dodatkowy zapas, aby ostatnia wiadomość nie wpadała pod composer */
    padding-bottom: calc(var(--composer-h) + 120px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--composer-h) + 120px + env(safe-area-inset-bottom));
  }
}

/* === /wiadomosci: mała przerwa między kompozerem a klawiaturą === */
@media (max-width: 900px){
  :root{ --kb-gap: 8px; } /* zmień na 6–12px wg gustu */

  /* gdy JS doda .kb-open (focus w polu) – unieś kompozer o kilka px */
  .kb-open .chat-composer{
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--kb-gap));
    border-radius: 12px;                 /* opcjonalnie: wygląda jak „pływający” */
    box-shadow: 0 6px 28px rgba(0,0,0,.08); /* delikatny cień, można usunąć */
  }

  /* dołóż taki sam bufor w liście wiadomości, by nic nie wpadało pod kompozer */
  .kb-open .chat-messages{
    padding-bottom: calc(var(--composer-h) + 96px + var(--kb-gap) + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--composer-h) + 96px + var(--kb-gap) + env(safe-area-inset-bottom));
  }
}

/* === /wiadomosci — mała przerwa nad klawiaturą, gdy pole ma fokus === */
@media (max-width: 900px){
  .kb-open .chat-composer{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + 8px); /* ← oddech */
    margin: 0 auto;
    max-width: var(--wrap-max, 980px);
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    z-index: 9;
    border-radius: 12px;               /* opcjonalnie ładniejszy „pływający” pasek */
    box-shadow: 0 6px 28px rgba(0,0,0,.08);
  }
  .kb-open .chat-messages{
    padding-bottom: calc(var(--composer-h) + 120px + 8px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--composer-h) + 120px + 8px + env(safe-area-inset-bottom));
  }
}

/* ==== PROFILE: ikonka licznika w prawym górnym rogu (mobile + desktop) ==== */
.profile-hero{ position: relative; }

/* Zawsze narożnie — nadpisanie dawnych wariantów */
.profile-hero .p-meta-corner{
  position: absolute !important;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* Przycisk-ikonka */
.p-meta-btn{
  inline-size: 36px;
  block-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  color: #1f2937;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.p-meta-btn svg{ width: 20px; height: 20px; opacity: .9; }
.p-meta-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--acc, #0ea5b5) 70%, transparent);
  outline-offset: 2px;
}

/* Czarny badge z białą cyfrą */
.p-meta-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background:#000;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
/* delikatne skalowanie przy 3+ cyfrach */
.p-meta-badge[data-len="3"]{ font-size:10px; }
.p-meta-badge[data-len="4"]{ font-size:9px; }

/* Popover z napisem — pokazuje się dopiero po kliknięciu */
.p-meta-popover{
  position: absolute;
  top: 44px;
  right: 0;
  background:#fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .92rem;
  color: #374151;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  white-space: nowrap;
}
/* Strzałka */
.p-meta-popover::before{
  content:"";
  position:absolute;
  top:-6px; right:12px;
  border:6px solid transparent;
  border-bottom-color:#fff;
}
.p-meta-popover::after{
  content:"";
  position:absolute;
  top:-7px; right:12px;
  border:7px solid transparent;
  border-bottom-color: var(--border, #e5e7eb);
}

.msg--me {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.msg--me .msg-head {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}

.msg--them {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.msg--them .msg-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* === FIX v2: stabilna pozycja i szerokość composera, bez "uciekania" === */
:root{
  --wrap-max: 980px;   /* tak jak .wrap max-width */
  --wrap-pad: 24px;    /* tak jak .wrap padding */
}

/* Ujednolicenie geometrii wrapa (jeśli gdzieś indziej jest inaczej) */
.wrap,
.wrap.chat-page{
  max-width: var(--wrap-max);
  padding: var(--wrap-pad);
}

/* Bazowo: box-sizing żeby padding nie "rozpychał" */
.chat-composer{ box-sizing: border-box; }

/* ——— MOBILE ——— */
@media (max-width: 900px){
  /* Tryb "anti-keyboard": fixed, ale BEZ transform – centrowany margin:auto */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-composer{
    position: fixed;
    /* wycentruj względem viewportu */
    left: 0 !important;
    right: 0 !important;
    margin-left: auto;
    margin-right: auto;

    /* szerokość = dokładnie szerokość treści .wrap (bez efektu rozszerzania) */
    width: calc(min(100vw, var(--wrap-max)) - (var(--wrap-pad) * 2));
    max-width: calc(var(--wrap-max) - (var(--wrap-pad) * 2));

    /* padding jak w środku wrapa (zachowany wygląd 1:1) */
    padding-inline: var(--wrap-pad);

    /* z-index i spód – bez przesunięć poziomych */
    bottom: env(safe-area-inset-bottom, 0);
    z-index: 9;

    /* brak transformów, brak lewego/pr prawego przycięcia */
    transform: none !important;
  }

  /* Bufor na listę wiadomości (żeby nic nie wpadło pod composer) */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-messages{
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0));
  }
}

/* ===================================================================
   [PATCH 2025-10-06] Chat composer: stable width + keyboard gap (mobile)
   - Keeps composer the same width as .wrap when focused
   - Adds a subtle bottom gap so it's not glued to the on-screen keyboard
   - Ensures input and the send button have equal height
   =================================================================== */

:root{
  --wrap-max: 980px;
  --wrap-pad: 24px;
  --composer-h: 48px; /* equal height for textarea & send button on mobile */
  --kb-gap: 8px;      /* tiny gap above the keyboard */
}

/* Equal heights for the field and the button (works desktop & mobile) */
.chat-composer textarea,
.chat-composer input[type="text"]{
  height: var(--composer-h);
  min-height: var(--composer-h);
  max-height: var(--composer-h);
  padding-block: 10px;
  resize: none;
  line-height: 1.2;
}
.chat-composer .btn,
.chat-composer button[type="submit"]{
  height: var(--composer-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
}

/* Mobile behaviour: do not expand to full page width; add bottom gap when typing */
@media (max-width: 900px){

  /* Prevent iOS zoom and give consistent caret positioning */
  .chat-composer textarea{ font-size: 16px; }

  /* Focused state: compositor is fixed and centered to the width of .wrap */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-composer{
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--kb-gap));
    margin: 0 auto;
    width: calc(min(100vw, var(--wrap-max)) - (var(--wrap-pad) * 2));
    max-width: calc(var(--wrap-max) - (var(--wrap-pad) * 2));
    padding-inline: var(--wrap-pad);
    z-index: 9;
    box-sizing: border-box;
  }

  /* When the keyboard is open via JS flag (.kb-open), keep the same layout */
  .kb-open .chat-composer{
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--kb-gap));
    margin: 0 auto;
    width: calc(min(100vw, var(--wrap-max)) - (var(--wrap-pad) * 2));
    max-width: calc(var(--wrap-max) - (var(--wrap-pad) * 2));
    padding-inline: var(--wrap-pad);
    z-index: 9;
    box-sizing: border-box;
  }

  /* Ensure messages do not slip under the fixed composer */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-messages,
  .kb-open .chat-messages{
    padding-bottom: calc(var(--composer-h) + 120px + var(--kb-gap) + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--composer-h) + 120px + var(--kb-gap) + env(safe-area-inset-bottom));
  }
}
/* ============================= END PATCH ============================= */

/* ===================================================================
   [PATCH 2025-10-06 B] Prevent jumping button:
   - Composer is fixed ALWAYS on mobile (no switch on focus)
   - No transitions on geometry
   - Reserve space in .chat-messages permanently
   - Only .kb-open raises by --kb-gap (tiny visual offset)
   =================================================================== */
@media (max-width: 900px){

  /* Base fixed composer on mobile – no switching between static/fixed */
  .chat-composer{
    position: fixed !important;
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0);
    margin: 0 auto;
    width: calc(min(100vw, var(--wrap-max)) - (var(--wrap-pad) * 2));
    max-width: calc(var(--wrap-max) - (var(--wrap-pad) * 2));
    padding-inline: var(--wrap-pad);
    z-index: 9;
    box-sizing: border-box;
    transition: none !important;
    will-change: auto;
    transform: translateZ(0); /* avoid subpixel repaint issues */
  }

  /* When keyboard is open – add only a tiny visual gap */
  .kb-open .chat-composer{
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--kb-gap));
  }

  /* Reserve consistent space so the list doesn't jump */
  .chat-messages{
    padding-bottom: calc(var(--composer-h) + 120px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--composer-h) + 120px + env(safe-area-inset-bottom));
  }

  /* If you want a bit more room while typing, add a smidge */
  .kb-open .chat-messages{
    padding-bottom: calc(var(--composer-h) + 120px + var(--kb-gap) + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--composer-h) + 120px + var(--kb-gap) + env(safe-area-inset-bottom));
  }

  /* Ensure equal heights remain enforced */
  .chat-composer textarea,
  .chat-composer input[type="text"]{
    height: var(--composer-h);
    min-height: var(--composer-h);
    max-height: var(--composer-h);
  }
  .chat-composer .btn,
  .chat-composer button[type="submit"]{
    height: var(--composer-h);
  }
}
/* ======================= END PATCH B ======================= */

/* === Naprawa: stała wysokość pola tekstowego na desktopie === */
@media (min-width: 901px) {
  .chat-composer textarea {
    height: var(--composer-h) !important;
    min-height: var(--composer-h) !important;
    max-height: var(--composer-h) !important;
    resize: none !important;
  }
}

/* === IME gap — estetyczna przerwa nad klawiaturą (MOBILE) === */
@media (max-width: 900px){
  :root { --ime-gap: 14px; } /* ustaw tu pożądany odstęp (np. 10–18px) */

  /* /wiadomosci — gdy pole jest w focusie */
  .chat-page .wrap:has(.chat-composer:focus-within) .chat-composer{
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--ime-gap)) !important;
  }
  .chat-panel:has(.chat-composer:focus-within) .chat-messages{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom) + var(--ime-gap)) !important;
  }

  /* /profil/<nick> — formularz gościa (#sendForm) */
  .wrap:has(#sendForm :is(textarea:focus, input:focus)) #sendForm{
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--ime-gap)) !important;
  }
  .wrap:has(#sendForm :is(textarea:focus, input:focus)) .profile-chat-box{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom) + var(--ime-gap)) !important;
  }

  /* Fallback: jeśli :has z jakiegoś powodu nie zadziała, użyj flagi .kbd-open z JS */
  html.kbd-open .chat-composer{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--ime-gap)) !important;
    z-index: 9;
  }
  html.kbd-open .chat-messages{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom) + var(--ime-gap)) !important;
  }
  html.kbd-open #sendForm{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(max(0px, env(safe-area-inset-bottom)) + var(--ime-gap)) !important;
    z-index: 10;
  }
  html.kbd-open .profile-chat-box{
    padding-bottom: calc(var(--composer-h) + 96px + env(safe-area-inset-bottom) + var(--ime-gap)) !important;
  }
}
/* === DARK THEME (CSP-safe) === */
html.theme-dark body, html.theme-dark .app-root{
  background-color:#1a1a1e !important;
  color:#e6e7eb !important;
}
html.theme-dark a{ color:#5865f2; }
html.theme-dark .btn, html.theme-dark button{ background:#5865f2; border-color:#5865f2; color:#fff; }
html.theme-dark .card, html.theme-dark .panel{ background:#202024; border-color:#2d2d31; }
html.theme-dark input, html.theme-dark textarea, html.theme-dark select{ background:#1f1f23; color:#f3f4f6; border-color:#323338; }
html.theme-dark .chat-messages{ background:#16171b; }
html.theme-dark .chat-composer{ background:transparent; border-top:1px solid #2a2b31; }
.site-logo{ display:flex; align-items:center; gap:8px; }
.theme-toggle{ inline-size:30px; block-size:30px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; cursor:pointer; margin-top:-10px; }
.theme-toggle svg{ width:22px; height:22px; }


/* ====== DARK THEME OVERRIDES ====== */
html.theme-dark .hero{ background:#202024; border-color:#2d2d31; }
html.theme-dark .card{ background:#202024; border-color:#2d2d31; }
html.theme-dark .chat-messages{ background:#16171b; }
html.theme-dark .chat-composer{ background:transparent; border-top:1px solid #2a2b31; }
html.theme-dark .avatar--fallback{ background:#2a2d39; color:#e6e6e6; }

/* ====== DARK THEME EXTENDED ELEMENTS ====== */
html.theme-dark .hot-card{
  background:#202024;
  border:1px solid #2d2d31;
  color:#e6e7eb;
}
html.theme-dark .chip{
  background:#242429;
  border:1px solid #2d2d31;
  color:#e6e7eb;
}
html.theme-dark .how{
  background:#202024;
  border:1px solid #2d2d31;
  color:#d1d5db;
}

html.theme-dark .steps{
  color:#d1d5db !important;
}
 
html.theme-dark .msg.guest,
html.theme-dark .msg.user{
  background:#2d2d31;
  border:1px solid #3a3a3f;
  color:#e6e7eb;
}
html.theme-dark .msg.owner{
  background:#5865f2;
  border:1px solid #4752d1;
  color:#fff;
}


/* ====== DARK THEME ADDITIONAL FIXES ====== */
html.theme-dark .chat-header{
  background:#1f1f23;
  border-bottom:1px solid #2d2d31;
  color:#e6e7eb;
}

/* === FINAL DARK THEME INLINE FIXES (ID-aware) === */
/* anon toggle created with ID, not class */
html.theme-dark #anonBlockWrap{
  background-color:#202024 !important;
  border:1px solid #2d2d31 !important;
  color:#e6e7eb !important;
}

/* reply body might be class or id — cover both */
html.theme-dark .reply_body,
html.theme-dark #reply_body{
  background-color:#242429 !important;
  border:1px solid #2d2d31 !important;
  color:#d1d5db !important;
}

/* opcjonalne: czytelne linki/przyciski w darku wewnątrz wrappera */
html.theme-dark #anonBlockWrap a,
html.theme-dark #anonBlockWrap button{ color:#e6e7eb !important; }
html.theme-dark #anonBlockWrap .btn{
  background:#5865f2 !important;
  border-color:#4752d1 !important;
  color:#fff !important;
}  
  
/* === DARK THEME INLINE FIX FOR CHAT-EXISTING-CALLOUT (robust) === */
html.theme-dark .chat-existing-callout,
html.theme-dark #chat-existing-callout,
html.theme-dark [class~="chat-existing-callout"]{
  background-color:#202024 !important;
  border:1px solid #2d2d31 !important;
  color:#e6e7eb !important;
  box-shadow:none !important;
}

html.theme-dark .chat-existing-callout strong,
html.theme-dark #chat-existing-callout strong,
html.theme-dark [class~="chat-existing-callout"] strong{
  color:#ffffff !important;
}

html.theme-dark .chat-existing-callout a,
html.theme-dark #chat-existing-callout a,
html.theme-dark [class~="chat-existing-callout"] a{
  background:rgba(88,101,242,0.18) !important;
  border:1px solid rgba(88,101,242,0.35) !important;
  color:#e6eaff !important;
}
html.theme-dark .chat-existing-callout a:hover,
html.theme-dark #chat-existing-callout a:hover,
html.theme-dark [class~="chat-existing-callout"] a:hover{
  background:rgba(88,101,242,0.28) !important;
  color:#ffffff !important;
}

/* === DARK-ONLY MOBILE HOTFIX (safe) === */
@media (max-width: 768px){
  /* Composer – tylko kolory/cień, bez zmiany wymiarów/paddingów */
  html.theme-dark .chat-composer{
    background:#17171a !important;
    border-top:1px solid #2a2b31;
    box-shadow:0 -8px 24px rgba(0,0,0,.35);
  }

  /* Back button – tylko kolory/tło/border, bez zmiany rozmiaru/pozycji */
  html.theme-dark button#chatBack.chat-back{
    color:#e6e7eb;
    background:#202024;
    border-color:#2d2d31;
  }
  html.theme-dark button#chatBack.chat-back:hover{
    background:#242429;
  }

  /* Ikona w przycisku – bez wpływu na layout */
  html.theme-dark button#chatBack.chat-back svg{
    fill: currentColor;
  }
}

/* === LOGO SWITCH light/dark === */
.site-logo img.logo-dark { display: none; }
.site-logo img.logo-light { display: inline-block; }

/* aktywacja ciemnego logo w dark mode */
html.theme-dark .site-logo img.logo-light { display: none; }
html.theme-dark .site-logo img.logo-dark { display: inline-block; }

/* wspólne dopasowanie */
.site-logo img {
  display: block;
  width: 160px;
  height: auto;
}

/* opcjonalne zmniejszenie na mobile */
@media (max-width: 420px) {
  .site-logo img {
    width: 140px;
  }
}

/* === Styl ikony przełącznika motywu (słońce / księżyc) === */

/* Jasny motyw – ikona księżyca */
html:not(.theme-dark) #themeToggle svg {
  color: #374151;   /* kolor ikony księżyca w jasnym motywie */
  stroke: #374151;  /* jeśli używa stroke (np. Heroicons) */
  fill: none;       /* zostaw puste w razie konfliktu */
}

/* Ciemny motyw – ikona słońca */
html.theme-dark #themeToggle svg {
  color: #374151;   /* złoty / żółty odcień */
  stroke: #374151;
  fill: none;
}

/* === Theme toggle: moon vs sun behavior (requested) === */
/* Show/hide icons purely via CSS based on theme to avoid flicker */
html:not(.theme-dark) .theme-toggle [data-icon="moon"]{ display:inline-flex !important; }
html:not(.theme-dark) .theme-toggle [data-icon="sun"]{ display:none !important; }
html.theme-dark .theme-toggle [data-icon="moon"]{ display:none !important; }
html.theme-dark .theme-toggle [data-icon="sun"]{ display:inline-flex !important; }

/* Base button */
.theme-toggle{
  inline-size: 30px;
  block-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #111315;
  cursor: pointer;
  padding: 0;
  margin-left: 0px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease;
}
.theme-toggle svg{ width: 20px; height: 20px; }

/* MOON (light theme): keep button look; on hover only the icon turns white */
html:not(.theme-dark) .theme-toggle{
  color: #111315; /* icon color */
}
html:not(.theme-dark) .theme-toggle:hover{
  /* keep the same button, just emphasize with a subtle bg */
  background: #fff;
}
html:not(.theme-dark) .theme-toggle:hover [data-icon="moon"] svg{
  color: #ffffff; /* icon turns white on hover */
  stroke: currentColor;
}

/* SUN (dark theme): no button by default, icon #7a7a7a; only shows a button-ish hover */
html.theme-dark .theme-toggle{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #7a7a7a; /* icon default color */
}
html.theme-dark .theme-toggle:hover{
  /* show a subtle button only on hover */
  background: rgba(255,255,255,0.06);
  border-color: #2d2d31;
}
html.theme-dark .theme-toggle [data-icon="sun"] svg{
  color: currentColor;
  stroke: currentColor;
}

/* Optional focus ring for accessibility */
.theme-toggle:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Ensure logo swap if both images are present */
.logo-dark{ display: none; }
html.theme-dark .logo-light{ display: none; }
html.theme-dark .logo-dark{ display: block; }

/* izolowany toast tylko dla rejestracji */
#regToastRoot{
  position:fixed; z-index:2147483647;
  top:calc(env(safe-area-inset-top,0px) + 16px); right:16px;
  display:grid; gap:8px; width:min(92vw,520px);
  pointer-events:none;
}
.reg-toast{pointer-events:auto; max-width:520px;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:12px 14px; background:#202024; color:#fff;
  border:1px solid rgba(255,255,255,.08); animation:reg-toast-in .18s ease-out;
}
.reg-toast--error{background:#2d2d31;border-color:#ff6666}
.reg-toast__row{display:flex;align-items:center;gap:8px}
.reg-toast__msg{font-size:13px;opacity:.9}
@keyframes reg-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Typing bubble */
.msg-row.typing-row { opacity:0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.msg-row.typing-row.show { opacity:1; transform: translateY(0); }

.msg.typing .msg-body {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:8px 10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  max-width:min(70vw,520px);
}
:root[data-theme="dark"] .msg.typing .msg-body {
  background:#232327; border-color:rgba(255,255,255,.08); box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.msg.typing .ti-dots { display:inline-flex; gap:4px; align-items:center; }
.msg.typing .ti-dot { width:6px; height:6px; border-radius:50%; background:#9aa1a9; opacity:.35; transform:scale(.8); animation:ti-breathe 1000ms infinite ease-in-out; }
.msg.typing .ti-dot:nth-child(2){ animation-delay:.2s; }
.msg.typing .ti-dot:nth-child(3){ animation-delay:.4s; }
@keyframes ti-breathe { 0%,80%,100%{ transform:scale(.8); opacity:.35 } 40%{ transform:scale(1.15); opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .msg.typing .ti-dot { animation:none; opacity:.6; }
  .msg-row.typing-row { transition:none; }
}