:root{
  --bg:#0a0a0a; --card:#141414; --mut:#9aa0a6; --txt:#e9eaee;
  --border:#242424; --accent:#ff4d4f; --accent-2:#ff6b6d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;overflow-x:hidden}
a,.linklike{color:var(--accent)}
.app{max-width:1120px;margin:0 auto;padding:0 14px;overflow-x:hidden}

/* header */
.header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px;margin-bottom:12px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.brand{display:flex;gap:8px;align-items:center;font-weight:700}
.logo{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#1f1f1f}
.header-right{display:flex;gap:12px;align-items:center}
.online{color:var(--mut);font-size:14px}
.country-select select{background:#151515;color:var(--txt);border:1px solid var(--border);border-radius:10px;padding:.45rem .7rem}

/* cards & layout */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px}
.onboard{max-width:680px;margin:28px auto;display:flex;flex-direction:column;gap:14px;text-align:center}
.onboard h1{margin:6px 0 0 0;font-size:28px}
.muted{color:var(--mut)}

.form{display:flex;flex-direction:column;gap:8px;text-align:left}
.form input{background:#111;border:1px solid var(--border);border-radius:12px;color:var(--txt);padding:.7rem .85rem}

.drop{position:relative;border:1px dashed #2b2b2b;border-radius:14px;padding:18px;background:#101010}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-ui{pointer-events:none}

/* buttons */
.primary,.ghost,.btn{border:1px solid var(--border);border-radius:12px;padding:.6rem .9rem;background:#2a0e10;color:var(--txt);cursor:pointer}
.primary{background:linear-gradient(180deg,#4a1214,#2a0e10);border-color:#551417}
.primary:hover{filter:brightness(1.06)}
.ghost{background:#111}
.btn.icon{display:flex;align-items:center;justify-content:center;font-size:20px;height:44px}
.btn.icon input{display:none}

/* chat layout */
.chat-layout{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin:14px auto;max-width:100%}
.chat{display:flex;flex-direction:column;min-width:0;height:calc(100svh - var(--headerH,64px) - 16px)}
.messages{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px 4px}
.msg{max-width:76%;padding:.55rem .75rem;border-radius:12px;background:#1b1b1b;word-wrap:break-word;overflow-wrap:break-word}
.mine{align-self:flex-end;background:#371216}
.sys{align-self:center;color:var(--mut);font-size:14px}

/* Next */
.next-wrap{display:flex;justify-content:center;padding:8px 0}
.next-red{background:linear-gradient(180deg,#ff4d4f,#b51f22);border:1px solid #7a1416;color:#fff;border-radius:14px;padding:.7rem 1.2rem;font-weight:800;min-width:220px}

/* composer sticky (desktop) */
.composer{position:sticky;bottom:0;display:grid;grid-template-columns:20% 60% 20%;gap:8px;padding:10px;
  background:linear-gradient(180deg,rgba(20,20,20,.1),rgba(20,20,20,.45)),#141414;border-top:1px solid var(--border);
  border-radius:14px;max-width:100%}
.composer input[type=text]{background:#0e0e0e;border:1px solid var(--border);border-radius:10px;color:var(--txt);padding:.6rem .75rem;width:100%}

/* side */
.side{display:flex;flex-direction:column;gap:18px;min-width:0}
.side-block h3{margin:0 0 8px 0;font-size:18px;color:#f1b0b0;font-weight:800;letter-spacing:.2px}
.partner-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.partner-name{font-weight:800;font-size:18px;color:var(--accent)}

/* GALLERY: griglia 2x2 MAX 4, thumb quadrate */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  max-height:48vh; overflow:auto;
}
.gallery img,.gallery video{
  width:100%; aspect-ratio:1/1; height:auto;
  object-fit:cover; object-position:center;
  border-radius:12px; background:#000; display:block; cursor:pointer;
  box-shadow:0 0 0 1px #222 inset;
}

/* media thumbs nella chat (restano rettangolari) */
.msg.media{background:transparent;padding:0}
.msg.media.mine{align-self:flex-end}
.msg.media .thumb{display:block;max-width:220px;max-height:180px;width:auto;height:auto;border-radius:10px;background:#000;cursor:pointer}
.msg.media video.thumb{object-fit:cover}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox.open{display:flex}
.lightbox .lb-content img,.lightbox .lb-content video{max-width:92vw;max-height:92vh;border-radius:12px;background:#000}
.lightbox .lb-close{position:absolute;top:14px;right:14px;background:#111;border:1px solid #333;color:#fff;border-radius:999px;width:36px;height:36px;cursor:pointer;font-size:18px;line-height:34px;text-align:center}
.disabled{opacity:.6;pointer-events:none}

/* SCROLLBAR MODERNA ROSSA (gallerie + messaggi) */
.messages, .gallery{
  scrollbar-width:thin;                 /* Firefox */
  scrollbar-color: var(--accent) #1a1a1a;
}
.messages::-webkit-scrollbar, .gallery::-webkit-scrollbar{width:10px;height:10px}
.messages::-webkit-scrollbar-track, .gallery::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}
.messages::-webkit-scrollbar-thumb, .gallery::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff6b6d,#9e1f22);
  border-radius:10px;
  border:2px solid #1a1a1a;
}
.messages::-webkit-scrollbar-thumb:hover, .gallery::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ff7f81,#b12225);
}

/* responsive */
@media (max-width: 980px){
  .chat-layout{grid-template-columns:1fr}
  .side{order:-1}
}

/* MOBILE: dock fisso (composer sopra, Next sotto) */
@media (max-width: 560px){
  .onboard{margin:18px auto}
  .msg{max-width:92%}
  .side-block.you{display:none}

  .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:unset}
  .gallery img,.gallery video{aspect-ratio:1/1;height:auto}

  .dock{
    position:fixed; left:14px; right:14px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:50; display:flex; flex-direction:column; gap:8px;
  }
  .composer{position:static}
  .next-wrap{padding:0}
  .next-red{width:100%}
  .messages{padding-bottom:calc(var(--dockH,140px) + 8px)}
}
.hidden{display:none}

/* ===== Now Chatting (H4 rosso) ===== */
.now-chatting{
  margin: 8px 0 12px;
  color: var(--accent);          /* rosso */
  font-weight: 800;              /* grassetto */
  font-size: 1.15rem;            /* h4-ish */
  line-height: 1.2;
  align-self: center;            /* centrato come i sys msg */
  text-align: center;
}
.now-chatting .name{
  color: #fff;
  font-weight: 800;
}
@media (max-width:560px){
  .now-chatting{ font-size: 1.05rem; }
}

/* ==== Partner gallery: riga scrollabile su mobile ==== */
@media (max-width:560px){
  /* dimensione delle thumb partner (altezza massima) */
  :root{ --pgSize: 112px; }

  /* solo il partner usa layout orizzontale */
  .gallery.hscroll{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    max-height: var(--pgSize);
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .gallery.hscroll img,
  .gallery.hscroll video{
    height: var(--pgSize);
    width:  var(--pgSize);     /* quadrate */
    flex: 0 0 var(--pgSize);
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    scroll-snap-align: start;
  }

  /* indicatore "scorri →" (scompare a fine scroll) */
  .gallery.hscroll::after{
    content: '›';
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg,#ff6b6d,#9e1f22);
    color: #fff; font-weight: 900; font-size: 18px;
    display: grid; place-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    opacity: .85; pointer-events: none;
    transition: opacity .2s ease;
  }
  .gallery.hscroll.at-end::after{ opacity: 0; }
}

/* Visual disabled style for Next Chat to match disabled input */
button.disabled-input-like,
button[disabled].next-red,
button[disabled] {
  opacity: 0.6 !important;
  filter: grayscale(80%) !important;
  cursor: not-allowed !important;
  color: #ddd !important;
  background: #333 !important;
  border-color: #222 !important;
}