/* ===============================
   CHATS PAGE (ELITE MERGED FINAL)
================================ */


/* 🔥 NO TEXT SELECTION ANYWHERE */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition:opacity .12s ease, transform .12s ease;
}


body.page-out{
opacity:0;
transform:scale(.985);
}

body.page-in{
opacity:1;
transform:scale(1);
}


/* allow input fields only */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

* {
   -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


.chats-page{
padding:28px 14px 16px;
padding-top:40px;
max-width:720px;
margin:auto;
}

/* ===============================
   HEADER
================================ */

.chats-header{
display:flex;
flex-direction:column;
align-items:center;
padding:18px 0 12px;
margin-bottom:6px;
text-align:center;
width:100%;
}

.chats-top{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin-bottom:4px;
}

.chats-logo{
width:26px;
height:26px;
object-fit:contain;
opacity:0.9;
filter:
drop-shadow(0 2px 6px rgba(0,0,0,0.15))
drop-shadow(0 4px 12px rgba(37,99,235,0.25));
}

.chats-title{
font-size:18px;
font-weight:700;
letter-spacing:-0.3px;
color:#111827;
}

.chats-sub{
font-size:12px;
color:#6b7280;
opacity:0.9;
}

/* ===============================
   CHAT ACTIONS (FROM CSS2)
================================ */

.chat-actions{
display:flex;
gap:12px;
padding:12px;
border-bottom:1px solid #eee;
background:white;
position:sticky;
top:0;
z-index:10;
}

.chat-actions button{
padding:10px 14px;
border:none;
border-radius:8px;
background:#f3f4f6;
cursor:pointer;
font-size:13px;
}

.chat-actions button:disabled{
opacity:0.4;
cursor:not-allowed;
}

.chat-actions.active{
background:#eef2ff;
}

/* ===============================
   FILTERS
================================ */

.chat-filters{
display:flex;
gap:10px;
margin:10px 0 20px;
justify-content:center;
flex-wrap:wrap;
}

.chat-filters button{
padding:8px 16px;
border-radius:999px;
border:none;
background:#f3f4f6;
font-size:13px;
cursor:pointer;
transition:.2s;
}

.chat-filters button.active{
background:#2563eb;
color:white;
box-shadow:0 4px 14px rgba(37,99,235,0.35);
}

.chat-filters button:active{
transform:scale(0.9);
}

/* ===============================
   CHAT LIST
================================ */

.chat-list{
  display:flex;
  flex-direction:column;
  gap:3px; /* 🔥 more breathing space */
  padding:4px 0;
}


/* ===============================
   CHAT CARD (GRID + GLASS)
================================ */

/* ===============================
   CHAT CARD
================================ */

.chat-card{
  display:grid;
  grid-template-columns: 60px 1fr auto;
  grid-template-rows:auto auto auto;

  align-items:center;

  padding:6px 8px;
  gap:8px;

  border-radius:20px;

  min-height:72px;

  background:#ffffff;

  border:2px solid rgba(0,0,0,0.04);



  position:relative;
  overflow:hidden;

  cursor:pointer;
  transition:all .25s ease;
  height: 76px;
}


.chat-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.08),
    0 20px 40px rgba(0,0,0,0.06);
}

.chat-card:active{
transform:scale(0.97);
}

/* ripple */
.chat-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle,
rgba(37,99,235,0.12),
transparent 60%);
opacity:0;
transition:.2s;
}

.chat-card:active::before{
opacity:1;
}

/* watermark */
.chat-card::after{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:120px;
height:120px;
background:url("../../assets/logo/logo-icon-nobg.png") no-repeat center;
background-size:contain;
opacity:0.04;
pointer-events:none;
}

.chat-body{
flex:1;
display:flex;
flex-direction:column;
gap:2px;
}

.chat-row{
display:flex;
justify-content:space-between;
align-items:center;
}
/* ===============================
   AVATAR
================================ */

.chat-avatar{
  width:100%;
  height:100%;
  border-radius:18px;
  object-fit:cover;

  box-shadow:
    0 6px 16px rgba(0,0,0,0.15),
    0 0 0 2px rgba(255,255,255,0.8);
}



.chat-avatar-wrap{
  position:relative;
  width:55px;
  height:55px;
}



.chat-avatar-wrap::after{
content:"";
position:absolute;
inset:0;
border-radius:16px;

background:linear-gradient(
to bottom,
rgba(0,0,0,0.05),
rgba(0,0,0,0.25)
);

pointer-events:none;
}


/* 🔥 SMALL SELLER IMAGE */
.chat-seller-avatar{
position:absolute;
bottom:-4px;
right:-4px;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.2);

width:30px;
height:30px;

border-radius:50%;
object-fit:cover;

 border:2px solid #fff;
background:rgba(255, 255, 255, 0.994);

}

/* ===============================
   STRUCTURE
================================ */



.chat-top{
grid-column:2 / 4;
display:flex;
justify-content:space-between;
align-items:center;
}

/* ===============================
   TEXT
================================ */

.chat-name{
  font-size:15px;
  font-weight:600;
  color:#111827;

  display:flex;
  align-items:center;
  gap:6px;
}


.chat-last{
  grid-column:2;
  font-size:12px;
  color:#6b7280;

  opacity:0.85;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-preview-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
}

.chat-preview-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-last-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:#64748b;
}

.chat-last-icon.sticker{
  color:#2563eb;
}

.chat-product{
  grid-column:2;
  font-size:14px;
  font-weight:600;
  color:#111;

  line-height:1.2;
}

/* TIME */
.chat-time{
  grid-column:3;
  align-self:flex-start;

  font-size:11px;
  color:#9ca3af;
}

/* ===============================
   UNREAD DOT
================================ */
/* ===============================
   UNREAD COUNT BADGE
================================ */

.chat-unread{
  position:absolute;
  bottom:10px;
  right:10px;

  min-width:20px;
  height:20px;

  padding:0 6px;

  border-radius:999px;

  background:#2563eb;
  color:white;

  font-size:11px;
  font-weight:600;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 4px 10px rgba(37,99,235,0.35);

  z-index:2;
}

/* 🔥 small animation when appears */
.chat-unread.pop{
  animation:popIn .2s ease;
}

@keyframes popIn{
  0%{transform:scale(0.6); opacity:0;}
  100%{transform:scale(1); opacity:1;}
}
/* ===============================
   SKELETON
================================ */

.chat-card.skeleton{
height:70px;
border-radius:18px;
background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
background-size:200% 100%;
animation:shimmer 1.2s infinite;
}

@keyframes shimmer{
0%{background-position:-200px 0;}
100%{background-position:200px 0;}
}

/* ===============================
   MENU (MERGED IOS + PREMIUM)
================================ */

.chat-menu-wrap{
position:absolute;
top:12px;
right:12px;
padding:14px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
}

.chat-menu-wrap:active{
background:rgba(0,0,0,0.05);
transform:scale(0.95);
}

#menuBtn{
width:22px;
height:22px;
transition:.3s;
}

#menuBtn.menu-pop{
transform:scale(1.3) rotate(8deg);

box-shadow:
0 0 20px rgba(37,99,235,0.6),
0 0 40px rgba(37,99,235,0.3);

transition:.25s;
}

.menu-dropdown{
position:absolute;
top:55px;
right:0;
min-width:180px;

background:rgba(255,255,255,0.98);
backdrop-filter:blur(20px);

border-radius:18px;

box-shadow:
0 20px 50px rgba(0,0,0,0.25),
0 6px 14px rgba(0,0,0,0.1);

display:flex;
flex-direction:column;

transform:scale(0.95) translateY(-10px);
opacity:0;

transition:.25s cubic-bezier(.2,.8,.2,1);
z-index:9999;
}


.hidden {
display:none;
}

.menu-dropdown:not(.hidden){
opacity:1;
transform:scale(1) translateY(0);
}

.menu-dropdown button{
padding:16px 18px;
font-size:15px;
font-weight:500;
border:none;
background:none;
  display:flex;
  align-items:center;
  gap:10px;
cursor:pointer;
min-height:50px;
transition:.2s;
}

.menu-dropdown button + button{
border-top:1px solid #f1f5f9;
}


.menu-dropdown button:active{
background:#e5e7eb;
transform:scale(0.97);
}

.menu-dropdown.hidden{
pointer-events:none;
opacity:0;
}

.menu-dropdown svg{
  width:20px;
  height:20px;
}
.menu-dropdown button[data-action="delete"]:hover{
  color:#ef4444;
}

.menu-dropdown button[data-action="spam"]:hover{
  color:#6b7280;
}

/* ===============================
   SELECTION BAR
================================ */

.selection-bar{
position:fixed;
bottom:90px;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
background:white;
box-shadow:0 -6px 25px rgba(0,0,0,0.1);
border-top:1px solid #eee;
z-index:999;
}

.selection-bar.hidden{
display:none;
}

.selection-bar button{
padding:10px 16px;
border-radius:20px;
border:none;
font-size:13px;
cursor:pointer;
transition:.15s;
}

.selection-bar button:active{
transform:scale(0.95);
background:#1d4ed8;
color:white;
}

#cancelSelect{
background:#f3f4f6;
}

#confirmAction{
background:#2563eb;
color:white;
}

#confirmAction:disabled{
opacity:0.4;
}

/* ===============================
   CHECKBOX
================================ */

.checkbox{
width:18px;
height:18px;
border:2px solid #2563eb;
border-radius:4px;
cursor:pointer;
}

.checkbox.checked{
background:#2563eb;
}

/* ===============================
   STATES
================================ */

.chat-card.selected{
outline:2px solid #2563eb;
}

.chat-card.removing{
transform:translateX(120%);
opacity:0;
transition:all .35s ease;
}

/* ===============================
   EMPTY / END
================================ */

.empty-state.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
opacity:0.4;
font-size:13px;
}

.empty-state svg{
margin-bottom:6px;
}

.end-watermark{
display:flex;
justify-content:center;
align-items:center;
gap:6px;
opacity:0.4;
font-size:12px;
margin:20px 0;
}

/* ===============================
   OVERLAY / DIALOG
================================ */

.selection-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.1);
backdrop-filter:blur(2px);
z-index:500;
pointer-events:none;
}

.selection-overlay.hidden{
display:none;
}

.delete-dialog-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
z-index:2000;
}

.delete-dialog{
background:white;
padding:20px;
border-radius:14px;
width:260px;
text-align:center;
}

.delete-title{
font-weight:600;
font-size:16px;
margin-bottom:6px;
}

.delete-sub{
font-size:13px;
color:#6b7280;
margin-bottom:16px;
}

.delete-actions{
display:flex;
gap:14px;              /* more space between buttons */
justify-content:space-between;
margin-top:10px; 
}

#cancelDelete{
flex:1;
padding:12px;          /* bigger tap area */
border:none;
border-radius:10px;    /* smoother feel */
font-size:14px; 
background:#f3f4f6;
}

#confirmDelete{
flex:1;
padding:12px;          /* bigger tap area */
border:none;
border-radius:10px;    /* smoother feel */
font-size:14px;
background:#ef4444;
color:white;
}

#selectAllBox{
cursor:pointer;
user-select:none;
}

#selectAllBox:active{
transform:scale(0.9);
}

/* press feedback */
#cancelDelete:active,
#confirmDelete:active{
transform:scale(0.96);
}

.chat-avatar,
.chat-image {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* 🔥 disables save image popup */
  pointer-events: none; /* 🔥 prevents tap/hold on image itself */
}

.chat-search-wrap{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;
  margin-bottom:14px;
}


.chat-search-wrap::before{
  content:"";

  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);

  width:16px;
  height:16px;

   background-size:contain;

  pointer-events:none;
}

#searchBtn{
  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#2563eb;
  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  flex-shrink:0; /* 🔥 prevents squeeze */
}

#searchBtn svg{
  width:18px;
  height:18px;
}

#searchBtn:active{
  transform:scale(0.9);
}

#chatSearch{
  width:100%;
  max-width:420px;

  padding:14px 18px;
  padding-left:44px; /* 🔥 space for icon */

  border-radius:999px;
  border:none;
  outline:none;

  background-color:white;

  /* 🔥 ICON INSIDE INPUT (REAL FIX) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%239ca3af' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:16px center;
  background-size:16px;

  color:#111;
  font-size:14px;

  box-shadow:
    0 4px 20px rgba(0,0,0,0.08);
}

/* FOCUS */
#chatSearch:focus{
  background:white;
  box-shadow:0 0 0 2px rgba(37,99,235,0.25);
}

#chatSearch::placeholder{
color:#9ca3af;
}

.highlight{
background:#2563eb;
color:white;
padding:2px 5px;
border-radius:6px;
box-shadow:0 2px 8px rgba(37,99,235,0.35);
}

.connection-banner{
position:fixed;
top:0;
left:0;
right:0;
z-index:99999;

text-align:center;
font-size:13px;
padding:6px;

color:#111;

transition:.3s;
}

.connection-banner.show{
transform:translateY(0);
}

.connection-banner.hidden{
transform:translateY(-100%);
}

.connection-banner.connecting{
background:#facc15; /* yellow */
}

.connection-banner.offline{
background:#ef4444; /* red */
color:white;
}

.connection-banner.online{
background:#22c55e; /* green */
color:white;
}

.retry-btn{
  margin-left: 10px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.retry-btn:active{
  transform: scale(0.95);
}


.verified-icon{
width:12px;
height:12px;
margin-left:0px;
vertical-align:middle;
fill:#2563eb;
filter:drop-shadow(0 0 4px rgba(37,99,235,0.4));
}

.owner-badge{
  width:12px;
   height:12px;
   margin-left:0px;
  vertical-align:middle;
  filter: drop-shadow(0 0 6px rgba(124,58,237,0.5));
}