/* =========================================================
   FINAL CSS — BLINKTALK UI (CLEAN, NO DUPLICATE, RESPONSIVE)
   - sesuai index.html kamu (class/id yang ada di file)
   - no tumpang tindih
   - mobile chat normal (keyboard aman, input aman, list/chat toggle aman)
========================================================= */

/* =========================
   THEME TOKENS
========================= */
:root{
  --bg-main:#030513;
  --bg-elevated:rgba(9,15,40,.92);
  --bg-card:rgba(11,18,48,.92);
  --bg-input:rgba(10,16,40,.92);

  --accent:#8b5cff;
  --accent-soft:#6751ff;
  --accent-pink:#ff4fd8;
  --accent-green:#4cd964;
  --accent-danger:#ff4b5c;

  --border-soft:rgba(255,255,255,.08);

  --text-main:#e6ebff;
  --text-soft:#9ea7d7;
  --text-muted:#6b7295;

  --radius-lg:20px;
  --radius-xl:26px;

  --shadow-soft:0 18px 45px rgba(0,0,0,.85);

  --transition-fast:.18s ease;
  --transition-med:.25s ease;

  --safe-b: env(safe-area-inset-bottom);
}

/* =========================
   BASE RESET
========================= */
*,
*::before,
*::after{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text-main);
  background:#000;
  overflow:hidden; /* internal scroll di .messages & .chat-list */
}

.hidden{display:none !important}

.blinktalk-logo{
  width: 150px;
  margin-bottom: 22px;

  opacity: 0;
  transform: translateY(24px) scale(.88);

  filter:
    drop-shadow(0 10px 25px rgba(139,92,255,.4))
    drop-shadow(0 0 0 rgba(0,200,255,0));

  animation:
    logoIntro 1.6s cubic-bezier(.16,1,.3,1) forwards,
    logoIdle 5.5s ease-in-out infinite;

  animation-delay:
    0s,
    1.6s;

  will-change: transform, filter, opacity;
}

@keyframes logoFloat{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.02); }
  100%{ transform: translateY(0) scale(1); }
}

.topbar-logo{
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(139,92,255,.8));
}

@keyframes logoIntro {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(.85);
    filter:
      drop-shadow(0 0 0 rgba(139,92,255,0))
      drop-shadow(0 0 0 rgba(0,200,255,0));
  }

  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.05);
    filter:
      drop-shadow(0 22px 55px rgba(160,120,255,.85))
      drop-shadow(0 0 65px rgba(0,220,255,.6));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 14px 35px rgba(139,92,255,.65))
      drop-shadow(0 0 45px rgba(0,200,255,.45));
  }
}

@keyframes logoIdle {
  0% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 14px 35px rgba(139,92,255,.6))
      drop-shadow(0 0 45px rgba(0,200,255,.35));
  }

  50% {
    transform: translateY(-10px) scale(1.06);
    filter:
      drop-shadow(0 24px 65px rgba(170,130,255,.95))
      drop-shadow(0 0 85px rgba(0,230,255,.7));
  }

  100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 14px 35px rgba(139,92,255,.6))
      drop-shadow(0 0 45px rgba(0,200,255,.35));
  }
}

@media (max-width: 768px){
  .blinktalk-logo{
    width: 150px;
  }
}

.empty-logo{
  width: 150px; /* 🔥 BESAR & DOMINAN */
  margin-bottom: 18px;
  opacity: .95;

  filter:
    drop-shadow(0 18px 45px rgba(140,100,255,.75))
    drop-shadow(0 0 70px rgba(0,220,255,.5));

  animation: emptyLogoPulse 5s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes emptyLogoPulse {
  0% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 18px 45px rgba(140,100,255,.6))
      drop-shadow(0 0 55px rgba(0,200,255,.35));
  }
  50% {
    transform: translateY(-12px) scale(1.08);
    filter:
      drop-shadow(0 28px 70px rgba(170,130,255,.95))
      drop-shadow(0 0 95px rgba(0,230,255,.7));
  }
  100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 18px 45px rgba(140,100,255,.6))
      drop-shadow(0 0 55px rgba(0,200,255,.35));
  }
}

/* =========================
   GROUP INVITE SCROLL
========================= */

#groupInvite{
  margin-top: 10px;

  max-height: 260px;           /* 🔥 batas tinggi */
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 6px;          /* ruang scrollbar */
  display: flex;
  flex-direction: column;
  gap: 6px;

  scrollbar-width: thin;
  scrollbar-color: #8b5cff transparent;
}

/* Chrome / Edge */
#groupInvite::-webkit-scrollbar{
  width: 8px;
}
#groupInvite::-webkit-scrollbar-track{
  background: transparent;
}
#groupInvite::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#8b5cff,#ff4fd8);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(140,95,255,.6);
}
#groupInvite::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#a98cff,#ff71e6);
}

.group-invite-item{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:8px 10px;
  border-radius:14px;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);

  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}

.group-invite-item:hover{
  background:rgba(139,92,255,.18);
  transform:translateY(-1px);
}

@media (max-width: 768px){
  #groupInvite{
    max-height: 200px;
  }
}

#groupInvite {
  flex: 1;
  min-height: 0;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* =========================
   ROOT WRAP
========================= */
.app-root{
  position:relative;
  width:100%;
  height:100vh;
  max-width:100vw;
  overflow:hidden;
}

/* =========================
   BACKGROUND
========================= */
.bg-gradient{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 0% 20%, #ff4fd8 0, transparent 45%),
    radial-gradient(circle at 70% 0%, #7b5cff 0, transparent 50%),
    radial-gradient(circle at 100% 80%, #26ffd4 0, transparent 50%),
    radial-gradient(circle at 10% 90%, #3a7bff 0, transparent 40%);
  filter:blur(4px);
  opacity:.7;
  z-index:0;
}

.bg-orbit{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 40px rgba(134,100,255,.7);
  mix-blend-mode:screen;
  opacity:.4;
  z-index:0;
}
.bg-orbit-1{width:520px;height:520px;top:-120px;right:-110px}
.bg-orbit-2{width:380px;height:380px;bottom:-120px;left:-80px}

.bg-noise{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:0;
}

/* =========================
   SCREENS
========================= */
.screen{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}

.screen-centered{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* =========================
   AUTH LAYOUT
========================= */
.auth-wrapper{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:32px;
  width:100%;
  max-width:1080px;
  align-items:center;
}
.auth-wrapper.small{
  max-width:640px;
  grid-template-columns:minmax(0,1fr);
}

.auth-hero{
  position:relative;
  padding:32px 26px 30px;
  border-radius:32px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(145deg, rgba(11,18,45,.98), rgba(5,9,30,.98));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.hero-orb{
  position:absolute;
  width:180px;height:180px;
  top:-10px;right:-40px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,#9b79ff);
  opacity:.12;
  filter:blur(2px);
}

.hero-title{margin:16px 0 4px;font-size:28px;font-weight:600}
.hero-subtitle{margin:0 0 18px;font-size:14px;color:var(--text-soft)}
.hero-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.hero-chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--text-main);
  background:linear-gradient(135deg, rgba(138,92,255,.4), rgba(47,189,255,.4));
  border:1px solid rgba(255,255,255,.18);
}

/* Cards & forms */
.glass-card{
  position:relative;
  padding:24px 22px 22px;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(140deg, rgba(6,9,30,.98), rgba(8,11,30,.98));
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(26px);
  color:var(--text-main);
}

.login-card{min-width:320px}
.login-card-orbit{
  position:absolute;
  inset:-30%;
  border-radius:40px;
  border:1px solid rgba(255,255,255,.04);
  opacity:.6;
  pointer-events:none;
}

.login-logo-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.login-logo-row.small{margin-bottom:10px}

.login-orb{
  width:40px;height:40px;border-radius:16px;
  background:radial-gradient(circle,#fff,#8b5cff);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.login-orb.small{width:30px;height:30px}

.login-logo-text .login-brand{font-size:16px;font-weight:600}
.login-logo-text .login-tagline{font-size:12px;color:var(--text-soft)}

.card-title{margin:4px 0 8px;font-size:20px;font-weight:600}
.card-sub{margin:0 0 16px;font-size:13px;color:var(--text-soft)}

.form-vertical{display:flex;flex-direction:column;gap:12px}
.field-block{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:12px;color:var(--text-soft)}

.field-input{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  padding:10px 14px;
  font-size:13px;
  outline:none;
  color:var(--text-main);
  background:var(--bg-input);
  transition:border var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.field-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(139,92,255,.6);
  background:rgba(5,10,30,.95);
}
.field-input.small{border-radius:14px}

.checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text-soft);
}
.login-options-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.link-btn{
  border:none;
  background:none;
  color:var(--accent-pink);
  font-size:12px;
  cursor:pointer;
  padding:0;
}

.hint-box{
  border-radius:16px;
  background:rgba(9,14,40,.9);
  border:1px dashed rgba(255,255,255,.14);
  padding:10px 12px;
  font-size:11px;
  color:var(--text-soft);
}
.hint-box ul{margin:0;padding-left:18px}

.form-error{min-height:16px;font-size:12px;color:var(--accent-danger)}

/* Buttons */
.btn{
  border-radius:999px;
  border:none;
  font-size:13px;
  padding:10px 16px;
  cursor:pointer;
  font-weight:500;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}
.btn-primary{
  padding:9px 20px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#8b5cff,#b259ff);
  box-shadow:0 6px 18px rgba(140,95,255,.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(140,95,255,.65)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(140,95,255,.3)}

.btn-ghost{
  padding:8px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#d4d6e5;
}
.btn-ghost.small{padding:6px 10px;font-size:11px}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.btn-ghost:active{background:rgba(255,255,255,.08)}

.btn-full{width:100%}
.btn-small{padding:7px 12px;font-size:12px}

.login-footer-meta{
  margin-top:10px;
  font-size:11px;
  color:var(--text-muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.dot-sep{opacity:.5}

/* =========================
   APP SHELL
========================= */
.app-shell{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
}

.global-topbar{
  flex-shrink:0;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:linear-gradient(90deg, rgba(7,12,35,.96), rgba(20,9,40,.96));
  border-bottom:1px solid rgba(255,255,255,.04);
}

.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-right{display:flex;align-items:center;gap:10px}

.brand-orb{
  width:32px;height:32px;border-radius:12px;
  background:radial-gradient(circle at 20% 20%, #fff, #a28aff);
}
.brand-orb.glow{box-shadow:0 0 24px rgba(142,107,255,.7)}

.brand-text .brand-name{font-size:15px;font-weight:600}
.brand-text .brand-status{font-size:11px;color:var(--text-soft)}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(12,25,55,.95);
  border:1px solid rgba(79,222,149,.5);
  color:var(--text-soft);
}
.status-dot-small{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent-green);
}

.topbar-action{
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.04);
  color:var(--text-main);
  font:inherit;
  font-size:11px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.topbar-action:hover{
  background:rgba(123,92,255,.18);
  border-color:rgba(160,130,255,.38);
  transform:translateY(-1px);
}
.status-pill.is-offline{border-color:rgba(255,90,120,.55)}
.status-pill.is-offline .status-dot-small{background:var(--accent-danger)}

.brand-logo-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:28%;
  color:#fff;
  font-weight:700;
  letter-spacing:-.06em;
  background:
    radial-gradient(circle at 25% 18%,rgba(255,255,255,.92),transparent 20%),
    linear-gradient(145deg,#7b5cff 8%,#ff4fd8 58%,#45d7ff 100%);
  box-shadow:0 12px 36px rgba(123,92,255,.42),inset 0 0 0 1px rgba(255,255,255,.28);
}
.brand-logo-mark.small{font-size:11px}
.brand-logo-mark.large{font-size:30px}

button:disabled,
.btn-primary:disabled,
.send-btn:disabled{
  cursor:not-allowed;
  opacity:.5;
  transform:none;
  filter:saturate(.55);
}

/* =========================
   MAIN GRID
========================= */
.app-main-row{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(210px,320px) minmax(0,1.8fr);
  background:rgba(2,5,15,.92);
  width:100%;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  border-right:1px solid rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(4,9,26,.98), rgba(5,9,34,.98));
}

.side-header{
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.side-me{display:flex;align-items:center;gap:8px}

.avatar-me{
  width:36px;height:36px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:radial-gradient(circle at 0 0, #fff, #7a5dff);
  color:#181230;
  overflow:hidden;
}
.me-info .me-name{display:block;font-size:13px;font-weight:500}
.me-info .me-tag{display:block;font-size:11px;color:var(--text-soft)}
.side-actions{display:flex;flex-shrink:0;gap:6px}

.side-tools{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-shrink:0;
}

.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(3,10,34,.9);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.search-box input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text-main);
  font-size:12px;
}
.search-icon{font-size:14px}

.pill-row{display:flex;gap:6px;flex-shrink:0}
.pill{
  flex:1;
  border-radius:999px;
  border:none;
  padding:6px 0;
  font-size:11px;
  background:rgba(7,14,42,.95);
  color:var(--text-soft);
  cursor:pointer;
}
.pill.active{background:linear-gradient(135deg,#7c5dff,#ff4fd8);color:#fff}

.new-group-btn{
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(5,12,38,.95);
  color:var(--text-main);
  font-size:12px;
  padding:8px 10px;
  text-align:center;
  cursor:pointer;
  flex-shrink:0;
}
.new-group-btn span{margin-right:4px}

/* Chat list scroll */
.chat-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 0;
  scrollbar-width:thin;
  scrollbar-color: rgba(139,92,255,.35) transparent;
}
.chat-list::-webkit-scrollbar{width:8px}
.chat-list::-webkit-scrollbar-track{background:transparent}
.chat-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7b5cff,#ff4fd8);
  border-radius:20px;
  border:2px solid rgba(0,0,0,.2);
  box-shadow:0 0 14px rgba(140,95,255,.65);
}
.chat-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#9e80ff,#ff71e6);
  box-shadow:0 0 20px rgba(170,110,255,.85);
}
.chat-list-empty{
  margin:14px 12px;
  padding:18px 12px;
  text-align:center;
  color:var(--text-soft);
  font-size:11px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:14px;
}

.chat-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  cursor:pointer;
  transition:background var(--transition-fast);
}
.chat-item:hover{background:rgba(255,255,255,.03)}
.chat-item.active{
  background:linear-gradient(90deg, rgba(123,92,255,.35), rgba(8,16,40,.9));
}

.chat-avatar{
  position:relative;
  flex-shrink:0;
  width:40px;height:40px;border-radius:999px;
  background:radial-gradient(circle at 0 0, #fff, #7c5dff);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  color:#111;
}
.status-dot{
  position:absolute;
  bottom:-2px;right:-1px;
  width:11px;height:11px;border-radius:999px;
  border:2px solid #050717;
  background:#6a6f8c;
}
.status-dot.online{background:var(--accent-green)}

.chat-meta{flex:1;min-width:0}
.chat-title{font-size:13px;font-weight:500}
.chat-last{
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-size:11px;
  color:var(--text-muted);
}
.chat-time{font-size:10px}
.chat-preference-icons{font-size:9px;letter-spacing:2px;opacity:.72}

/* Skeleton */
.skeleton{opacity:.4}
.shimmer-line{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.shimmer-line.small{width:70px;margin-top:4px}
.shimmer-line.tiny{width:36px}

/* =========================
   MAIN CHAT AREA
========================= */
.main{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

/* Header */
.main-header{
  flex-shrink:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(4,8,24,.98);
}
.main-head-left{display:flex;align-items:center;gap:10px}

.btn-back-mobile{
  display:none; /* tampil di mobile */
  border-radius:999px;
  border:none;
  width:28px;height:28px;
  font-size:14px;
  background:rgba(255,255,255,.04);
  color:var(--text-main);
  cursor:pointer;
}

.main-chat-avatar{
  width:36px;height:36px;border-radius:999px;
  background:radial-gradient(circle at 0 0, #fff, #7f5dff);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}

.main-chat-title-wrap .main-title{font-size:14px;font-weight:500}
.main-chat-title-wrap .main-sub{font-size:11px;color:var(--text-soft)}

.main-head-right{display:flex;align-items:center;gap:6px}
.head-meta{font-size:11px;color:var(--text-soft)}

.icon-head-btn{
  border-radius:999px;
  border:none;
  width:28px;height:28px;
  background:rgba(255,255,255,.03);
  color:var(--text-main);
  cursor:pointer;
  font-size:13px;
}

/* Messages scroll */
.messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:12px 14px;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}

.messages::-webkit-scrollbar{width:6px}
.messages::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#6f51ff,#ff4fd8);
  border-radius:20px;
  box-shadow:0 0 12px rgba(140,95,255,.45);
}

/* Empty */
.empty-state{
  height:100%;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.1);
  background:rgba(8,10,28,.7);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}
.empty-orb{
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle,#fff,#7c5dff);
  box-shadow:0 0 40px rgba(140,95,255,.8);
  opacity:.92;
}
.empty-title{font-size:16px}
.empty-sub{font-size:12px;color:var(--text-soft)}
.empty-tips{font-size:11px;color:var(--text-muted)}

/* Bubbles */
@keyframes msgIn{from{transform:scale(.98);opacity:.0}to{transform:scale(1);opacity:1}}

.msg-row{
  display:flex;
  margin-bottom:10px;
}
.msg-row.me{justify-content:flex-end}
.msg-row.other{justify-content:flex-start}

.msg-bubble{
  max-width:50%;
  padding:8px 11px;
  border-radius:16px;
  font-size:13px;
  line-height:1.5;
  position:relative;
  animation:msgIn .18s ease-out;
  box-shadow:0 10px 20px rgba(0,0,0,.65);
  cursor:default;
  overflow:hidden;
}
.msg-row.me .msg-bubble{
  border-bottom-right-radius:4px;
  background:linear-gradient(135deg,#66e38a,#2ab879);
  color:#04110a;
}
.msg-row.other .msg-bubble{
  border-bottom-left-radius:4px;
  background:rgba(12,18,40,.96);
  color:var(--text-main);
}

/* group color variations */
.msg-row.other .msg-bubble.group-color-0{background:linear-gradient(135deg,#101b35,#182645)}
.msg-row.other .msg-bubble.group-color-1{background:linear-gradient(135deg,#132235,#1e3048)}
.msg-row.other .msg-bubble.group-color-2{background:linear-gradient(135deg,#151f37,#223157)}
.msg-row.other .msg-bubble.group-color-3{background:linear-gradient(135deg,#141f30,#23324a)}
.msg-row.other .msg-bubble.group-color-4{background:linear-gradient(135deg,#151e33,#27355a)}

.msg-bubble::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,.4), transparent 60%);
  mix-blend-mode:soft-light;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.msg-bubble:hover::after{opacity:1}

.msg-author{font-size:11px;font-weight:600;margin-bottom:3px;opacity:.9}
.msg-sender-name{
  font-size:12px;
  color:#9ea7d7;
  margin:0 0 4px 4px;
  font-weight:600;
  opacity:.9;
}

.msg-content,
.msg-text{white-space:pre-wrap;word-wrap:break-word}

.msg-time{
  margin-top:4px;
  font-size:11px;
  opacity:.75;
  text-align:right;
}
.msg-deleted{font-style:italic;opacity:.8}

.msg-reply-box{
  border-radius:10px;
  padding:4px 6px;
  margin-bottom:4px;
  font-size:11px;
  background:rgba(0,0,0,.16);
}
.msg-reply-name{font-weight:500}
.msg-reply-snippet{color:rgba(255,255,255,.8)}

/* ==========================
   FIX MEDIA + TEXT ORDER
   (ANTI BERANTAKAN)
   ========================== */

.msg-content {
  display: flex;
  flex-direction: column;
}

/* kalau ada attachment, pastikan tampil di atas */
.msg-attachment {
  order: 1;
  margin-bottom: 6px;
}

/* text selalu di bawah attachment */
.msg-text {
  order: 2;
}

.msg-image,
.msg-video{
  max-width:100%;
  max-height:320px;
  border-radius:14px;
  object-fit:cover;
  cursor:pointer;
  display:block;
}

/* Desktop media size */
@media (min-width: 900px){
  .msg-image,
  .msg-video{
    max-width:420px;
    max-height:210px;
    object-fit:contain;
  }
}

/* Check mark */
.msg-meta{
  margin-top:3px;
  font-size:10px;
  text-align:right;
  color:rgba(0,0,0,.6);
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  opacity:.85;
}
.msg-row.other .msg-meta{color:var(--text-muted)}
.msg-check.read-blue{color:#34b7f1}

/* Typing */
.typing{
  min-height:16px;
  padding:0 18px;
  font-size:11px;
  color:var(--text-soft);
}

/* =========================
   INPUT BAR (textarea)
========================= */
/* DESKTOP */
.input-bar{
  position:relative;
  flex-shrink:0;
  z-index:200;
  padding:10px 14px;
  background:rgba(4,8,24,.96);
  border-top:1px solid rgba(255,255,255,.04);
}

.reply-preview{
  display:none; /* JS show/hide */
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:6px 10px;
  margin-bottom:6px;
}
.reply-preview-title{font-size:11px;font-weight:500}
.reply-preview-snippet{font-size:11px;color:var(--text-soft)}
.reply-preview-close{
  border-radius:999px;
  border:none;
  width:18px;height:18px;
  font-size:11px;
  background:rgba(255,255,255,.14);
  color:var(--bg-main);
  cursor:pointer;
}

.input-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:100%;
}

.input-inner{
  flex:1;
  border-radius:22px; /* lebih aman utk textarea */
  background:#0b1522;
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:8px 10px;
  min-width:0;
}

.icon-btn{
  border-radius:999px;
  border:none;
  width:28px;height:28px;
  font-size:14px;
  background:transparent;
  color:var(--text-soft);
  cursor:pointer;
}

#messageInput{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text-main);
  font-size:14px;
  line-height:18px;
  resize:none;
  min-height:22px;
  max-height:96px;
  overflow-y:auto;
  padding:2px 4px;
}

.send-btn{
  width:40px;height:40px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#7b5cff,#ff4fd8);
  color:#fff;
  cursor:pointer;
  font-size:16px;
  box-shadow:0 10px 22px rgba(138,92,255,.75);
}

/* =========================
   PICKERS (emoji/sticker)
========================= */
.emoji-picker,
.sticker-picker{
  position:fixed;
  bottom:90px;
  left:18px;
  z-index:130;
  display:none;
  padding:8px 10px;
  border-radius:18px;
  background:rgba(6,10,30,.98);
  border:1px solid rgba(255,255,255,.12);
  max-width:210px;
  max-height:320px;
  overflow:auto;
}

/* =========================
   PANELS / MODALS / OVERLAYS
========================= */
.overlay-panel{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 0 0, rgba(123,92,255,.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255,79,216,.2), transparent 60%),
    rgba(2,4,16,.92);
  z-index:140;
}
.panel-card{
  width:min(480px,100% - 40px);
  max-height:80vh;
  border-radius:26px;
  background:linear-gradient(150deg, rgba(6,10,30,.98), rgba(10,14,40,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-soft);
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.panel-head h3{margin:0;font-size:15px}
.panel-close{
  border-radius:999px;
  border:none;
  width:24px;height:24px;
  font-size:14px;
  background:rgba(255,255,255,.06);
  color:var(--text-main);
  cursor:pointer;
}
.panel-section-title{
  font-size:12px;
  color:#9db0d3;
  margin-top:10px;
  margin-bottom:6px;
  font-weight:500;
}

/* Profile */
.profile-main{display:flex;gap:14px;min-height:0}
.profile-avatar-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}
.profile-avatar{
  width:80px;height:80px;border-radius:999px;
  background:radial-gradient(circle at 0 0, #fff, #7c5dff);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;
}
.profile-fields{flex:1;min-height:0}
.profile-meta{margin-top:4px;font-size:11px;color:var(--text-soft)}
.profile-section{margin-top:4px}
.profile-footer{margin-top:8px;display:flex;justify-content:flex-end;gap:8px}
.call-log-list{max-height:120px;overflow-y:auto;font-size:11px}

.panel-head-sub{
  margin:3px 0 0;
  color:var(--text-soft);
  font-size:11px;
}
.activity-card{width:min(560px,100% - 32px);max-height:min(84vh,760px)}
.activity-list{
  min-height:120px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:2px;
}
.activity-empty{
  min-height:120px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--text-soft);
  font-size:12px;
  border:1px dashed rgba(255,255,255,.1);
  border-radius:16px;
}
.call-log-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:15px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.call-log-icon{
  width:40px;
  height:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(123,92,255,.34),rgba(255,79,216,.2));
  font-size:18px;
}
.call-log-name{font-size:12px;font-weight:600}
.call-log-meta,.call-log-time{font-size:10px;color:var(--text-soft)}
.call-log-time{text-align:right}
.call-log-status.missed,.call-log-status.rejected,.call-log-status.failed{color:#ff7898}
.call-log-status.completed{color:var(--accent-green)}

.status-card-panel{max-height:min(90vh,820px)}
.status-composer{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.status-textarea{min-height:76px;resize:vertical;line-height:1.55}
.status-composer-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.status-file-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.status-image-preview{position:relative;margin-top:10px;border-radius:16px;overflow:hidden;background:#030611}
.status-image-preview img{display:block;width:100%;max-height:230px;object-fit:contain}
.status-remove-image{
  position:absolute;
  right:8px;
  top:8px;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.72);
  cursor:pointer;
}
.status-section-title{margin-top:0}
.status-list{min-height:160px}
.status-item{
  padding:12px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(123,92,255,.09),rgba(255,79,216,.055));
  border:1px solid rgba(255,255,255,.08);
}
.status-item-head{display:flex;align-items:center;gap:10px}
.status-item-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#111834;font-size:18px;overflow:hidden}
.status-item-main{flex:1;min-width:0}
.status-item-name{font-size:12px;font-weight:600}
.status-item-time{font-size:10px;color:var(--text-soft)}
.status-item-text{margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.55}
.status-item-image{display:block;width:100%;max-height:360px;object-fit:contain;margin-top:10px;border-radius:14px;background:#02040d;cursor:pointer}
.status-delete{border:0;background:transparent;color:#ff7898;cursor:pointer;font-size:11px}

/* Center modal */
.center-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:160;
}
.center-modal-card{
  width:min(340px,100% - 40px);
  border-radius:22px;
  padding:16px 16px 14px;
  background:linear-gradient(150deg, rgba(6,10,32,.98), rgba(13,18,50,.98));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow-soft);
}
.center-modal-title{font-size:15px;font-weight:600}
.center-modal-body{margin-top:6px;font-size:13px;color:var(--text-soft)}
.center-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

.modal-btn{
  padding:7px 12px;
  border-radius:999px;
  border:none;
  font-size:12px;
  cursor:pointer;
}
.modal-btn.ghost{background:rgba(255,255,255,.05);color:var(--text-soft)}
.modal-btn.danger{background:var(--accent-danger);color:#fff}

/* Context menus */
.chat-context-menu,
.msg-menu{
  position:fixed;
  display:none;
  z-index:170;
  background:rgba(5,10,30,.98);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.chat-context-menu ul,
.msg-menu ul{list-style:none;margin:0;padding:4px 0}

.chat-context-menu li,
.msg-menu li{
  font-size:12px;
  padding:7px 14px;
  color:var(--text-main);
  cursor:pointer;
}
.chat-context-menu li:hover,
.msg-menu li:hover{background:rgba(255,255,255,.04)}
.chat-context-menu li.separator{padding:0;border-top:1px solid rgba(255,255,255,.08)}
.chat-context-menu li.danger,
.msg-menu li.danger{color:var(--accent-danger)}

/* =========================
   GROUP UI (invite/member)
========================= */
.invite-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  max-height:320px;
  overflow-y:auto;
}
.invite-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:14px;
  background:linear-gradient(135deg,#070c1d,#050814);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.invite-item-left{display:flex;align-items:center;gap:10px}
.invite-avatar{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 30% 0, #ffd3ff, #1b1740);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.invite-info{display:flex;flex-direction:column}
.invite-name{font-size:13px;color:#e9edff;font-weight:500}
.invite-status{font-size:11px;color:#6f78a8}
.invite-checkbox-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
}
.invite-checkbox{opacity:0;position:absolute;inset:0;cursor:pointer}
.invite-checkbox-fake{
  width:20px;height:20px;border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 0 1px rgba(139,92,255,.4);
  background:radial-gradient(circle at 30% 0, #ff9fff, #111327);
  transition:all .18s ease-out;
}
.invite-checkbox:checked + .invite-checkbox-fake{
  box-shadow:0 0 0 1px rgba(110,231,183,.7), 0 0 18px rgba(110,231,183,.45);
  border-color:rgba(110,231,183,.9);
}

.group-user-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,.05);
  padding:10px 14px;
  margin-top:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  color:#e8ebff;
  font-size:14px;
  transition:.2s;
}
.group-user-item:hover{background:rgba(255,255,255,.1)}
.group-user-name{font-weight:500;font-size:14px}
.group-user-btn{
  background:linear-gradient(90deg,#ff4080,#ff6fb1);
  border:none;
  padding:6px 12px;
  font-size:12px;
  border-radius:10px;
  cursor:pointer;
  color:#fff;
}
.group-user-btn:hover{opacity:.85}

/* Member list */
.group-member-chip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  margin-top:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  backdrop-filter:blur(10px);
  transition:.2s ease;
}
.group-member-chip:hover{background:rgba(255,255,255,.08)}
.group-member-name{font-size:14px;font-weight:500;color:#e6e9ff}
.member-badge{
  background:rgba(255,255,255,.12);
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  color:#c7ceff;
  font-weight:500;
}
.kick-btn{
  background:linear-gradient(135deg,#ff4d77,#ff77a8);
  border:none;
  padding:6px 14px;
  font-size:12px;
  border-radius:10px;
  cursor:pointer;
  color:#fff;
  font-weight:500;
  box-shadow:0 4px 14px rgba(255,70,120,.3);
  transition:.2s ease;
}
.kick-btn:hover{opacity:.9;transform:translateY(-1px)}

/* =========================
   SEARCH RESULTS / IMAGE VIEWER
========================= */
.search-chat-results{
  position:absolute;
  top:56px;
  left:0;right:0;
  max-height:50vh;
  overflow:auto;
  display:none;
  z-index:120;
  padding:10px;
  background:rgba(4,8,24,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.search-result-item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  margin-bottom:8px;
  cursor:pointer;
}
.search-result-item:hover{background:rgba(255,255,255,.06)}
#searchInChatPanel .search-chat-results{
  position:static;
  display:block;
  max-height:52vh;
  padding:2px;
  background:transparent;
  border:0;
}
#searchInChatPanel .search-result-item{
  width:100%;
  color:var(--text-main);
  text-align:left;
}
.msg-row.is-highlighted .msg-bubble{
  outline:2px solid rgba(255,206,84,.9);
  box-shadow:0 0 30px rgba(255,206,84,.28);
}

.image-viewer{
  position:fixed;
  inset:0;
  z-index:180;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
}
.image-viewer img{
  max-width:min(92vw,980px);
  max-height:86vh;
  border-radius:18px;
  box-shadow:0 20px 10px rgba(0,0,0,.7);
}

/* =========================
   MOBILE ACTION BAR (long press)
========================= */
.mobile-chat-actions{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:190;
  display:none;
  justify-content:center;
  padding-bottom:var(--safe-b);
}
.mobile-chat-actions.active{display:flex}

.mobile-chat-actions-inner{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:8px 12px 14px;
  background:rgba(8,12,30,.96);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.mobile-chat-actions-buttons{display:flex;gap:6px}
.mobile-chat-actions-buttons button{
  border-radius:999px;
  border:none;
  padding:6px 10px;
  font-size:11px;
  background:rgba(255,255,255,.05);
  color:var(--text-main);
  cursor:pointer;
}

.mobile-action-cancel{
  border-radius:999px;
  border:none;
  width:28px;height:28px;
  background:rgba(255,255,255,.04);
  color:var(--text-main);
  cursor:pointer;
}

/* =========================
   MOBILE BOTTOM NAV
========================= */
.mobile-bottom-nav{
  display:none; /* mobile only */
  height:56px;
  background:rgba(4,8,24,.98);
  border-top:1px solid rgba(255,255,255,.06);
  justify-content:space-around;
  align-items:center;
  padding-bottom:var(--safe-b);
  z-index:150;
}
.mb-nav-btn{
  flex:1;
  height:100%;
  border:none;
  background:transparent;
  color:var(--text-soft);
  font-size:11px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  cursor:pointer;
}
.mb-nav-btn.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(128,92,255,.26), transparent);
}
.mb-nav-icon{font-size:16px}
.mb-nav-label{font-size:10px;opacity:.95}

/* =========================
   TOAST
========================= */
.toast{
  position:fixed;
  left:50%;
  bottom:70px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  background:rgba(8,10,30,.98);
  color:var(--text-main);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 20px rgba(0,0,0,.7);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:200;
}

/* =========================
   CALL OVERLAY
========================= */
.call-overlay{
  position:fixed;
  inset:0;
  z-index:175;
  background:
    radial-gradient(circle at 0 0, rgba(139,92,255,.3), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,79,216,.3), transparent 55%),
    rgba(1,3,10,.95);
  display:flex;
  justify-content:center;
  align-items:center;
}
.call-overlay-inner{
  position:relative;
  width:min(420px,100% - 36px);
}
.call-main-card,
.call-incoming-box{
  border-radius:28px;
  padding:24px 18px;
  text-align:center;
  background:linear-gradient(150deg,rgba(9,13,38,.98),rgba(16,8,36,.98));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 30px 90px rgba(0,0,0,.68);
}
.call-incoming-box{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:380px;
}
.call-incoming-title{font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.12em}
.call-incoming-name{font-size:24px;font-weight:700;margin-top:14px}
.call-incoming-status,.call-state-text{font-size:12px;color:var(--text-soft);margin-top:4px}
.call-incoming-actions{display:flex;justify-content:center;gap:14px;margin-top:28px}
.call-btn,.call-control-btn{
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.055);
  color:#fff;
  cursor:pointer;
}
.call-btn.accept{background:#19a968;border-color:#5be0a0}
.call-btn.decline,.call-control-btn.end{background:#d53f62;border-color:#ff7898}
.call-avatar-wrap{display:flex;justify-content:center}
.call-avatar{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 25% 15%,#fff,#7457f5);font-size:38px;overflow:hidden}
.call-main-name{font-size:22px;font-weight:700;margin-top:14px}
.call-main-timer{font-variant-numeric:tabular-nums;font-size:14px;color:#cfd7ff;margin:8px 0 14px}
.call-video-wrapper{position:relative;min-height:0;border-radius:20px;overflow:hidden;background:#02040d}
.call-overlay[data-type="video"] .call-video-wrapper{min-height:240px;margin-bottom:16px}
.call-overlay[data-type="audio"] .call-video-wrapper{height:1px;opacity:0;pointer-events:none}
.call-video.remote{display:block;width:100%;height:300px;object-fit:cover}
.call-video.local{position:absolute;right:10px;bottom:10px;width:92px;height:126px;object-fit:cover;border-radius:14px;border:2px solid rgba(255,255,255,.55);background:#111}
.call-controls-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.call-control-btn.is-off{background:rgba(255,70,105,.25);border-color:rgba(255,120,150,.6)}
.call-control-btn.is-on{background:rgba(76,222,157,.2);border-color:rgba(76,222,157,.55)}

.blinktalk-logo.brand-logo-mark{height:150px;font-size:48px}
.empty-logo.brand-logo-mark{height:150px;font-size:44px}

/* =========================================================
   RESPONSIVE RULES (SINGLE SOURCE, NO DUPLICATE)
========================================================= */

/* 1) <= 900px: mobile mode (LIST/CHAT switch via .app-shell.show-list / .show-chat) */
@media (max-width: 900px){
  .auth-wrapper{grid-template-columns:minmax(0,1fr)}
  .auth-hero{display:none}

  .global-topbar{height:50px}
  .topbar-action{display:none}
  .brand-text .brand-status{display:none}
  .status-pill{padding:5px 8px}
  #connectionLabel{font-size:9px}
  .app-main-row{grid-template-columns:minmax(0,1fr)}
  .app-root{height:var(--app-height,100dvh);overflow:hidden}

  /* default: sembunyikan sidebar, tampil chat */
  .sidebar{display:none}
  .btn-back-mobile{display:inline-flex}

  /* LIST mode */
  .app-shell.show-list .sidebar{display:flex}
  .app-shell.show-list .main{display:none}
  .app-shell.show-list .mobile-bottom-nav{
    display:flex;
    position:relative;
  }

  /* CHAT mode */
  .app-shell.show-chat .sidebar{display:none !important}
  .app-shell.show-chat .main{display:flex;overflow:hidden}
  .app-shell.show-chat .mobile-bottom-nav{display:none}

  /* bubble width aman */
  .msg-bubble{max-width:82%}

  .messages{flex:1;min-height:0;padding:12px 10px;scroll-behavior:smooth}
  .msg-row:last-child{margin-bottom:6px}
  .input-bar{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    flex-shrink:0;
    padding:8px 10px calc(8px + var(--safe-b));
    background:rgba(4,8,24,.96);
    border-top:1px solid rgba(255,255,255,.05);
  }
  .typing{margin:0;padding:4px 10px 2px;font-size:11px;color:var(--text-soft);background:transparent}
  .empty-state{min-height:100%;justify-content:center}
}

/* 2) <= 540px: panel lebih lebar */
@media (max-width: 540px){
  .panel-card{width:calc(100% - 28px)}
  .profile-main{flex-direction:column}
  .status-composer-actions{align-items:stretch;flex-direction:column}
  .status-file-btn,.status-composer-actions .btn-primary{width:100%;text-align:center}
  .call-control-btn{font-size:11px;padding:9px 11px}
}

/* 3) <= 420px: extra small phone */
@media (max-width: 420px){
  .msg-bubble{max-width:88%;font-size:12.5px}
  #messageInput{font-size:13px}
  .input-row{gap:6px}
}

/* 4) Desktop: bottom nav selalu hidden */
@media (min-width: 901px){
  .mobile-bottom-nav{display:none !important}
}

.chat-unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: #ff3b3b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  box-shadow: 0 0 0 2px #0b1220;
}

.msg-ticks {
  color: #9aa0a6;
  font-size: 12px;
}

.msg-ticks.read {
  color: #34b7f1;
}