/* ALchat Developer 4.4 MOBILE NAVIGATION - CSS completo dalla Build 005 Stable */

html.al-i18n-pending body{opacity:0}html body{transition:opacity .12s ease}

/* V17.3.3 Universal Action Bar + Live Countdown under every content */
.alTimerBox{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(7,18,37,.82));
  border:1px solid rgba(147,197,253,.28);
  display:grid;
  gap:7px;
}
.alTimerLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#dbeafe;
  font-weight:900;
  font-size:13px;
}
.alTimerLine b{color:#f8fafc;font-size:14px}
.alTimerCountdown{
  font-variant-numeric:tabular-nums;
  color:#93c5fd;
  font-weight:1000;
  letter-spacing:.2px;
}
.alTimerBox.alTimerWarn{border-color:rgba(251,191,36,.55);background:linear-gradient(180deg,rgba(120,53,15,.42),rgba(15,23,42,.82))}
.alTimerBox.alTimerDanger{border-color:rgba(248,113,113,.62);background:linear-gradient(180deg,rgba(127,29,29,.46),rgba(15,23,42,.82))}
.alTimerBox.alTimerExpired{border-color:rgba(148,163,184,.35);opacity:.75}
.alUniversalBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.14);
}
.alUniversalActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 auto;
}
.alUABtn{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0!important;
  border-radius:11px;
  background:rgba(15,23,42,.48);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.20);
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.alUABtn:hover{background:rgba(37,99,235,.76);border-color:rgba(147,197,253,.46);filter:none}
.alUABtnDanger{color:#fecaca;background:rgba(127,29,29,.44);border-color:rgba(248,113,113,.28)}
.alUABtnDanger:hover{background:rgba(220,38,38,.88);border-color:rgba(254,202,202,.50)}
.alUAFooter{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  color:#dbeafe;
  font-size:12px;
  white-space:nowrap;
  opacity:.94;
}
@media(max-width:700px){
  .alTimerLine{display:grid;grid-template-columns:1fr;font-size:12.5px;gap:4px}
  .alUniversalBar{gap:7px;align-items:flex-end}
  .alUniversalActions{gap:5px}
  .alUABtn{width:31px;height:31px;min-width:31px;border-radius:10px;font-size:15px!important}
  .alUAFooter{font-size:11px}
}

*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}
:root{
  --bg:#020617;
  --panel:#071225;
  --panel2:#0b162c;
  --line:#22314d;
  --text:#f8fafc;
  --muted:#94a3b8;
  --blue:#2563eb;
  --green:#16a34a;
  --red:#dc2626;
  --orange:#f97316;
  --purple:#7c3aed;
}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%,rgba(37,99,235,.20),transparent 35%),
    radial-gradient(circle at 90% 0%,rgba(124,58,237,.18),transparent 35%),
    linear-gradient(180deg,#020617,#020617);
  color:var(--text);
  padding:10px;
}
.hidden{display:none!important}
.app{
  max-width:1220px;
  margin:auto;
  min-height:calc(100vh - 20px);
  border:1px solid rgba(148,163,184,.25);
  border-radius:24px;
  background:rgba(2,6,23,.72);
  box-shadow:0 0 45px rgba(0,0,0,.65);
  overflow:hidden;
}
.hero{
  padding:20px 18px 14px;
  text-align:center;
  border-bottom:1px solid rgba(148,163,184,.15);
}
.hero h1{font-size:42px;line-height:1.05;margin-bottom:10px;text-shadow:0 0 18px rgba(255,255,255,.16)}
.hero .sub{font-size:22px;font-weight:bold;opacity:.95}
.stats{
  max-width:900px;
  margin:14px auto 0;
  padding:14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:rgba(15,23,42,.72);
}
.onlineBig{font-size:24px;font-weight:bold}
.greenText{color:#22c55e}
.partnerRow{display:flex;justify-content:center;gap:80px;margin-top:12px;flex-wrap:wrap}
.partnerRow a{color:#3b82f6;text-decoration:none;font-size:20px;font-weight:bold}
.topNav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:14px 18px;
}
button{
  border:none;
  border-radius:11px;
  padding:12px 15px;
  color:white;
  background:var(--blue);
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
}
button:hover{filter:brightness(1.08)}
.btnGreen{background:var(--green)}
.btnRed{background:var(--red)}
.btnDark{background:#334155}
.btnPurple{background:var(--purple)}
.btnOrange{background:var(--orange)}
input,select,textarea{
  width:100%;
  background:#050c1e;
  color:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  font-size:16px;
  outline:none;
}
label{display:block;margin:12px 0 6px;font-size:16px;font-weight:bold}
.main{
  display:grid;
  grid-template-columns:370px 1fr;
  gap:16px;
  padding:0 18px 18px;
}
.sidebar{display:flex;flex-direction:column;gap:14px;min-height:680px}
.box{
  background:rgba(7,18,37,.82);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  overflow:hidden;
}
.boxHead{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(148,163,184,.14);
  font-weight:bold;
  font-size:20px;
}
.boxBody{padding:14px}
.searchSmall{

    margin-bottom:12px;

    background:#4b5563;

    color:#ffffff;

    border:2px solid #6b7280;

    border-radius:22px;

    padding:14px 18px;

    font-size:18px;

    font-weight:500;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.08),
        0 2px 10px rgba(0,0,0,.35);

    transition:.20s;

}

.searchSmall::placeholder{

    color:#e5e7eb;

    opacity:1;

    font-size:18px;

    font-weight:500;

}

.searchSmall:focus{

    background:#596272;

    border-color:#93c5fd;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.25),
        0 0 18px rgba(59,130,246,.18);

}

.userItem,.recentItem,.groupItem,.fItem{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.userItem:last-child,.recentItem:last-child,.groupItem:last-child,.fItem:last-child{border-bottom:none}
.avatar{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  border-radius:50%;
  overflow:hidden;
  object-fit:cover;
  background:linear-gradient(135deg,#1d4ed8,#9333ea);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:18px;
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.socialPostAvatar{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1d4ed8,#9333ea);
  border:2px solid rgba(255,255,255,.18);
  font-weight:bold;
  font-size:18px;
  color:#f8fafc;
  flex:0 0 54px!important;
}
.socialPostAvatar img{
  width:100%!important;
  height:100%!important;
  max-width:54px!important;
  max-height:54px!important;
  object-fit:cover!important;
  display:block;
}
.socialMiniAvatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1d4ed8,#9333ea);
  border:1px solid rgba(255,255,255,.15);
  font-weight:bold;
  font-size:13px;
  color:#f8fafc;
  flex:0 0 36px!important;
}
.socialMiniAvatar img{
  width:100%!important;
  height:100%!important;
  max-width:36px!important;
  max-height:36px!important;
  object-fit:cover!important;
  display:block;
}
.nameLine{font-weight:bold}
.meta{color:var(--muted);font-size:14px;margin-top:3px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;margin-left:5px}
.badge{background:#ef4444;border-radius:999px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold}
.chatPanel{
  display:flex;
  flex-direction:column;
  min-height:680px;
  background:rgba(7,18,37,.70);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  overflow:hidden;
}
.chatTop{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.chatActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chatOptions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:end;
  padding:12px 16px;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.messages{
  flex:1;
  padding:22px;
  overflow:auto;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.10),transparent 30%),
    rgba(2,6,23,.35);
  max-height:610px;
}
.daySep{text-align:center;margin:0 0 18px;color:#cbd5e1;font-size:13px}
.daySep span{border:1px solid rgba(148,163,184,.18);border-radius:999px;padding:5px 12px;background:#0b162c}
.msgRow{display:flex;gap:10px;margin:14px 0;align-items:flex-end}
.msgRow.mine{justify-content:flex-end}
.bubble{
  max-width:68%;
  padding:12px;
  border-radius:14px;
  background:rgba(30,41,59,.92);
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 8px 16px rgba(0,0,0,.25);
}
.mine .bubble{background:linear-gradient(135deg,#1d4ed8,#2563eb)}
.bubbleName{font-weight:bold;margin-bottom:6px}
.bubbleText{white-space:pre-wrap;word-break:break-word}
.time{font-size:12px;color:#cbd5e1;text-align:right;margin-top:5px}
.msgImg{max-width:330px;width:100%;border-radius:10px;margin-top:8px;display:block}
.fileLink{color:#bfdbfe;text-decoration:none;font-weight:bold;display:inline-block;margin-top:8px}
.alSmartLink{
  color:#60a5fa;
  text-decoration:underline;
  word-break:break-word;
  overflow-wrap:anywhere;
  font-weight:800;
}
.alSmartLink:hover{color:#93c5fd}
.linkPreview{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:#0f172a;
  border:1px solid #334155;
  overflow:hidden;
}
.linkPreviewTop{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#93c5fd;
  font-weight:bold;
  margin-bottom:6px;
}
.linkPreviewTitle{
  font-weight:bold;
  margin-bottom:5px;
  color:#f8fafc;
}
.linkPreviewUrl{
  color:#bfdbfe;
  word-break:break-all;
  font-size:13px;
}
.linkPreviewImg{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:8px;
  background:#020617;
}
.linkPreviewFrame{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:10px;
  margin-bottom:8px;
  background:#020617;
}
.linkPreviewOpen{
  margin-top:8px;
  padding:8px 10px;
  font-size:13px;
}

audio{width:100%;margin-top:8px}
.msgBtns{display:flex;gap:6px;margin-top:10px}
.msgBtns button{font-size:13px;padding:7px 9px;border-radius:8px}
.forwarded{
  font-size:13px;
  padding:7px;
  margin-bottom:8px;
  background:#0f172a;
  border-left:4px solid #60a5fa;
  border-radius:8px;
  color:#dbeafe;
}
.composer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 16px;
  border-top:1px solid rgba(148,163,184,.14);
  align-items:center;
}
.composer textarea{

  flex:1 1 280px;
  min-width:0;

  height:54px;

  resize:none;

  background:#4b5563;

  color:#ffffff;

  border:2px solid #6b7280;

  border-radius:22px;

  padding:14px 18px;

  font-size:18px;

  font-weight:500;

  box-shadow:
      inset 0 1px 2px rgba(255,255,255,.08),
      0 2px 10px rgba(0,0,0,.35);

  transition:.20s;
}
  .composer textarea::placeholder{

    color:#e5e7eb;

    opacity:1;

    font-size:18px;

    font-weight:500;

}

.composer textarea:focus{

    background:#596272;

    border-color:#93c5fd;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.25),
        0 0 18px rgba(59,130,246,.18);

}
.composer button{
  flex:0 0 auto;
}
/* V10.5 auto-centered SVG icon buttons */
.iconBtn,
.alIconBtn{
  width:72px;
  height:72px;
  min-width:72px;
  min-height:72px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0;
  border-radius:20px;
  background:#334155;
  color:#f8fafc;
  line-height:1;
  text-align:center;
  vertical-align:middle;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.iconBtn svg,
.alIconBtn svg,
.alBtnIcon svg{
  width:32px;
  height:32px;
  display:block;
  margin:auto;
  stroke:currentColor;
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.alHeaderIconBtn{
  width:58px;
  height:58px;
  min-width:58px;
  min-height:58px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:16px;
}
.alHeaderIconBtn svg{width:28px;height:28px;display:block;margin:auto;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.alTextIconBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px;
  min-height:58px;
  padding:12px 18px!important;
  border-radius:18px;
}
.alTextIconBtn .alBtnIcon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
}
.alTextIconBtn .alBtnIcon svg{width:28px;height:28px}
.iconBtn:active,
.alIconBtn:active,
.alHeaderIconBtn:active,
.alTextIconBtn:active{transform:scale(.97)}
.loginGrid{
  max-width:880px;
  margin:0 auto;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.loginCard{
  background:rgba(7,18,37,.85);
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  padding:18px;
}
.loginCard h2{text-align:center;margin-bottom:10px}
.msgInfo{margin-top:10px;text-align:center;color:#fecaca}
.profilePreview{width:80px;height:80px;border-radius:50%;object-fit:cover;display:none;margin:10px auto;border:3px solid #3b82f6}
.overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(0,0,0,.84);
  padding:18px;
  overflow:auto;
}
.modal{
  max-width:560px;
  margin:35px auto;
  background:#071225;
  border:1px solid #1e40af;
  border-radius:20px;
  padding:18px;
  box-shadow:0 0 40px rgba(0,0,0,.72);
}
.modalTitle{font-size:24px;font-weight:bold;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.preview{
  background:#050c1e;
  border-left:4px solid #3b82f6;
  border-radius:12px;
  padding:12px;
  margin:12px 0;
  color:#dbeafe;
  white-space:pre-wrap;
}
.tabs{display:flex;gap:8px;margin:10px 0}
.tabs button{flex:1;background:#111827}
.tabs .active{background:#2563eb}
.shareGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{
  display:none;
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:100001;
  max-width:360px;
  background:#0f172a;
  border:1px solid #3b82f6;
  border-radius:16px;
  padding:14px;
  box-shadow:0 0 25px rgba(0,0,0,.65);
}
.emojiBox{
  display:none;
  position:fixed;
  left:50%;
  bottom:86px;
  transform:translateX(-50%);
  z-index:100002;
}
.unreadPulse{
  animation:pulse 1s infinite;
  color:#facc15!important;
}
.recording{animation:pulse 1s infinite;background:#dc2626!important}
@keyframes pulse{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}
@media(max-width:900px){
  .hero h1{font-size:32px}
  .main{grid-template-columns:1fr}
  .sidebar{min-height:auto}
  .chatPanel{min-height:620px}
  .topNav{grid-template-columns:1fr 1fr}
  .loginGrid{grid-template-columns:1fr}
  .bubble{max-width:86%}
  .composer{grid-template-columns:auto 1fr auto;gap:8px}
  .extraMobile{display:inline-flex!important;}
  .chatOptions{grid-template-columns:1fr}
}


.photoViewer{
  display:none;
  position:fixed;
  inset:0;
  z-index:100500;
  background:#000;
  touch-action:pan-x pan-y pinch-zoom;
}
.photoTopBar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0));
}
.photoCounter{
  flex:1;
  color:white;
  font-weight:bold;
  text-align:center;
}
.photoStage{
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.photoFull{
  max-width:100vw;
  max-height:100vh;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:transform .18s ease;
  user-select:none;
  -webkit-user-select:none;
}
.photoFull.zoomed{
  transform:scale(1.85);
  cursor:zoom-out;
}
.photoNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:46px;
  height:64px;
  border-radius:18px;
  background:rgba(15,23,42,.55);
  font-size:40px;
  padding:0;
}
.photoPrev{left:10px}
.photoNext{right:10px}
@media(max-width:700px){
  .photoTopBar{
    padding:8px;
    gap:6px;
  }
  .photoTopBar button{
    padding:9px 10px;
    font-size:13px;
  }
  .photoNav{
    width:38px;
    height:56px;
    font-size:34px;
    background:rgba(15,23,42,.38);
  }
  .photoPrev{left:4px}
  .photoNext{right:4px}
}


/* V10.3 Calls, video and menu */
.callModal{max-width:760px;text-align:center}
.callScreen{
  min-height:420px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.22);
  background:
    radial-gradient(circle at 30% 0%,rgba(37,99,235,.24),transparent 36%),
    radial-gradient(circle at 75% 20%,rgba(124,58,237,.20),transparent 40%),
    #020617;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}
.callAvatarBig{width:112px;height:112px;margin:20px auto 8px;border-radius:50%;font-size:42px}
.callName{font-size:28px;font-weight:bold}
.callState{font-size:17px;color:#cbd5e1;margin-top:6px}
.callTimer{font-size:22px;font-weight:bold;color:#22c55e;margin-top:10px}
.callControls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.callControls button{min-width:92px}
.videoGrid{display:grid;grid-template-columns:1fr 170px;gap:12px;align-items:end}
#remoteVideoBox{min-height:260px;border-radius:18px;background:#050c1e;border:1px solid #22314d;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:bold;overflow:hidden}
#localVideo{width:170px;height:120px;object-fit:cover;border-radius:16px;border:2px solid #3b82f6;background:#020617}
.menuList{display:grid;gap:9px}
.menuList button{text-align:left;background:#111827;border:1px solid #22314d}
.menuList button:hover{background:#1e293b}
.chatSearchBar{display:none;padding:10px 16px;border-bottom:1px solid rgba(148,163,184,.12);background:#071225}
.chatSearchBar.active{display:block}
.videoMsg{max-width:360px;width:100%;border-radius:12px;margin-top:8px;display:block;background:#020617}
.typingHint{color:#facc15!important}
@media(max-width:700px){.videoGrid{grid-template-columns:1fr}.callControls button{min-width:70px;padding:10px}.callName{font-size:23px}#localVideo{width:100%;height:160px}}


/* V10.4 Professional ALchat dialogs */
.alDialogOverlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:200000;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  padding:18px;
  align-items:center;
  justify-content:center;
}
.alDialogOverlay.active{display:flex;animation:alFadeIn .16s ease both}
.alDialogBox{
  width:min(92vw,460px);
  background:
    radial-gradient(circle at 20% 0%,rgba(37,99,235,.20),transparent 38%),
    linear-gradient(180deg,#0b162c,#071225);
  border:1px solid rgba(147,197,253,.45);
  border-radius:24px;
  padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);
  transform:scale(.96);
  animation:alZoomIn .18s ease both;
}
.alDialogTitle{font-size:24px;font-weight:900;margin-bottom:10px;color:#f8fafc;line-height:1.18}
.alDialogMsg{font-size:17px;line-height:1.45;color:#dbeafe;margin:8px 0 18px;white-space:pre-wrap}
.alDialogInput{
  width:100%;
  margin:8px 0 18px;
  background:#4b5563;
  color:#fff;
  border:2px solid #6b7280;
  border-radius:18px;
  padding:14px 16px;
  font-size:18px;
  font-weight:600;
}
.alDialogInput::placeholder{color:#e5e7eb;opacity:1}
.alDialogInput:focus{background:#596272;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.alDialogActions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.alDialogActions button{min-width:104px;border-radius:16px;padding:12px 16px;font-size:16px}
.alDialogCancel{background:#334155!important;color:#e5e7eb!important}
.alDialogOk{background:#2563eb!important;color:#fff!important}
.alDialogDanger{background:#dc2626!important;color:#fff!important}
.alDialogSuccess{background:#16a34a!important;color:#fff!important}
.alDialogWarn{background:#f97316!important;color:#fff!important}
.alDialogOk.loading{opacity:.75;pointer-events:none}
.alDialogOk.loading:before{content:"⏳ ";}
.alToastStack{position:fixed;left:16px;right:16px;bottom:18px;z-index:210000;display:grid;gap:10px;pointer-events:none}
.alToastItem{
  max-width:440px;
  margin:0 auto;
  background:linear-gradient(180deg,#0f172a,#071225);
  border:1px solid rgba(147,197,253,.40);
  border-radius:18px;
  padding:12px 14px;
  color:#f8fafc;
  box-shadow:0 16px 45px rgba(0,0,0,.55);
  animation:alToastIn .22s ease both;
}
.alToastItem b{display:block;margin-bottom:3px;font-size:16px}.alToastItem span{color:#cbd5e1;font-size:14px}
@keyframes alFadeIn{from{opacity:0}to{opacity:1}}
@keyframes alZoomIn{from{transform:scale(.94);opacity:.65}to{transform:scale(1);opacity:1}}
@keyframes alToastIn{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:700px){.alDialogBox{border-radius:28px;padding:20px}.alDialogTitle{font-size:25px}.alDialogMsg{font-size:18px}.alDialogActions button{flex:1;min-width:0}}


/* V11.1 Professional Messages: reply, reactions, swipe, pin */
.pinBar{
  display:none;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(15,23,42,.92));
  border-bottom:1px solid rgba(147,197,253,.28);
  cursor:pointer;
}
.pinBar.active{display:flex;animation:v111SlideDown .18s ease both}
.pinIcon{font-size:21px;line-height:1}
.pinText{flex:1;min-width:0}
.pinTitle{font-size:13px;color:#93c5fd;font-weight:900;margin-bottom:2px}
.pinMsg{font-size:14px;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinClose{width:36px;height:36px;min-width:36px;border-radius:12px;padding:0;background:#334155;display:flex;align-items:center;justify-content:center}
.replyComposerBar{
  display:none;
  align-items:center;
  gap:10px;
  margin:0 16px 0;
  padding:10px 12px;
  background:#0f172a;
  border-left:4px solid #60a5fa;
  border-radius:16px 16px 6px 6px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.replyComposerBar.active{display:flex;animation:v111SlideUp .16s ease both}
.replyComposerText{flex:1;min-width:0}
.replyComposerName{font-size:13px;color:#93c5fd;font-weight:900;margin-bottom:2px}
.replyComposerMsg{font-size:14px;color:#dbeafe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replyComposerClose{width:34px;height:34px;min-width:34px;border-radius:12px;padding:0;background:#334155;display:flex;align-items:center;justify-content:center}
.msgRow{touch-action:pan-y;transition:transform .14s ease}
.msgRow.swiping{transform:translateX(42px)}
.msgRow.swiping .bubble{box-shadow:0 0 0 2px rgba(96,165,250,.35),0 8px 18px rgba(0,0,0,.28)}
.msgRow.highlightMsg .bubble{animation:v111Highlight 1.15s ease both}
.bubble{position:relative}
.replyInside{
  margin-bottom:8px;
  padding:8px 10px;
  border-left:4px solid #93c5fd;
  border-radius:10px;
  background:rgba(15,23,42,.62);
  cursor:pointer;
}
.replyInsideName{font-size:13px;font-weight:900;color:#bfdbfe;margin-bottom:2px}
.replyInsideText{font-size:13px;color:#dbeafe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.reactionLine{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.reactionChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.25);
  font-size:16px;
  animation:v111Pop .16s ease both;
}
.v111MenuOverlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:220000;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  padding:14px;
}
.v111MenuOverlay.active{display:block;animation:alFadeIn .12s ease both}
.v111MsgMenu{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(92vw,420px);
  background:linear-gradient(180deg,#0f172a,#071225);
  border:1px solid rgba(147,197,253,.36);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.68);
  padding:12px;
  animation:v111MenuIn .18s ease both;
}
.v111ReactionPicker{display:flex;justify-content:space-between;gap:6px;padding:6px 4px 12px;border-bottom:1px solid rgba(148,163,184,.14);margin-bottom:8px}
.v111ReactionPicker button{width:42px;height:42px;min-width:42px;padding:0;border-radius:16px;background:#334155;font-size:23px;display:flex;align-items:center;justify-content:center}
.v111MenuList{display:grid;gap:8px}
.v111MenuList button{display:flex;align-items:center;gap:10px;text-align:left;background:#111827;border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:13px 14px;font-size:16px}
.v111MenuDanger{background:rgba(220,38,38,.92)!important}
@keyframes v111SlideDown{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes v111SlideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes v111Pop{from{transform:scale(.55);opacity:.45}to{transform:scale(1);opacity:1}}
@keyframes v111Highlight{0%{box-shadow:0 0 0 0 rgba(250,204,21,.0)}18%{box-shadow:0 0 0 4px rgba(250,204,21,.72)}100%{box-shadow:0 8px 16px rgba(0,0,0,.25)}}
@keyframes v111MenuIn{from{transform:translate(-50%,18px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media(max-width:700px){.v111MsgMenu{bottom:10px;border-radius:26px}.replyInsideText{max-width:210px}.reactionChip{height:30px}.pinBar{padding:10px 12px}.replyComposerBar{margin:0 12px}}


/* V11.2 Action Bar Pro: compact visible SVG actions inside the bubble */
.msgBtns{display:none!important}
.msgActionsPro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.14);
}
.msgActionButtonsPro{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
}
.msgActionBtnPro{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0!important;
  border-radius:11px;
  background:rgba(15,23,42,.42);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.18);
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .13s ease, background .13s ease, border-color .13s ease;
}
.msgActionBtnPro:hover{background:rgba(37,99,235,.75);border-color:rgba(147,197,253,.45);filter:none}
.msgActionBtnPro:active{transform:scale(.92)}
.msgActionBtnPro svg{
  width:18px;
  height:18px;
  display:block;
  margin:auto;
  stroke:currentColor;
  fill:none;
  stroke-width:2.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.msgActionBtnDanger{color:#fecaca;background:rgba(127,29,29,.42);border-color:rgba(248,113,113,.24)}
.msgActionBtnDanger:hover{background:rgba(220,38,38,.86);border-color:rgba(254,202,202,.5)}
.msgFooterPro{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  color:#dbeafe;
  font-size:12px;
  white-space:nowrap;
  opacity:.92;
}
.mine .msgActionBtnPro{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.13)}
.mine .msgActionBtnPro:hover{background:rgba(147,197,253,.25)}
.mine .msgActionBtnDanger{background:rgba(185,28,28,.45)}
@media(max-width:700px){
  .bubble{max-width:92%;padding:11px}
  .msgActionsPro{gap:7px;margin-top:9px;padding-top:8px}
  .msgActionButtonsPro{gap:5px}
  .msgActionBtnPro{width:31px;height:31px;min-width:31px;border-radius:10px}
  .msgActionBtnPro svg{width:17px;height:17px}
  .msgFooterPro{font-size:11px;gap:3px}
}
@media(max-width:380px){
  .msgActionBtnPro{width:29px;height:29px;min-width:29px}
  .msgActionBtnPro svg{width:16px;height:16px}
  .msgActionButtonsPro{gap:4px}
  .msgFooterPro{font-size:10.5px}
}


/* V12 Professional Edition: AI-ready assistant and smart composer */
.aiQuickPanel{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:12px;
}
.aiQuickPanel button{
  background:#111827;
  border:1px solid rgba(147,197,253,.24);
  border-radius:16px;
  text-align:left;
  padding:13px 14px;
}
.aiOutputBox{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:#050c1e;
  border:1px solid rgba(147,197,253,.25);
  color:#dbeafe;
  min-height:74px;
  white-space:pre-wrap;
}
.aiNote{
  color:#94a3b8;
  font-size:13px;
  margin-top:8px;
  line-height:1.35;
}
.smartReplyBar{
  display:none;
  gap:8px;
  padding:8px 16px 0;
  flex-wrap:wrap;
}
.smartReplyBar.active{display:flex}
.smartReplyChip{
  border-radius:999px;
  background:#334155;
  border:1px solid rgba(147,197,253,.2);
  padding:9px 13px;
  font-size:14px;
}
.aiComposerBtn{background:linear-gradient(135deg,#7c3aed,#2563eb)!important}
@media(max-width:700px){.aiQuickPanel{grid-template-columns:1fr}.aiComposerBtn{width:72px;height:72px;min-width:72px}}


/* V12.1 Translation Engine: smart translate, auto translate, voice translate */
.translationBox{
  margin-top:10px;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(96,165,250,.35);
  animation:v111SlideUp .16s ease both;
}
.translationHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  color:#93c5fd;
  font-size:13px;
  font-weight:900;
}
.translationText{
  color:#f8fafc;
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
.translationMiniBtns{display:flex;align-items:center;gap:6px}
.translationMiniBtn{
  width:30px;
  height:30px;
  min-width:30px;
  padding:0!important;
  border-radius:10px;
  background:#334155;
  color:#fff;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.translationMiniBtn svg{width:17px;height:17px;display:block;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.translateSettings{
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(147,197,253,.26);
  border-radius:18px;
  background:rgba(15,23,42,.48);
}
.translateSettings h3{font-size:20px;margin-bottom:8px}
.translateSettings label{display:flex;align-items:center;gap:10px;font-size:15px;margin:10px 0;color:#e5e7eb}
.translateSettings input[type=checkbox]{width:auto;transform:scale(1.15)}
.translateStatus{font-size:13px;color:#93c5fd;margin-top:8px;line-height:1.35}
.liveTranslateOn{box-shadow:0 0 0 3px rgba(34,197,94,.24)!important}
@media(max-width:700px){.translationBox{padding:10px}.translationText{font-size:14px}.translateSettings{padding:12px}}


/* V12.2 Professional Chat: Telegram/WhatsApp style refinements */
.editedTag{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(147,197,253,.22);
  color:#bfdbfe;
  font-size:10.5px;
  font-weight:800;
  vertical-align:middle;
}
.conversationModeBar{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  background:linear-gradient(90deg,rgba(22,163,74,.22),rgba(15,23,42,.92));
  border-bottom:1px solid rgba(74,222,128,.25);
  color:#dcfce7;
  font-size:14px;
  font-weight:800;
}
.conversationModeBar.active{display:flex;animation:v111SlideDown .18s ease both}
.conversationModeDot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.75)}
.webrtcReadyBox{
  margin-top:12px;
  padding:11px 12px;
  border-radius:16px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(147,197,253,.26);
  color:#dbeafe;
  font-size:13px;
  line-height:1.45;
}
.msgActionBtnEdit{color:#fde68a;background:rgba(120,53,15,.35);border-color:rgba(251,191,36,.22)}
.msgActionBtnEdit:hover{background:rgba(245,158,11,.75);border-color:rgba(253,230,138,.5)}
.reactionChip{box-shadow:0 4px 12px rgba(0,0,0,.18)}
.reactionChip.mineReaction{background:rgba(37,99,235,.35);border-color:rgba(147,197,253,.45)}
@media(max-width:700px){.conversationModeBar{padding:9px 12px;font-size:13px}.editedTag{font-size:10px}}


/* V13.1 Chat Pro stability */
.msgActionBtnCopy{color:#dbeafe}
.msgActionBtnPin{color:#bfdbfe}
.msgActionButtonsPro .msgActionBtnPro{flex:0 0 auto}
@media(max-width:700px){
  .msgActionButtonsPro{max-width:210px}
}
@media(max-width:380px){
  .msgActionButtonsPro{max-width:190px}
}


/* V13.2 Translation Engine Pro */
.translationEngineBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(37,99,235,.22);
  border:1px solid rgba(147,197,253,.35);
  color:#dbeafe;
  font-size:13px;
  font-weight:900;
}
.translationBox.v132Auto{
  border-color:rgba(34,197,94,.42);
  background:linear-gradient(180deg,rgba(15,23,42,.76),rgba(7,18,37,.86));
}
.translationBox.v132Manual{
  border-color:rgba(147,197,253,.45);
}
.translationRetryBtn{
  margin-top:8px;
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
  background:#334155!important;
}
.translateSettings .v132Row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
}
.translateSettings .v132SmallBtn{
  width:auto;
  padding:10px 12px;
  border-radius:13px;
  font-size:13px;
}
.liveVoiceStatus{
  display:none;
  margin:8px 16px 0;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(22,163,74,.18);
  border:1px solid rgba(74,222,128,.28);
  color:#dcfce7;
  font-size:14px;
  font-weight:800;
}
.liveVoiceStatus.active{display:block;animation:v111SlideUp .16s ease both}
@media(max-width:700px){
  .translationEngineBadge{font-size:12px;padding:6px 9px}
  .translateSettings .v132Row{grid-template-columns:1fr}
}


/* V13.3 Full Image Reply FIX: replies show the real image, not a tiny thumbnail */
.replyInsideMedia{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:6px;
}
.replyInsideImageFull{
  margin-top:8px;
  display:block;
  width:100%;
  max-width:330px;
  border-radius:12px;
  object-fit:contain;
  background:#020617;
  border:1px solid rgba(147,197,253,.34);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  cursor:pointer;
}
.replyInsideImageCaption{
  margin-top:6px;
  color:#dbeafe;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.replyThumb{
  width:64px;
  height:48px;
  border-radius:10px;
  object-fit:cover;
  background:#020617;
  border:1px solid rgba(147,197,253,.28);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  flex:0 0 auto;
}
.replyMediaIcon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.24);
  border:1px solid rgba(147,197,253,.28);
  font-size:24px;
  flex:0 0 auto;
}
.replyMediaMeta{
  min-width:0;
  color:#dbeafe;
  font-size:13px;
  line-height:1.25;
  overflow:hidden;
}
.replyMediaMeta b{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#f8fafc;
}
.replyComposerMedia{
  display:flex;
  align-items:center;
  gap:8px;
}
.replyComposerThumb{
  width:44px;
  height:34px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(147,197,253,.28);
  background:#020617;
  flex:0 0 auto;
}
.replyComposerIcon{
  width:36px;
  height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.24);
  border:1px solid rgba(147,197,253,.25);
  flex:0 0 auto;
}
@media(max-width:700px){
  .replyThumb{width:56px;height:42px}
  .replyInsideMedia{gap:8px}
  .replyInsideImageFull{max-width:100%;border-radius:13px}
}


/* V13.4 Reply Chain + Forward Media FIX */
.replyInsideImageFull{
  width:100%;
  max-width:340px;
  max-height:420px;
  object-fit:contain;
  border-radius:12px;
  display:block;
  margin:8px 0;
  background:#020617;
  border:1px solid rgba(147,197,253,.22);
}
.replyInsideNested{
  margin-top:8px;
  padding-left:8px;
  border-left:3px solid rgba(147,197,253,.35);
}
.replyInsideImageCaption{
  color:#dbeafe;
  font-size:13px;
  font-weight:800;
  margin-top:5px;
}
.forwardMediaPreview{
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(147,197,253,.25);
  background:#020617;
  padding:8px;
}
.forwardMediaPreview img{
  max-width:100%;
  max-height:320px;
  object-fit:contain;
  border-radius:12px;
  display:block;
  margin:auto;
}
.forwardMediaLabel{
  margin-top:8px;
  color:#dbeafe;
  font-weight:800;
  font-size:13px;
}
@media(max-width:700px){
  .replyInsideImageFull{max-width:100%;max-height:360px;}
}


/* V13.5.1 Direct Download FIX */
.fileLink.alDownloadDirect{
  cursor:pointer;
  user-select:none;
}


/* ALchat Platform V17.4.1 - Clean HTML Hero */
.hero h1{
  font-size:46px;
  line-height:1.05;
  margin-bottom:8px;
  text-shadow:0 0 22px rgba(96,165,250,.35);
}
.hero h1 .brandBlue{
  background:linear-gradient(90deg,#38bdf8,#2563eb,#8b5cf6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero .sub{
  font-size:22px;
  font-weight:800;
  color:#dbeafe;
  opacity:.98;
}
.platformTagline{
  margin-top:10px;
  font-size:18px;
  font-weight:900;
  color:#f8fafc;
  text-shadow:0 0 18px rgba(59,130,246,.32);
}
.platformTagline span{
  display:inline-block;
  margin-top:5px;
  color:#bfdbfe;
  font-size:15px;
  font-weight:800;
  opacity:.92;
}
@media(max-width:700px){
  .hero h1{font-size:31px}
  .hero .sub{font-size:16px}
  .platformTagline{font-size:15px}
  .platformTagline span{font-size:12px}
}

/* V15 Account Only */
#loginScreen.accountOnlyLogin{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start;
    width:100%;
    max-width:100%;
    margin:30px auto;
}

#loginScreen .accountOnlyCard{
    width:620px;
    max-width:95%;
    margin:0 auto;
}


/* V16 real second page routing */
#loginScreen.hidden{display:none!important;}
#mainScreen.hidden{display:none!important;}
body.alchat-chat-page #loginScreen{display:none!important;}
body.alchat-chat-page #mainScreen{display:grid!important;}
body.alchat-index-page #mainScreen{display:none!important;}
body.alchat-index-page .chatOnlyBtn{display:none!important;}
body.alchat-chat-page .indexOnlyBtn{display:none!important;}


/* V17 Social 1.0 frontend */
body.alchat-social-page #loginScreen{display:none!important;}
body.alchat-social-page #mainScreen{display:none!important;}
body.alchat-social-page #socialScreen{display:grid!important;}
body.alchat-index-page #socialScreen{display:none!important;}
body.alchat-chat-page #socialScreen{display:none!important;}
body.alchat-social-page .indexOnlyBtn{display:none!important;}
.socialScreen{
  display:none;
  grid-template-columns:1fr 330px;
  gap:16px;
  padding:0 18px 18px;
}
.socialMain,.socialSide{display:flex;flex-direction:column;gap:14px;}

.socialPostCard,.socialWidget{
  background:rgba(7,18,37,.84);
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  padding:15px;
  overflow:hidden;
}
.socialComposerTop{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:start;}
.socialComposerTop textarea{
  min-height:104px;
  resize:vertical;
  background:#4b5563;
  color:#fff;
  border:2px solid #6b7280;
  border-radius:20px;
  font-size:18px;
  font-weight:600;
}
.socialComposerTop textarea::placeholder{color:#e5e7eb;opacity:1;}
.socialTools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.socialTools button{width:auto;}
.socialVisibility{display:flex;gap:8px;flex:1;min-width:220px;}
.socialVisibility label{
  margin:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:#0f172a;
  border:1px solid rgba(147,197,253,.22);
  border-radius:14px;
  padding:10px;
  font-size:14px;
}
.socialVisibility input{width:auto;}
.socialPreview{display:none;margin-top:12px;border-radius:16px;overflow:hidden;border:1px solid rgba(147,197,253,.25);background:#020617;}
.socialPreview img,.socialPreview video{display:block;width:100%;max-height:420px;object-fit:cover;background:#020617;}
.socialFeedTitle{font-size:22px;font-weight:900;color:#f8fafc;margin:2px 0;}
.socialPostHead{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;margin-bottom:12px;}
.socialPostName{font-weight:900;font-size:17px;}
.socialPostText{font-size:17px;line-height:1.45;white-space:pre-wrap;word-break:break-word;margin:10px 0;color:#f8fafc;}
.socialMediaBox{margin-top:10px;border-radius:16px;overflow:hidden;background:#020617;border:1px solid rgba(147,197,253,.20);}
.socialMediaBox img,.socialMediaBox video{display:block;width:100%;max-height:520px;object-fit:cover;}
.socialPostActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.14);}
.socialPostActions button{width:auto;background:#334155;padding:10px 12px;border-radius:13px;font-size:14px;}
.socialPostActions .liked{background:#dc2626!important;}
.socialCommentBox{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.14);}
.socialCommentBox.active{display:block;}
.socialCommentRow{display:flex;gap:8px;margin-top:8px;}
.socialCommentRow input{flex:1;}
.socialComment{padding:8px 10px;border-radius:12px;background:#0f172a;margin-top:7px;color:#dbeafe;}
.socialSearch{margin-bottom:0;}
.trendTag{display:inline-block;margin:5px 5px 0 0;padding:8px 10px;border-radius:999px;background:rgba(37,99,235,.22);border:1px solid rgba(147,197,253,.24);color:#dbeafe;font-weight:800;font-size:13px;}
.socialOnlineItem{display:grid;grid-template-columns:36px 1fr;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(148,163,184,.10);}
.socialOnlineItem:last-child{border-bottom:0;}
.socialMiniAvatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d4ed8,#9333ea);font-weight:900;overflow:hidden;}
.socialMiniAvatar img{width:100%;height:100%;object-fit:cover;}
@media(max-width:900px){
  .socialScreen{grid-template-columns:1fr;padding:0 12px 14px;}
  .socialHeroCard h2{font-size:24px;}
  .socialComposerTop{grid-template-columns:44px 1fr;}
  .socialTools button{flex:1;min-width:135px;}
  .socialPostHead{grid-template-columns:46px 1fr;}
  .socialPostHead .btnDark{grid-column:1/-1;}
}


/* V17.2 Universal content: INVIA / POSTA / COLLEZIONE */
.composerSendPostStack{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
  min-width:112px;
}
.composerSendPostStack button{
  width:100%;
  min-height:40px;
  border-radius:14px;
  padding:10px 12px;
  font-size:15px;
}
.composerSendBtn{background:var(--blue)!important}
.composerPostBtn{
  background:linear-gradient(135deg,#16a34a,#2563eb)!important;
  box-shadow:0 8px 20px rgba(37,99,235,.25);
}
.composerCollectionBtn{
  background:linear-gradient(135deg,#7c3aed,#0f172a)!important;
  border:1px solid rgba(196,181,253,.35)!important;
  box-shadow:0 8px 20px rgba(124,58,237,.25);
}
.chatPostPreviewBox{
  margin:10px 0;
  padding:12px;
  border-radius:16px;
  background:#050c1e;
  border:1px solid rgba(147,197,253,.25);
  color:#dbeafe;
}
.chatPostPreviewBox img,.chatPostPreviewBox video{
  display:block;
  width:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:14px;
  background:#020617;
}
.chatPostVisibility{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.chatPostVisibility label{
  display:flex;align-items:center;gap:8px;margin:0;
  background:#0f172a;border:1px solid rgba(147,197,253,.25);
  border-radius:14px;padding:12px;font-size:15px;
}
.chatPostVisibility input{width:auto}
.socialContentStats{display:grid;gap:8px;margin-top:8px}
.socialContentStats div{padding:9px 10px;border-radius:12px;background:#0f172a;border:1px solid rgba(147,197,253,.16);color:#dbeafe;font-weight:800}
@media(max-width:700px){
  .composerSendPostStack{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr 1fr;min-width:0}
  .composerSendPostStack button{min-height:48px;font-size:15px}
  .chatPostVisibility{grid-template-columns:1fr}
}


.chatPostModeBadge{
  display:inline-flex;align-items:center;gap:8px;
  margin:8px 0 4px;padding:8px 11px;border-radius:999px;
  background:rgba(37,99,235,.18);border:1px solid rgba(147,197,253,.28);
  color:#dbeafe;font-weight:900;font-size:13px;
}
.chatPostTTLBox{
  margin:12px 0;padding:12px;border-radius:16px;
  background:rgba(15,23,42,.72);border:1px solid rgba(147,197,253,.22);
}
.chatPostTTLBox .meta{margin-top:6px;line-height:1.35}
.socialPostActions.universalActions{
  background:rgba(15,23,42,.35);
  border-radius:15px;
  padding:10px;
}
.socialPostActions.universalActions button{
  min-width:42px;
}
.socialTTLBadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;
  background:rgba(15,23,42,.75);border:1px solid rgba(147,197,253,.18);
  color:#bfdbfe;font-size:12px;font-weight:800;margin-top:4px;
}
@media(max-width:700px){
  .composerSendPostStack{grid-template-columns:1fr;}
  .socialPostActions.universalActions button{flex:1 1 80px;}
}



/* =========================================================
   ALchat Platform 2.0 Build 005 - FLAT MOBILE FRONTEND
   Obiettivo: meno rilievo, più spazio, media quasi full width.
   Questa sezione sovrascrive il vecchio stile senza cambiare la logica JS.
========================================================= */
html,body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:#020617!important;
}
body{
  padding:0!important;
  background:#020617!important;
  color:#f8fafc!important;
}
*,*:before,*:after{
  box-shadow:none!important;
}
.app{
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#020617!important;
  overflow:hidden!important;
}
.hero{
  padding:10px 10px 8px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
  background:#020617!important;
}
.hero h1{
  font-size:28px!important;
  margin-bottom:4px!important;
  text-shadow:none!important;
}
.hero .sub{
  font-size:15px!important;
  font-weight:800!important;
}
.platformTagline{
  margin-top:5px!important;
  font-size:13px!important;
  text-shadow:none!important;
}
.platformTagline span{
  font-size:12px!important;
}
.topNav{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
  padding:8px!important;
  background:#020617!important;
  border-bottom:1px solid rgba(148,163,184,.10)!important;
}
.topNav button,
button{
  border-radius:9px!important;
  padding:10px 9px!important;
  box-shadow:none!important;
}
.main{
  grid-template-columns:320px minmax(0,1fr)!important;
  gap:0!important;
  padding:0!important;
  min-height:calc(100vh - 118px)!important;
}
.sidebar{
  min-height:0!important;
  gap:0!important;
  border-right:1px solid rgba(148,163,184,.12)!important;
  background:#061022!important;
}
.box,
.socialPostCard,
.socialWidget,
.loginCard,
.modal,
.alDialogBox,
.v111MsgMenu,
.chatPostPreviewBox,
.translateSettings,
.webrtcReadyBox{
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  background:#071225!important;
  box-shadow:none!important;
}
.box{
  border-top:0!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
.boxHead{
  padding:10px 12px!important;
  font-size:16px!important;
  border-bottom:1px solid rgba(148,163,184,.10)!important;
}
.boxBody{
  padding:10px!important;
}
.userItem,.recentItem,.groupItem,.fItem{
  padding:8px 0!important;
  gap:8px!important;
}
.avatar{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border:0!important;
}
.chatPanel{
  min-height:0!important;
  height:calc(100vh - 118px)!important;
  border:0!important;
  border-radius:0!important;
  background:#020617!important;
  overflow:hidden!important;
}
.chatTop{
  grid-template-columns:44px minmax(0,1fr) auto!important;
  padding:8px 10px!important;
  gap:8px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
  background:#071225!important;
}
.chatActions{
  gap:5px!important;
}
.chatActions button,
.chatTop button{
  padding:8px 9px!important;
  border-radius:9px!important;
  font-size:13px!important;
}
.chatOptions{
  padding:8px 10px!important;
  gap:8px!important;
  border-bottom:1px solid rgba(148,163,184,.10)!important;
  background:#061022!important;
}
.pinBar,.conversationModeBar,.chatSearchBar{
  padding:8px 10px!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.messages{
  flex:1 1 auto!important;
  padding:10px 8px!important;
  max-height:none!important;
  background:#020617!important;
  overflow-y:auto!important;
}
.daySep{
  margin:6px 0 10px!important;
}
.daySep span{
  border:0!important;
  background:#111827!important;
  padding:4px 10px!important;
}
.msgRow{
  gap:6px!important;
  margin:8px 0!important;
  width:100%!important;
}
.msgRow.mine{
  justify-content:flex-end!important;
}
.bubble{
  max-width:76%!important;
  padding:8px!important;
  border-radius:10px!important;
  border:0!important;
  background:#182235!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.mine .bubble{
  background:#1d4ed8!important;
}
.bubbleName{
  margin-bottom:4px!important;
  font-size:13px!important;
}
.bubbleText{
  font-size:15px!important;
  line-height:1.36!important;
}
.time{
  font-size:11px!important;
  margin-top:4px!important;
  opacity:.85!important;
}
.msgImg,
.videoMsg,
.bubble video,
.bubble img:not(.avatar):not(.replyThumb):not(.replyComposerThumb):not(.socialPostAvatar img):not(.socialMiniAvatar img),
.replyInsideImageFull,
.linkPreviewImg,
.forwardMediaPreview img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:72vh!important;
  object-fit:contain!important;
  border-radius:8px!important;
  margin:6px 0 0!important;
  border:0!important;
  background:#020617!important;
}
.linkPreview,
.forwarded,
.replyInside,
.translationBox,
.alTimerBox,
.forwardMediaPreview{
  border-radius:8px!important;
  border:0!important;
  background:rgba(15,23,42,.72)!important;
  padding:8px!important;
}
.replyComposerBar{
  margin:0!important;
  border-radius:0!important;
  border-left:3px solid #60a5fa!important;
  background:#0f172a!important;
  box-shadow:none!important;
}
.msgActionsPro,.alUniversalBar,.socialPostActions{
  margin-top:7px!important;
  padding-top:7px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
.msgActionBtnPro,.alUABtn,.translationMiniBtn{
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  border-radius:8px!important;
  border:0!important;
  background:rgba(255,255,255,.09)!important;
}
.composer{
  gap:6px!important;
  padding:8px!important;
  border-top:1px solid rgba(148,163,184,.12)!important;
  background:#071225!important;
}
.composer textarea,
input,select,textarea,.searchSmall,.alDialogInput{
  border-radius:12px!important;
  border:1px solid rgba(148,163,184,.22)!important;
  background:#111827!important;
  box-shadow:none!important;
  color:#fff!important;
}
.composer textarea{
  height:46px!important;
  min-height:46px!important;
  padding:11px 13px!important;
  font-size:16px!important;
  flex:1 1 160px!important;
}
.iconBtn,.alIconBtn{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  border-radius:12px!important;
}
.iconBtn svg,.alIconBtn svg,.alBtnIcon svg{
  width:24px!important;
  height:24px!important;
}
.alHeaderIconBtn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  border-radius:10px!important;
}
.composerSendPostStack{
  gap:6px!important;
  min-width:92px!important;
}
.composerSendPostStack button{
  min-height:36px!important;
  border-radius:10px!important;
  padding:8px 9px!important;
  font-size:13px!important;
}
.socialScreen{
  padding:0!important;
  gap:0!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
}
.socialMain,.socialSide{
  gap:0!important;
}
.socialPostCard,.socialWidget{
  padding:10px!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
.socialMediaBox{
  border:0!important;
  border-radius:8px!important;
}
.socialMediaBox img,.socialMediaBox video,.socialPreview img,.socialPreview video{
  width:100%!important;
  max-height:74vh!important;
  object-fit:contain!important;
  border-radius:8px!important;
}
.photoViewer,.photoStage{
  background:#000!important;
}
.photoTopBar{
  box-shadow:none!important;
}
@media(max-width:900px){
  body{padding:0!important;}
  .app{min-height:100svh!important;}
  .hero{padding:8px 6px 6px!important;}
  .hero h1{font-size:22px!important;}
  .hero .sub,.platformTagline{display:none!important;}
  .topNav{
    display:flex!important;
    overflow-x:auto!important;
    grid-template-columns:none!important;
    gap:5px!important;
    padding:6px!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .topNav button{
    flex:0 0 auto!important;
    min-width:72px!important;
    padding:8px 9px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .main{
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:0!important;
    min-height:calc(100svh - 78px)!important;
  }
  .sidebar{
    max-height:180px!important;
    overflow:auto!important;
    border-right:0!important;
    border-bottom:1px solid rgba(148,163,184,.12)!important;
  }
  .boxHead{padding:8px 10px!important;font-size:15px!important;}
  .boxBody{padding:8px!important;}
  .chatPanel{
    height:calc(100svh - 78px)!important;
    min-height:calc(100svh - 78px)!important;
  }
  .chatTop{
    grid-template-columns:40px minmax(0,1fr) auto!important;
    padding:7px 8px!important;
  }
  .chatOptions{display:none!important;}
  .messages{
    padding:8px 4px!important;
  }
  .msgRow{
    margin:7px 0!important;
  }
  .msgRow:not(.mine){padding-right:26px!important;}
  .msgRow.mine{padding-left:26px!important;}
  .bubble{
    max-width:94%!important;
    padding:7px!important;
    border-radius:9px!important;
  }
  .msgRow:has(.msgImg) .bubble,
  .msgRow:has(.videoMsg) .bubble{
    max-width:98%!important;
    padding:3px!important;
    background:transparent!important;
  }
  .msgImg,.videoMsg,
  .bubble video,
  .replyInsideImageFull,
  .linkPreviewImg,
  .forwardMediaPreview img{
    border-radius:7px!important;
    margin-top:3px!important;
    max-height:76svh!important;
  }
  .bubbleName,.time,.msgActionsPro,.alUniversalBar{
    margin-left:4px!important;
    margin-right:4px!important;
  }
  .msgActionsPro,.alUniversalBar{
    background:rgba(15,23,42,.45)!important;
    border-radius:8px!important;
    padding:5px!important;
    margin-top:4px!important;
    border-top:0!important;
  }
  .msgActionButtonsPro{max-width:none!important;gap:4px!important;}
  .msgActionBtnPro,.alUABtn{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
  }
  .composer{
    padding:6px!important;
    gap:5px!important;
  }
  .composer textarea{
    height:44px!important;
    min-height:44px!important;
    padding:10px 12px!important;
    border-radius:18px!important;
    font-size:16px!important;
  }
  .iconBtn,.alIconBtn,.aiComposerBtn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    border-radius:14px!important;
  }
  .composerSendPostStack{
    flex:1 1 100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    min-width:0!important;
  }
  .composerSendPostStack button{
    min-height:38px!important;
    font-size:13px!important;
  }
  .loginGrid{
    padding:8px!important;
    grid-template-columns:1fr!important;
  }
  #loginScreen.accountOnlyLogin{margin:0 auto!important;}
  #loginScreen .accountOnlyCard{max-width:100%!important;width:100%!important;}
  .socialScreen{
    grid-template-columns:1fr!important;
    padding:0!important;
  }
  .socialSide{display:none!important;}
  .socialPostCard,.socialWidget{border-radius:0!important;padding:9px!important;}
  .socialMediaBox img,.socialMediaBox video,.socialPreview img,.socialPreview video{
    max-height:78svh!important;
  }
}
@media(max-width:420px){
  .hero h1{font-size:19px!important;}
  .topNav button{min-width:64px!important;font-size:11px!important;padding:8px 7px!important;}
  .sidebar{max-height:150px!important;}
  .chatPanel{height:calc(100svh - 72px)!important;min-height:calc(100svh - 72px)!important;}
  .bubble{max-width:96%!important;}
  .msgRow:has(.msgImg) .bubble,.msgRow:has(.videoMsg) .bubble{max-width:99%!important;}
  .messages{padding-left:3px!important;padding-right:3px!important;}
  .msgRow:not(.mine){padding-right:12px!important;}
  .msgRow.mine{padding-left:12px!important;}
}


/* =========================================================
   ALchat Build 005 FIX - Media centrati + Smart Reply off
   Inserito da ChatGPT - 2026-06-29
   Obiettivo: foto, video, post e file sempre centrati su mobile/desktop.
========================================================= */
#smartReplyBar,
.smartReplyBar,
.smartReplyBar.active{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

/* La bolla resta pulita, ma i contenuti media vengono centrati */
.bubble{
  max-width:96%!important;
  overflow:hidden!important;
}

/* Se la bolla contiene media, deve usare quasi tutta la larghezza utile */
.msgRow:has(.msgImg) .bubble,
.msgRow:has(.videoMsg) .bubble,
.msgRow:has(video) .bubble,
.msgRow:has(audio) .bubble,
.msgRow:has(.fileLink) .bubble,
.msgRow:has(.chatPostPreviewBox) .bubble,
.msgRow:has(.forwardMediaPreview) .bubble,
.msgRow:has(.linkPreview) .bubble{
  width:min(96%, 820px)!important;
  max-width:96%!important;
}

/* Media principali: sempre centrati */
.msgImg,
.videoMsg,
.bubble video,
.bubble audio,
.replyInsideImageFull,
.linkPreviewImg,
.forwardMediaPreview img,
.chatPostPreviewBox img,
.chatPostPreviewBox video,
.socialMediaBox img,
.socialMediaBox video,
.socialPreview img,
.socialPreview video{
  display:block!important;
  margin:10px auto!important;
  max-width:100%!important;
  width:auto!important;
  height:auto!important;
  max-height:76svh!important;
  object-fit:contain!important;
  border-radius:8px!important;
  float:none!important;
}

/* Video più naturali: centrati, non schiacciati */
.videoMsg,
.bubble video,
.chatPostPreviewBox video,
.socialMediaBox video,
.socialPreview video{
  width:min(100%, 760px)!important;
  background:#020617!important;
}

/* Immagini grandi ma sempre dentro lo schermo */
.msgImg,
.replyInsideImageFull,
.forwardMediaPreview img,
.chatPostPreviewBox img,
.socialMediaBox img,
.socialPreview img{
  width:auto!important;
  max-width:100%!important;
}

/* Contenitori media/post/link: centrati */
.forwardMediaPreview,
.chatPostPreviewBox,
.socialMediaBox,
.socialPreview,
.linkPreview{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  margin:10px auto!important;
  text-align:center!important;
  float:none!important;
}

/* File/documenti centrati */
.fileLink,
.fileLink.alDownloadDirect{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  margin:10px auto!important;
  text-align:center!important;
  float:none!important;
  word-break:break-word!important;
}

/* Testo e barre dentro la bolla restano larghi */
.bubbleName,
.bubbleText,
.time,
.msgActionsPro,
.alUniversalBar,
.translationBox,
.alTimerBox,
.reactionLine{
  width:100%!important;
}

/* Mobile: media ancora più larghi e meno padding */
@media(max-width:700px){
  .msgRow:has(.msgImg) .bubble,
  .msgRow:has(.videoMsg) .bubble,
  .msgRow:has(video) .bubble,
  .msgRow:has(audio) .bubble,
  .msgRow:has(.fileLink) .bubble,
  .msgRow:has(.chatPostPreviewBox) .bubble,
  .msgRow:has(.forwardMediaPreview) .bubble,
  .msgRow:has(.linkPreview) .bubble{
    width:98%!important;
    max-width:98%!important;
    padding:3px!important;
    background:transparent!important;
  }
  .msgImg,
  .videoMsg,
  .bubble video,
  .bubble audio,
  .replyInsideImageFull,
  .linkPreviewImg,
  .forwardMediaPreview img,
  .chatPostPreviewBox img,
  .chatPostPreviewBox video,
  .socialMediaBox img,
  .socialMediaBox video,
  .socialPreview img,
  .socialPreview video{
    margin:6px auto!important;
    max-height:78svh!important;
  }
  .videoMsg,
  .bubble video,
  .chatPostPreviewBox video,
  .socialMediaBox video,
  .socialPreview video{
    width:100%!important;
  }
}



/* =========================================================
   BUILD005 FIX 002 - CENTER MEDIA MESSAGE BLOCKS ONLY
   Solo CSS. Non modifica JavaScript, login, reply, forward, social, R2.
   Problema risolto: la bolla dei media era allineata a destra/sinistra
   perché .msgRow.mine usa justify-content:flex-end.
========================================================= */

/* I messaggi che contengono foto/video/link/media vengono centrati nella riga */
.msgRow:has(.msgImg),
.msgRow:has(.videoMsg),
.msgRow:has(.bubble video),
.msgRow:has(.replyInsideImageFull),
.msgRow:has(.forwardMediaPreview),
.msgRow:has(.chatPostPreviewBox),
.msgRow:has(.socialMediaBox),
.msgRow:has(.linkPreviewImg){
  justify-content:center!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Nasconde l'avatar laterale solo sui messaggi media, per non spostare il centro */
.msgRow:has(.msgImg) > .avatar,
.msgRow:has(.videoMsg) > .avatar,
.msgRow:has(.bubble video) > .avatar,
.msgRow:has(.replyInsideImageFull) > .avatar,
.msgRow:has(.forwardMediaPreview) > .avatar,
.msgRow:has(.chatPostPreviewBox) > .avatar,
.msgRow:has(.socialMediaBox) > .avatar,
.msgRow:has(.linkPreviewImg) > .avatar{
  display:none!important;
}

/* La bolla media diventa un blocco centrato, non una bolla laterale */
.msgRow:has(.msgImg) .bubble,
.msgRow:has(.videoMsg) .bubble,
.msgRow:has(.bubble video) .bubble,
.msgRow:has(.replyInsideImageFull) .bubble,
.msgRow:has(.forwardMediaPreview) .bubble,
.msgRow:has(.chatPostPreviewBox) .bubble,
.msgRow:has(.socialMediaBox) .bubble,
.msgRow:has(.linkPreviewImg) .bubble{
  width:min(96%,760px)!important;
  max-width:min(96%,760px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

/* Media centrati dentro il blocco */
.msgImg,
.videoMsg,
.bubble video,
.bubble audio,
.replyInsideImageFull,
.forwardMediaPreview,
.forwardMediaPreview img,
.chatPostPreviewBox,
.chatPostPreviewBox img,
.chatPostPreviewBox video,
.socialMediaBox,
.socialMediaBox img,
.socialMediaBox video,
.linkPreview,
.linkPreviewImg{
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Immagini e video non devono attaccarsi a sinistra */
.msgImg,
.videoMsg,
.bubble video,
.replyInsideImageFull,
.forwardMediaPreview img,
.chatPostPreviewBox img,
.chatPostPreviewBox video,
.socialMediaBox img,
.socialMediaBox video,
.linkPreviewImg{
  max-width:100%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Su telefono sfrutta quasi tutta la larghezza */
@media(max-width:700px){
  .msgRow:has(.msgImg) .bubble,
  .msgRow:has(.videoMsg) .bubble,
  .msgRow:has(.bubble video) .bubble,
  .msgRow:has(.replyInsideImageFull) .bubble,
  .msgRow:has(.forwardMediaPreview) .bubble,
  .msgRow:has(.chatPostPreviewBox) .bubble,
  .msgRow:has(.socialMediaBox) .bubble,
  .msgRow:has(.linkPreviewImg) .bubble{
    width:98%!important;
    max-width:98%!important;
  }
}



/* =========================================================
   BUILD005 FIX 003 - SPOSTA STRISCIA CHAT IN BASSO
   Solo HTML + CSS layout.
   Nessuna funzione JavaScript modificata.
   Sposta: AL + titolo chat + Esci/Chat/Telefono/Video/Menu vicino a Foto/Parla.
========================================================= */

/* Il vecchio header non occupa più spazio in alto perché il blocco è stato spostato nel footer */
.chatTopMoved{
  flex:1 1 auto!important;
  min-width:260px!important;
  display:grid!important;
  grid-template-columns:44px minmax(170px,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

/* Riga inferiore: Foto + Parla + info chat + pulsanti */
.composerBottomRow{
  padding:0 16px 12px!important;
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  background:#020617!important;
}

/* Titolo compatto in basso */
.chatTopMoved .avatar{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  font-size:17px!important;
}
.chatTopMoved .nameLine{
  font-size:18px!important;
  line-height:1.1!important;
}
.chatTopMoved .meta{
  font-size:13px!important;
  margin-top:3px!important;
}

/* Pulsanti della striscia spostata */
.chatTopMoved .chatActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
}
.chatTopMoved .chatActions button{
  min-height:44px!important;
  height:44px!important;
  border-radius:10px!important;
  padding:9px 12px!important;
  font-size:14px!important;
}
.chatTopMoved .chatActions .alHeaderIconBtn{
  width:44px!important;
  min-width:44px!important;
  padding:0!important;
}

/* Su mobile va sotto a Foto/Parla e resta ordinato */
@media(max-width:700px){
  .composerBottomRow{
    padding:0 8px 10px!important;
    gap:8px!important;
  }
  .chatTopMoved{
    flex:1 1 100%!important;
    grid-template-columns:38px minmax(120px,1fr) auto!important;
    gap:8px!important;
    padding-top:4px!important;
  }
  .chatTopMoved .avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    font-size:15px!important;
  }
  .chatTopMoved .nameLine{
    font-size:15px!important;
  }
  .chatTopMoved .meta{
    font-size:11px!important;
  }
  .chatTopMoved .chatActions{
    gap:5px!important;
  }
  .chatTopMoved .chatActions button{
    height:38px!important;
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:12px!important;
  }
  .chatTopMoved .chatActions .alHeaderIconBtn{
    width:38px!important;
    min-width:38px!important;
  }
}

@media(max-width:430px){
  .chatTopMoved{
    grid-template-columns:34px minmax(0,1fr)!important;
  }
  .chatTopMoved .chatActions{
    grid-column:1 / -1!important;
    justify-content:flex-start!important;
  }
}



/* =========================================================
   BUILD006 FRONTEND - MENU A SCOMPARSA + SOCIAL FOLLOW UI
   Solo frontend: non modifica API, traduttore, invio, chat o backend.
========================================================= */

.alMainMenuBtn{
  position:fixed!important;
  top:10px!important;
  left:10px!important;
  z-index:260000!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border-radius:14px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(15,23,42,.94)!important;
  border:1px solid rgba(147,197,253,.35)!important;
  color:#f8fafc!important;
  font-size:28px!important;
  line-height:1!important;
  box-shadow:0 12px 35px rgba(0,0,0,.45)!important;
}

.alSideMenuBackdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:259998;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.alSideMenu{
  position:fixed;
  z-index:259999;
  top:0;
  left:0;
  height:100vh;
  width:min(55vw,360px);
  min-width:280px;
  max-width:420px;
  background:linear-gradient(180deg,#071225,#020617);
  border-right:1px solid rgba(147,197,253,.25);
  transform:translateX(-104%);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
  box-shadow:18px 0 60px rgba(0,0,0,.55)!important;
}

body.alMenuOpen .alSideMenu{transform:translateX(0);}
body.alMenuOpen .alSideMenuBackdrop{display:block;}

.alSideMenuHead{
  padding:16px 12px 12px 62px;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.75);
}

.alSideMenuHead b{
  display:block;
  font-size:18px;
  color:#f8fafc;
}

.alSideMenuHead span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#93c5fd;
  font-weight:800;
}

.alMenuClose{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  padding:0!important;
  border-radius:12px!important;
  background:#334155!important;
}

.alSideMenuScroll{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.alSideMenuScroll button{
  width:100%!important;
  min-height:46px!important;
  border-radius:14px!important;
  text-align:left!important;
  padding:12px 13px!important;
  background:#111827!important;
  border:1px solid rgba(147,197,253,.18)!important;
  color:#f8fafc!important;
  font-size:15px!important;
  font-weight:900!important;
}

.alSideMenuScroll button:hover{
  background:#1e293b!important;
  border-color:rgba(147,197,253,.38)!important;
  filter:none!important;
}

.alMenuDivider{
  height:1px;
  background:rgba(148,163,184,.18);
  margin:6px 4px;
}

.alFollowList{
  display:none;
  margin:0 0 4px;
  padding:8px;
  border-radius:14px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(147,197,253,.16);
  max-height:220px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.alFollowList.active{display:block;}

.alFollowPerson{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:8px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid rgba(148,163,184,.10);
}

.alFollowPerson:last-child{border-bottom:0;}

.alFollowAvatar{
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#1d4ed8,#9333ea);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

.alFollowAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.alFollowName{
  font-size:13px;
  font-weight:900;
  color:#f8fafc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.alFollowMeta{
  font-size:11px;
  color:#94a3b8;
  margin-top:2px;
}

.alUABtnFollow{
  width:auto!important;
  min-width:86px!important;
  padding:0 10px!important;
  gap:4px!important;
  font-size:13px!important;
  white-space:nowrap!important;
  color:#dcfce7!important;
  background:rgba(22,163,74,.32)!important;
  border-color:rgba(74,222,128,.35)!important;
}

.alUABtnFollow.alFollowOn{
  color:#dbeafe!important;
  background:rgba(37,99,235,.38)!important;
  border-color:rgba(147,197,253,.42)!important;
}

@media(max-width:700px){
  .alMainMenuBtn{
    top:8px!important;
    left:8px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    border-radius:13px!important;
  }

  .alSideMenu{
    width:55vw;
    min-width:0;
    max-width:55vw;
  }

  .alSideMenuHead{
    padding-left:56px;
  }

  .alSideMenuScroll{
    padding:8px;
    gap:7px;
  }

  .alSideMenuScroll button{
    min-height:44px!important;
    font-size:13px!important;
    border-radius:13px!important;
    padding:11px 10px!important;
  }

  .alUABtnFollow{
    min-width:78px!important;
    height:31px!important;
    font-size:12px!important;
  }
}

@media(max-width:430px){
  .alSideMenu{
    width:58vw;
    max-width:58vw;
  }
}



/* BUILD006.1 - Pulsante Segui nella chat privata */
.alChatFollowBtn{
  margin-top:6px!important;
  width:auto!important;
  min-height:32px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:rgba(22,163,74,.34)!important;
  color:#dcfce7!important;
  border:1px solid rgba(74,222,128,.38)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}
.alChatFollowBtn.alFollowOn{
  background:rgba(37,99,235,.42)!important;
  color:#dbeafe!important;
  border-color:rgba(147,197,253,.45)!important;
}
@media(max-width:700px){
  .alChatFollowBtn{
    min-height:30px!important;
    padding:6px 9px!important;
    font-size:11px!important;
  }
}