/* ========== RESET + BASE ========== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a; --bg-2:#101010; --bg-3:#101215; --bg-4:#13151a; --bg-5:#181b21;
  --text:#fff; --muted:#9aa9b3; --line:#23262d; --brand:#3b82f6; --brand-2:#60a5fa; --bubble:#1b1f27;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --glass: rgba(255,255,255,0.04);
  --ring: rgba(59,130,246,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  --pageDur:.28s;
}
html,body{height:100%}
html{color-scheme:dark}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 80% -10%, rgba(59,130,246,.08), transparent 40%), var(--bg);
  color:var(--text);
  min-height:100dvh; min-height:-webkit-fill-available;
  display:flex; flex-direction:column; overflow:hidden;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.hidden{display:none!important}
.muted{color:var(--muted)}
.grow{flex:1 1 auto}
.mt-12{margin-top:12px}
.mb-10{margin-bottom:10px}
.inline-row{display:flex;gap:8px;align-items:center}

/* ========== HEADER ========== */
header{
  position:sticky; top:env(safe-area-inset-top);
  padding:14px 20px calc(14px + env(safe-area-inset-top));
  font-weight:700;font-size:17px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
  text-align:center; letter-spacing:.2px; z-index:40;
}

/* ========== MAIN + PAGES ========== */
main{ position:relative; flex:1 1 auto; overflow:hidden; padding:0; }
.page{
  position:absolute; inset:0; overflow:auto;
  padding:18px 16px calc(90px + env(safe-area-inset-bottom));
  background:transparent;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-behavior:auto;
  opacity:0; transform:translateX(10px); pointer-events:none;
  transition:opacity var(--pageDur) ease, transform var(--pageDur) ease;
  will-change:opacity, transform;
}
.page.page--active{ opacity:1; transform:none; pointer-events:auto; }
.section-title{margin:14px 0 8px;color:#ccc;font-weight:600}

/* ========== INPUTS / BUTTONS ========== */
input[type=text],input[type=file],select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-5);color:var(--text);font-size:15px;outline:none;
  transition:border-color .15s, box-shadow .15s, background .2s
}
input[type=text]:focus, select:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}

button{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  border:none;color:#fff;border-radius:12px;padding:10px 14px;
  font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .06s ease, filter .2s
}
button:hover{filter:brightness(1.05)}
button:active{transform:translateY(1px)}
button.ghost{ background:var(--glass); border:1px solid var(--line); color:#eaeaea; backdrop-filter:blur(10px) }
button.small{font-size:12px;padding:6px 10px}

/* ujednolicone klasy do list */
.btn{ 
  background:linear-gradient(180deg,var(--brand),var(--brand-2)); 
  color:#fff; border:none; border-radius:12px; padding:8px 12px; 
  font-weight:600; font-size:13px; box-shadow:var(--shadow); cursor:pointer;
}
.btn-ghost{
  background:var(--glass); color:#eaeaea; border:1px solid var(--line); 
  border-radius:12px; padding:8px 12px; backdrop-filter:blur(10px);
}
.btn-danger{ border-color:rgba(239,68,68,.35) }
.btn.small{ font-size:12px; padding:6px 10px }

/* ========== LIST ITEMS ========== */
.item{
  display:flex;align-items:center;justify-content:space-between;background:var(--bg-4);
  border-radius:14px;padding:12px 14px;margin-bottom:10px;
  transition:background .2s, transform .1s; border:1px solid var(--line)
}
.item:hover{background:#1a1e26}
.left{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{
  width:44px;height:44px;border-radius:50%;background:#2b2f38;display:flex;align-items:center;justify-content:center;
  font-weight:700;background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.03); flex:0 0 44px;
  color:#fff;
}
.name{font-weight:600;font-size:15px}
.sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium .name{color:#FFD700}

/* blok akcji spójny */
.item .actions{
  display:flex; gap:6px; align-items:center; justify-content:flex-end;
  flex:0 0 auto; flex-wrap:nowrap; margin-left:auto;
}

/* ========== NAVBAR ========== */
footer.navbar{
  position:fixed;left:0;right:0;bottom:0;height:64px;
  padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
  border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;
  z-index:50;backdrop-filter:blur(10px)
}
footer.navbar button{
  background:none;border:1px solid transparent;color:#8b8f99;border-radius:12px;padding:8px 12px;font-size:18px;cursor:pointer;
  transition:color .2s,transform .1s, border-color .2s, box-shadow .2s
}
footer.navbar button.active{
  color:#fff;border-color:transparent;transform:translateY(-1px);
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 18px rgba(59,130,246,.25)
}
footer.navbar button:active{transform:translateY(0)}
#tabFriends{ position:relative; }
#tabFriends .counter{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff; border-radius:999px; border:1px solid var(--line);
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
  transform:scale(0.8); opacity:0; transition:transform .18s, opacity .18s;
}
#tabFriends .counter.show{ transform:scale(1); opacity:1 }

/* ========== SEARCH WRAP ========== */
.search-wrap{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg,rgba(10,10,10,.95),rgba(10,10,10,.75));
  backdrop-filter:blur(8px); padding:10px 0 12px;
}
.inline-row > * { min-width:0 }

/* ========== CHATS ========== */
.chats-shell{position:relative;height:calc(100dvh - 64px - 64px); overflow:hidden}
.panel{position:absolute;top:0;bottom:0;overflow:auto;background:transparent;}
.panel.list{left:0;right:0;padding:10px 14px 90px}
#chatList .item{cursor:pointer}
#chatList .item .name{display:flex;align-items:center;gap:6px}
#chatList .item .name .badge{background:var(--brand);color:#fff;border-radius:999px;padding:0 6px;font-size:10px}

/* VIEW slide */
.panel.view{
  left:0;right:0;display:flex;flex-direction:column;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .28s ease;z-index:20;will-change:transform;background:var(--bg-3)
}
.panel.view.active{transform:translateX(0)}

/* Conversation header */
.conv-head{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));position:sticky;top:0;z-index:2
}
.conv-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.conv-title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-actions select{background:var(--bg-5);color:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px}

/* WĄTEK (twoja struktura: .thread-body + .composer jako rodzeństwo) */
.thread-body{
  position:relative;
  height:calc(100% - 64px); /* rezerwowo, nadpisane niżej w trybie czatu */
  overflow:auto; padding:12px;
  display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0) 120%);
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-behavior:auto;
  word-break:break-word; overflow-wrap:anywhere; white-space:pre-wrap;
}
.msg-wrap{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.msg-wrap.them{align-self:flex-start}
.msg-wrap.me{align-self:flex-end;flex-direction:row-reverse}
.msg-avatar{width:28px;height:28px;border-radius:50%;background:#2b2f38;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px; flex:0 0 28px}
.msg-bubble{
  padding:9px 12px;border-radius:16px;animation:fadeIn .18s ease-in; max-width:100%;
  overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; min-width:0;
}
.msg-bubble.them{background:var(--bubble);color:#fff;border:1px solid #2c2c2c}
.msg-bubble.me{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff}
.msg-name{font-size:11px;color:#b7b7b7;margin:0 0 4px 2px}
.msg-bubble.new{box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.composer{
  position:sticky;bottom:0;z-index:21;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:#0f1217;display:flex;gap:8px;margin-top:auto
}
.composer input{flex:1;background:var(--bg-5);color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.composer button{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;border-radius:10px;padding:10px 12px;font-weight:700}

/* Fade-in */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ========== SETTINGS (GLASS) ========== */
.settings-grid{display:grid;gap:14px;grid-template-columns:1fr;max-width:980px;margin:0 auto;padding-bottom:8px}
.card{
  background:linear-gradient(180deg, var(--glass), rgba(0,0,0,.25));
  border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:var(--shadow);
  animation:fadeIn .18s ease; will-change:transform,opacity;
}
.card .title{font-weight:700; font-size:14px; letter-spacing:.3px; color:#e5e7eb; margin-bottom:12px;}
.row{display:flex;align-items:center;gap:14px}
.row.start{align-items:flex-start}
.note{font-size:12px;color:var(--muted);margin-top:6px}
.between{display:flex;align-items:center;justify-content:space-between}
.avatar-lg{
  width:92px;height:92px;border-radius:18px;background:#2b2f38;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px; position:relative; border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.avatar-lg .edit{
  position:absolute;right:8px;bottom:8px;font-size:11px;background:var(--glass);
  border:1px solid var(--line);padding:6px 8px;border-radius:999px;backdrop-filter:blur(8px)
}
.upload-drop{ border:1px dashed #2e3441; border-radius:12px; padding:10px; transition:border-color .2s, background .2s; }
.upload-drop.dragover{ border-color:var(--brand); background:rgba(59,130,246,.06); }

.field{position:relative}
.field input[type=text]{ padding:16px 14px 14px 14px;background:linear-gradient(180deg,var(--bg-5),#0f1217); }
.field label{
  position:absolute;left:12px;top:10px;font-size:12px;color:#9aa0aa;pointer-events:none;transition:transform .2s, opacity .2s;
  background:transparent; padding:0 4px;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{ transform:translateY(-12px) scale(.92); opacity:.9; }

.segment{ display:flex;gap:8px;flex-wrap:wrap }
.segment .seg{ min-width:84px }
.segment .seg.active{ background:linear-gradient(180deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent; }

.red-card{ background:linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.06)); border:1px solid rgba(239,68,68,.35); }
.badge{ display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--line); color:#e5e7eb;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600 }

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,rgba(17,24,39,.95),rgba(17,24,39,.85));
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:600;opacity:0;pointer-events:none;
  box-shadow:var(--shadow);transition:opacity .18s, transform .18s; z-index:60
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ========== RESPONSIVE ========== */
@media (min-width:960px){ .settings-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  .row{flex-direction:column;align-items:stretch}
  .avatar-lg{align-self:flex-start}
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* =========================
   HOTFIX: tryb CZATY (brak scrolla strony)
========================= */
.mode-chats main{ overflow:hidden; padding-bottom:0; }
#screenChats{ overflow:hidden; }
#screenChats .chats-shell{ height:calc(100dvh - 64px - 64px); overflow:hidden; position:relative; }
#convListPanel{ overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#convViewPanel{ overflow:hidden; display:flex; flex-direction:column; }

/* kluczowe: .thread-body żyje jako rodzeństwo .composer */
#convViewPanel .thread-body{
  flex:1 1 auto; min-height:0; overflow:auto;
  word-break:break-word; overflow-wrap:anywhere; white-space:pre-wrap;
}
#convListPanel, #convViewPanel, .thread-body{ min-width:0; }

/* Sent & Incoming: spójny layout akcji */
#incomingRequests .item, #sentRequests .item{ align-items:center; }
#incomingRequests .item .left, #sentRequests .item .left{ min-width:0; flex:1 1 auto; }

/* animowane zwijanie wiersza */
.list-item-collapsing{
  overflow:hidden !important;
  transition:opacity .18s ease, transform .18s ease, max-height .22s ease, margin .22s ease, padding .22s ease !important;
  will-change:opacity, transform, max-height;
}
/* =========================================
   FRIENDS — kebab (⋯) + popover "między"
   (scoped tylko do #screenFriends)
========================================= */
#screenFriends .item{ position:relative; overflow:visible; background:var(--bg-4); border:1px solid #191c22 }
#screenFriends .item:hover{ background:#15181e }

/* lewa kolumna elastyczna, tekst z elipsami */
#screenFriends .left{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px }
#screenFriends .name, #screenFriends .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* stałe rozmiary avatara i kebaba */
#screenFriends .avatar{ flex:0 0 44px; width:44px; height:44px }
#screenFriends .more-btn{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 34px; width:34px; height:34px; margin-left:12px;
  border-radius:10px; background:var(--glass); border:1px solid #1a1d22; color:#e3e6eb;
  cursor:pointer; transition:filter .18s, transform .06s, border-color .18s, background .18s;
}
#screenFriends .more-btn:hover{ filter:brightness(1.04) }
#screenFriends .more-btn:active{ transform:translateY(1px) }
#screenFriends .more-btn .dots{
  width:3px; height:3px; border-radius:999px; background:currentColor;
  box-shadow:0 -6px 0 0 currentColor, 0 6px 0 0 currentColor;
}

/* POPoVER: po lewej od przycisku ⋯ (czyli "między" ⋯ a nazwą) */
#screenFriends .menu{
  position:absolute;
  right:52px;                 /* 34px przycisk + ~18px margines -> popover pojawia się VISUALNIE między */
  top:50%;
  transform:translateY(-50%);
  display:none; gap:6px; white-space:nowrap; z-index:30;
  background:linear-gradient(180deg, rgba(12,14,18,.98), rgba(12,14,18,.92));
  border:1px solid #1a1d22; border-radius:12px; padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
}
#screenFriends .item.open > .menu{ display:flex }

/* przyciski w menu (lekko przyciemnione) */
#screenFriends .menu .btn,
#screenFriends .menu .btn-ghost{
  background:rgba(255,255,255,.035);
  border:1px solid #20242b;
  color:#e4e7ee;
  padding:6px 10px; font-size:12px; border-radius:10px;
}
#screenFriends .menu .btn-ghost.btn-danger{ border-color:rgba(239,68,68,.32) }

/* bezpieczeństwo na wąskich ekranach: menu może się zawinąć */
@media (max-width:420px){
  #screenFriends .menu{ flex-wrap:wrap; row-gap:6px }
}

/* dodatkowe subtelne przyciemnienie borderów/ghostów w całej appce */
.item{ border-color:#1a1d22 }
button.ghost, .btn-ghost{ border-color:#1a1d22; color:#dfe3ea; background:rgba(255,255,255,.035) }
.btn{ box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02) }

/* =========================================
   CHATS — ZERO WYCHODZENIA Z BĄBLI
========================================= */
/* brak poziomego scrolla gdziekolwiek w ekranie czatu */
#screenChats,
#screenChats .chats-shell,
#convListPanel,
#convViewPanel,
#screenChats .thread-body{
  overflow-x:hidden !important;
}

/* kolumny mogą się zawężać */
#screenChats .thread-body,
#screenChats .msg-wrap > div{
  min-width:0;
}

/* bąble + zawartość: twarde łamanie i zawijanie, zawsze w 100% szerokości */
#screenChats .thread-body,
#screenChats .msg-bubble{
  max-width:100%;
  overflow-wrap:anywhere;       /* nowoczesne przeglądarki */
  word-break:break-word;        /* fallback i bardzo długie ciągi/URL */
  white-space:pre-wrap;         /* zachowaj \n, ale pozwól łamać */
}

/* sam wiersz wiadomości nie rozpycha layoutu */
#screenChats .msg-wrap{ max-width:96% }

/* elementy w środku bańki (code/pre/link/img) też nie wyjdą */
#screenChats .msg-bubble *{
  min-width:0; max-width:100%;
  overflow-wrap:anywhere; word-break:break-word;
}
#screenChats .msg-bubble pre{ white-space:pre-wrap }
#screenChats .msg-bubble img{ max-width:100%; height:auto; border-radius:8px }

/* delikatniej: obramowanie dla bąbli "them" i tło thread */
#screenChats .msg-bubble.them{ border:1px solid #1f232a }
#screenChats .thread-body{
  background:linear-gradient(180deg,rgba(255,255,255,0.018) 0%, rgba(255,255,255,0) 120%)
}

/* =========================================
   SENT/INCOMING — spójny layout
========================================= */
#incomingRequests .item, #sentRequests .item{ align-items:center }
#incomingRequests .item .left, #sentRequests .item .left{ min-width:0; flex:1 1 auto }

/* === HOTFIX: Chats — brak poziomego scrolla + bez uciekającego tekstu === */

/* Lista konwersacji: lewa kolumna może się zawijać, prawa (czas) sztywna */
#chatList .item { align-items: center; }
#chatList .item .left{ flex:1 1 auto; min-width:0; }     /* KLUCZ */
#chatList .item .meta{ min-width:0; overflow:hidden; }   /* KLUCZ */
#chatList .item .name{ min-width:0; }
#chatList .item .sub{
  display:block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* 1 linia */
}
#chatList .item .right{
  flex:0 0 auto; margin-left:8px; white-space:nowrap; color:var(--muted);
}
/* gdy są badge obok nazwy — nie rozpychają */
#chatList .item .name .badge{ flex:0 0 auto; }

/* Wątek: twarde limity szerokości i brak poziomego scrolla */
#convViewPanel, #convViewPanel .thread-body{ overflow-x:hidden; }
.thread-body{
  word-break:break-word;               /* łamie długie wyrazy/URL-e */
  overflow-wrap:anywhere;              /* dodatkowe łamanie */
}

/* Opakowanie i kolumna treści nie mogą wymuszać poszerzenia */
.msg-wrap{ max-width:100%; }
.msg-wrap > div{ min-width:0; max-width:100%; }

/* Bańka wiadomości nigdy nie wyjdzie poza ekran */
.msg-bubble{
  max-width:100%;
  overflow:hidden;                     /* chowa ewentualne „artefakty” */
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

/* Długie linki/ciągi bez spacji też się ugną */
.msg-bubble a{ word-break:break-all; }

/* Media w wiadomościach skaluje się do szerokości bańki */
.msg-bubble img,
.msg-bubble video,
.msg-bubble canvas{
  max-width:100%; height:auto; display:block;
}

/* Drobne przyciemnienie ramek i cieni (prosiłeś o „ciutkę” mniej jasno) */
:root{ --line:#1c2026; } /* było ~#23262d */
.item, .card, .composer input, .conv-head, .panel.view{ border-color:var(--line); }
button, .btn{
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);
}
/* Settings polish */
#saveProfileBtn:disabled{ opacity:.5; cursor:not-allowed; filter:saturate(.6); }
#avatarPreview:hover .edit{ filter:brightness(1.1); }

/* Używamy istniejącej .toast – tylko żeby była spójna z JS */
.toast.hack{
  left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(84px + env(safe-area-inset-bottom));
}
/* Settings polish */
#screenProfile { padding: 14px; }
.settings-grid{display:grid;gap:14px;grid-template-columns:1fr;max-width:980px;margin:0 auto}
.card{ border-color:#1e2229 } /* odrobinę ciemniejsze */
.btn-ghost{ border-color:#2a2f37 } /* odrobinę ciemniejsze */
.field input[type=text]{ background:linear-gradient(180deg,var(--bg-5),#0f1217); }
.field label{ background:transparent }

/* Avatar big hover */
.avatar-lg:hover .edit{ filter:brightness(1.05) }

/* Mały segment/label jako przycisk */
.seg{ display:inline-flex;align-items:center;justify-content:center; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--glass); cursor:pointer }

/* (chat) – ostatnia linia zawsze zawijana i przycinana – już masz, ale doklejamy pewniejszy wariant */
#chatList .item .sub[data-lastline]{
  display:block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}