/* QuickLights CSS v11.6 — inline rows (name+avatar, media+post), safe notify email, replies sizing */
:root{
  --bg1:#0f2b72; --bg2:#7a1f85; --bg3:#0a8bd8;
  --card:#ffffff; --muted:#667085; --line:#e6e8ec;
  --primary:#22c55e; --danger:#ef4444; --text:#0b1526;
  --accent:#5b8dff; --share:#10b981;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 1200px at -10% -10%, var(--bg3) 0%, transparent 50%),
    radial-gradient(1200px 1200px at 110% -10%, var(--bg2) 0%, transparent 50%),
    radial-gradient(1000px 1000px at 50% 120%, var(--bg1) 0%, transparent 60%),
    linear-gradient(180deg, #0b2347 0%, #081b35 100%);
  background-attachment: fixed;
  overflow-x:hidden;
}
body.qp-noscroll{overflow:hidden}

/* layout */
.qp-wrap{max-width:980px;margin:0 auto;padding:22px}
@media (max-width:820px){ .qp-wrap{padding-inline:clamp(8px,3vw,12px);padding-top:16px} }

/* toolbar hidden */
.qp-toolbar{display:none !important}

/* branding */
.qp-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.qp-brand a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:900;letter-spacing:.3px;
  padding:6px 12px;border-radius:999px;background:#065f46;color:#eafff2;border:1px solid #047857;
  box-shadow:0 6px 18px rgba(4,120,87,.35);
}
.qp-brand a:hover{filter:brightness(1.06)}
.qp-title{font-size:32px;font-weight:900;letter-spacing:.3px;color:#f3f7ff;margin:6px 0 14px}

/* buttons & inputs */
.btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 16px;cursor:pointer}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:800}
.btn-secondary{background:#eef2ff;border-color:#eef2ff}
.btn-danger{background:var(--danger);border-color:#ef4444;color:#fff}
.btn-pill{border-radius:999px}

input[type="text"], input[type="email"], textarea{
  font:inherit;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;
}

/* composer */
.qp-composer{
  background:linear-gradient(180deg,#ffffff,#f7f9ff);
  border:1px solid var(--line);border-radius:28px;padding:16px;
  box-shadow:0 24px 60px rgba(20,24,47,.25);
}
.qp-row{display:flex;gap:12px;align-items:center;margin-bottom:8px}

/* Name + Avatar — one line, no wrap */
.qp-row.qp-row--name{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.qp-row.qp-row--name input{flex:1 1 auto;min-width:0;padding:12px 14px}
#qp-avatar-btn{flex:0 0 auto;white-space:nowrap}

/* Textarea */
.qp-textarea textarea{width:100%;padding:12px 14px;min-height:120px}

/* Previews */
.qp-previews{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.qp-thumb{width:96px;height:96px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#fafafa}
.qp-thumb--avatar{outline:2px solid #3b82f6}

/* Notify (composer + modal) — one line, safe on mobile */
.qp-notify{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px dashed var(--line);
  background:#fafcff;border-radius:14px;flex-wrap:nowrap;overflow:hidden
}
.qp-notify label{
  display:flex;align-items:center;gap:8px;font-size:14px;color:#1f2937;user-select:none;cursor:pointer;
  flex:0 0 auto;white-space:nowrap;max-width:45%;
  overflow:hidden;text-overflow:ellipsis
}
.qp-notify input[type="email"]{
  flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.qp-notify .hidden{display:none}

/* Media + Post — one line, no wrap (robust) */
.qp-row.qp-row--media{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
#qp-pick, .qp-media-btn{flex:1 1 auto;min-width:0}
#qp-post, .qp-post-btn{flex:0 0 auto;margin-left:auto;white-space:nowrap;padding:12px 16px}

/* cards */
.qp-card{
  background:linear-gradient(180deg,#ffffff,#f7f9ff);
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px;
  margin:16px 8px; /* ← dodany odstęp z lewej i prawej */
  box-shadow:0 24px 60px rgba(20,24,47,.20);
}

@media (max-width:820px){
  .qp-card{
    margin:12px 6px; /* ← mniejsza przerwa na telefonach */
    border-radius:22px;
  }
}

.qp-card__head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.qp-card__avatar{width:48px;height:48px;border-radius:999px;overflow:hidden;border:2px solid rgba(255,255,255,.9);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.qp-card__avatar img{width:100%;height:100%;object-fit:cover}
.qp-who-name{font-weight:800}
.qp-who-time{color:var(--muted);font-size:12px}
.qp-card__text{line-height:1.55;margin:10px 0}

/* photos (feed) */
.qp-carousel{position:relative;margin:10px 0;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#000}
.qp-track{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.qp-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;max-height:540px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#000}
.qp-slide img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.qp-nav{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:6px}
.qp-nav button{pointer-events:auto;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(0,0,0,.25);font-weight:900;cursor:pointer}
@media (hover:none),(max-width:820px){.qp-nav{display:none}}
.qp-card__photo-single{margin:10px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000}
.qp-card__photo-single img{width:100%;height:clamp(220px,42vw,540px);object-fit:cover}

/* videos */
.qp-card__videos{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.qp-card__videos video{width:100%;max-height:540px;border-radius:16px;border:1px solid var(--line);background:#000}

/* foot */
.qp-card__foot{display:flex;gap:10px;align-items:center;margin-top:8px}
.btn-like{background:#fff;border-color:#ffd1d1}
.btn-like.is-liked{background:#ffe5e5;border-color:#ffc2c2;color:#b91c1c}
.btn-share{background:var(--share);border-color:var(--share);color:#fff}

/* toast / diag / progress */
.qp-toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:#0b1220;color:#fff;padding:12px 16px;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:1100;display:none}
.qp-diag{background:#fde68a;border:1px solid #fbbf24;color:#92400e;padding:10px 12px;border-radius:14px;margin:12px 0;white-space:pre-wrap}
.qp-progress{height:8px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin:10px 0}
.qp-progress>div{height:100%;width:0;background:var(--primary)}

/* FAB */
.qp-fab{
  position:fixed;z-index:1200;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--primary);color:#fff;border:0;border-radius:999px;padding:16px 18px;font-weight:900;box-shadow:0 14px 40px rgba(16,185,129,.35);cursor:pointer
}

/* modal (replies) */
.qp-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center}
.qp-modal__backdrop{position:absolute;inset:0;background:rgba(4,7,17,.55);backdrop-filter:blur(3px)}
.qp-modal__panel{
  position:relative;width:min(720px,98vw);max-height:86vh;display:flex;flex-direction:column;background:#fff;border-radius:20px;
  box-shadow:0 40px 80px rgba(0,0,0,.35);overflow:hidden
}
@media (max-width:820px){.qp-modal__panel{width:98vw;border-radius:18px}}
.qp-modal__head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.qp-modal__body{padding:12px;overflow:auto}

/* replies footer (row 1) */
.qp-modal__foot{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line);flex-wrap:nowrap}
.qp-modal__foot .qp-reply-input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.qp-voice{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#sendbtn,#recbtn{white-space:nowrap}
@media (max-width:480px){
  .qp-modal__foot{gap:6px;padding:10px 8px}
  #sendbtn,#recbtn{padding:10px 12px}
  .qp-voice{gap:6px}
}

/* replies list */
.qp-reply{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.qp-reply__avatar{width:32px;height:32px;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.qp-reply__avatar img{width:100%;height:100%;object-fit:cover}
.qp-reply__body{flex:1}
.qp-reply__body img{max-width:100%;max-height:240px;object-fit:contain;border-radius:12px;display:block;margin-top:6px}
.qp-reply__who{font-size:12px;color:var(--muted);margin-bottom:4px}
.qp-reply__text{line-height:1.5}
.qp-empty{color:var(--muted)}

/* mic pulse */
@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
#recbtn.is-rec{background:#ef4444;border-color:#ef4444;color:#fff;animation:pulse-red 1.2s infinite}

/* kebab / dropdown */
.qp-kebab{margin-left:auto;cursor:pointer;user-select:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#475569;border:1px solid var(--line);background:#fff}
.qp-kebab:hover{background:#f8fafc}
.qp-dd{min-width:160px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:6px}
.qp-dd-item{display:block;width:100%;text-align:left;background:#fff;border:0;padding:10px 12px;border-radius:10px;cursor:pointer}
.qp-dd-item:hover{background:#fee2e2;color:#b91c1c}

/* lightbox */
.qp-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:1300}
.qp-lightbox img{max-width:100vw;max-height:92vh;object-fit:contain;border-radius:16px}
/* Notify controls */
.ql-notify{
  display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap;
}
.ql-notify-cb{ width:16px; height:16px; }
.ql-notify-lbl{ font-size:14px; opacity:0.9; }
.ql-notify-email{
  min-width:240px; max-width:100%;
  border:1px solid var(--line,#e6e9ef);
  border-radius:8px; padding:6px 10px; font-size:14px;
}
.qp-btn{
  border:1px solid var(--line,#e6e9ef); border-radius:10px;
  padding:8px 14px; cursor:pointer;
}
.qp-post.card{ border:1px solid var(--line,#e6e9ef); border-radius:14px; padding:12px; margin:12px 0; }
.post-head{ display:flex; gap:10px; align-items:center; opacity:0.7; font-size:12px; }
.post-content{ white-space:pre-wrap; font-size:15px; margin:8px 0; }
.post-replies{ margin-top:8px; }
.replies-list{ display:flex; flex-direction:column; gap:8px; }
.reply-item{ background:#fafafa; border:1px solid var(--line,#e6e9ef); border-radius:12px; padding:10px; }
.reply-top{ display:flex; gap:8px; opacity:0.7; font-size:12px; margin-bottom:4px; }
.reply-form{ margin-top:8px; }
.reply-text{ width:100%; min-height:60px; border:1px solid var(--line,#e6e9ef); border-radius:10px; padding:8px; }
.reply-actions{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.qp-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; background:#111; color:#fff; padding:10px 16px; border-radius:10px;
  display:none; z-index:9999; font-size:14px;
}

/* ===================== */
/* Quick toolbar (MyPost)*/
/* ===================== */
.ql-toolbar{
  display:flex; gap:8px; align-items:center;
  margin:8px 0 12px 0;
}
.ql-toolbar .ql-btn{
  border:1px solid var(--line); background:#fff; color:#0b1526;
  border-radius:999px; padding:10px 14px; cursor:pointer; font-weight:700;
}
.ql-toolbar .ql-btn--alt{
  background:#eef2ff; border-color:#eef2ff;
}
.ql-pill{
  display:inline-flex; gap:8px; align-items:center; font-size:13px;
  background:#0b1220; color:#fff; padding:8px 12px; border-radius:999px;
}
.ql-pill b{font-weight:900}
/* --- Force-hide: biały MyPost z górnego paska (Quick toolbar) --- */
/* 1) jeśli to pierwszy przycisk w pasku */
.ql-toolbar .ql-btn:first-child{
  display:none !important;
}

/* 2) gdyby miał którąś z klas/atrybutów "my posts" – łapiemy różne warianty */
.ql-toolbar .ql-btn.my-posts,
.ql-toolbar .ql-btn[aria-label="My posts"],
.ql-toolbar .ql-btn[data-role="my-posts"]{
  display:none !important;
}

/* 3) awaryjnie: gdy JS nada klasę .is-hidden (patrz krok 2), też chowamy */
.ql-toolbar .ql-btn.is-hidden{
  display:none !important;
}

/* Nie ruszamy tego chipa przy głośniku: #qp-my-posts – zostaw widoczny */



/* === Quick fixes: avatar circle + smaller Upload Avatar + notify row === */
.qp-avatar-preview{ width:44px; height:44px; border-radius:9999px; overflow:hidden; }
.qp-avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.qp-avatars .av{ width:44px; height:44px; border-radius:9999px; overflow:hidden; }
.qp-avatars .av img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:480px){
  .qp-avatar-btn .btn::after{ content:""; display:none; } /* icon-only on small screens */
}
.qp-notify-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qp-notify-row input[type="email"]{ flex:1 1 260px; min-width:220px; }


/* QP white inputs override */
.qp-composer input[type="text"],
.qp-composer input[type="email"],
.qp-composer input[type="file"],
.qp-composer textarea,
#qp-name,
#qp-whats-new {
  background: #fff !important;
  color: #000 !important;
  caret-color: #000 !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
}
.qp-composer input::placeholder,
.qp-composer textarea::placeholder {
  color: #666 !important;
}
/* hide legacy avatar upload UI */
#qp-avatar-btn,
.qp-avatar-btn,
[data-role="avatar-btn"],
#qp-avatar-input { display: none !important; }


/* Inline Add-a-comment bar */
.inline-comment{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .9rem; margin:.5rem 0 0;
  border:1px solid rgba(0,0,0,.08);
  background:#fff; border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.inline-comment__avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px;
}
.inline-comment__input{
  flex:1; min-height:36px; line-height:36px; padding:0 .4rem;
  color:#6b7280; border-radius:999px; cursor:text; background:transparent; border:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.inline-comment:hover,
.inline-comment:focus-within{ border-color:rgba(0,0,0,.15) }
@media (prefers-color-scheme: dark){
  .inline-comment{ background:#0f1115; border-color:rgba(255,255,255,.08) }
  .inline-comment__input{ color:#9aa1ad }
}
/* ===== My Posts (modal) — LIGHT override ===== */
#qp-myposts,
#qp-myposts .qp-modal__panel,
.qp-myposts,
.qp-myposts .qp-modal__panel,
.dm-modal,
.dm-modal .qp-modal__panel {
  background:#ffffff !important;
  color:#000000 !important;
}

/* Pasek nagłówka (z głośniczkiem) */
#qp-myposts .qp-modal__head,
.qp-myposts .qp-modal__head,
.dm-modal .qp-modal__head,
#qp-myposts .header,
.qp-myposts .header,
.dm-modal .header {
  background:#ffffff !important;
  color:#000000 !important;
  border-bottom:1px solid rgba(0,0,0,0.10) !important;
}

/* Ikony w nagłówku (w tym głośnik) */
#qp-myposts .qp-modal__head svg,
#qp-myposts .qp-modal__head i,
.qp-myposts .qp-modal__head svg,
.qp-myposts .qp-modal__head i,
.dm-modal .qp-modal__head svg,
.dm-modal .qp-modal__head i,
#qp-myposts .header svg,
#qp-myposts .header i {
  color:#000000 !important;
  fill:#000000 !important;
}

/* Lewa lista wątków + prawa rozmowa (jeśli są rozdzielone) */
#qp-myposts .list,
#qp-myposts .sidebar,
#qp-myposts .convo,
.qp-myposts .list,
.qp-myposts .convo {
  background:#ffffff !important;
  color:#000000 !important;
  border-color:rgba(0,0,0,0.06) !important;
}

/* Treść i body modala */
#qp-myposts .qp-modal__body,
.qp-myposts .qp-modal__body,
.dm-modal .qp-modal__body {
  background:#ffffff !important;
  color:#000000 !important;
}

/* Composer (pole wiadomości na dole modala) */
#qp-myposts .qp-modal__foot,
.qp-myposts .qp-modal__foot,
.dm-modal .qp-modal__foot {
  background:#ffffff !important;
  border-top:1px solid rgba(0,0,0,0.08) !important;
}
#qp-myposts .qp-modal__foot textarea,
.qp-myposts .qp-modal__foot textarea {
  background:#f8f9fa !important;
  color:#000000 !important;
  border:1px solid rgba(0,0,0,0.15) !important;
}

/* Pola i przyciski wewnątrz My Posts */
#qp-myposts input,
#qp-myposts textarea,
#qp-myposts select {
  background:#ffffff !important;
  color:#000000 !important;
  border:1px solid rgba(0,0,0,0.15) !important;
}
#qp-myposts .btn {
  background:#ffffff !important;
  color:#000000 !important;
  border:1px solid rgba(0,0,0,0.15) !important;
}

/* Dla pewności — wszystkie SVG/ikonki w modalu na czarno */
#qp-myposts svg, #qp-myposts i,
.qp-myposts svg, .qp-myposts i,
.dm-modal svg, .dm-modal i {
  color:#000000 !important;
  fill:#000000 !important;
}
/* ===== FORCE LIGHT THEME for My Posts modal ===== */
.dm-light,
.dm-light * {
  background: #ffffff !important;
  color: #000000 !important;
}

/* delikatne linie w nagłówku/stopce */
.dm-light .qp-modal__head,
.dm-light .header,
.dm-light .qp-modal__foot {
  border-color: rgba(0,0,0,0.10) !important;
}

/* pola formularzy */
.dm-light input,
.dm-light textarea,
.dm-light select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}

/* textarea w kompozytorze wiadomości */
.dm-light textarea {
  background: #f8f9fa !important;
}

/* ikony (w tym głośnik) */
.dm-light svg,
.dm-light i {
  color: #000000 !important;
  fill: #000000 !important;
}




/* === URBIAX neon title override (bigger + gradient) === */
.qp-title{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.35px;
  margin: 6px 0 18px;
  background: linear-gradient(120deg, #22c55e 0%, #10b981 40%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 6px rgba(34,197,94,.7),
    0 0 18px rgba(16,185,129,.7),
    0 0 32px rgba(14,165,233,.5);
}

@media (max-width: 820px){
  .qp-title{
    font-size: 30px;
    margin-bottom: 16px;
  }
}

/* === Bigger avatar on cards (JackAdmin / Lola / Nat) === */
.qp-card__avatar{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.qp-card__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}