/* ═══════════════════════════════════════════════════════════════
   chat4free.one — Chat UI v3 Premium
   Design: Deep dark · Blue #2563EB · Orange #F97316
   Font: Manrope — clean, modern, legible
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Surfaces ─── */
  --bg-base:      #060910;
  --bg-card:      #0C0F1C;
  --bg-raised:    #111629;
  --bg-input:     #141828;
  --bg-hover:     rgba(255,255,255,.04);
  --glass:        rgba(255,255,255,.03);
  --border:       rgba(255,255,255,.07);
  --border-med:   rgba(255,255,255,.11);

  /* ─── Gender cards ─── */
  --card-male:    linear-gradient(145deg,#071b35 0%,#0d3060 100%);
  --card-female:  linear-gradient(145deg,#350716 0%,#5e1230 100%);
  --card-diverse: linear-gradient(145deg,#170535 0%,#350d60 100%);
  --card-offline: rgba(255,255,255,.025);

  /* ─── Accent colours ─── */
  --blue:         #2563EB;
  --blue-lt:      #60A5FA;
  --blue-glow:    rgba(37,99,235,.20);
  --blue-ring:    rgba(37,99,235,.30);
  --orange:       #F97316;
  --orange-lt:    #FB923C;
  --orange-glow:  rgba(249,115,22,.22);

  /* ─── Messages ─── */
  --sent-bg:      linear-gradient(145deg,#E8620A,#F97316);
  --recv-bg:      #111827;
  --recv-border:  rgba(255,255,255,.05);

  /* ─── Text ─── */
  --text:         #EAF0FA;
  --text-sub:     #94A3B8;
  --text-muted:   #4E5E75;

  /* ─── Semantic ─── */
  --green:        #22C55E;
  --red:          #EF4444;
  --yellow:       #F59E0B;

  /* ─── Layout ─── */
  --nav-h:        60px;
  --header-h:     58px;
  --radius-lg:    18px;
  --radius-md:    12px;
  --radius-sm:    8px;
  --radius-pill:  100px;
  --app-h:        100dvh;

  /* ─── Motion ─── */
  --ease:         cubic-bezier(.4,0,.2,1);
  --spring:       cubic-bezier(.34,1.56,.64,1);
  --t-fast:       .15s;
  --t-mid:        .28s;
  --t-slow:       .45s;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
html,body{height:var(--app-h);width:100%;max-width:100vw;overflow:hidden;overscroll-behavior:none;}
body{background:var(--bg-base);color:var(--text);-webkit-font-smoothing:antialiased;}
button{touch-action:manipulation;}
input,select,textarea{font-size:16px!important;font-family:inherit!important;}
:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;border-radius:4px;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:2px;}

/* ── AMBIENT BACKGROUND ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 20%,rgba(37,99,235,.07) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%,rgba(249,115,22,.05) 0%,transparent 60%);
}

/* ── HELPERS ── */
.hidden{display:none!important;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .22s var(--ease) both;}
body.disable-animations *{animation-duration:.01ms!important;transition-duration:.01ms!important;}

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
#app{
  display:block;height:var(--app-h);width:100%;
  position:relative;overflow:hidden;z-index:1;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
#sidebar{
  width:100%;height:100%;display:flex;flex-direction:column;
  background:var(--bg-base);overflow:hidden;position:relative;
  padding-bottom:var(--nav-h);
  transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease),visibility 0s;
}

/* ─── TOP HEADER ─── */
.header-main{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:rgba(6,9,16,.94);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
  flex-shrink:0;min-height:var(--header-h);
}

.logo-section{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;}
.logo-mark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--blue-lt));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px var(--blue-glow);
}
.logo-mark img{width:100%;height:100%;object-fit:cover;}
.logo-name{font-size:17px;font-weight:800;letter-spacing:-.4px;color:#fff;white-space:nowrap;}
.logo-dot{color:var(--blue-lt);}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.my-status-box{display:flex;align-items:center;gap:7px;}

.my-avatar-mini{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--orange));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;overflow:hidden;
  border:2px solid rgba(255,255,255,.10);cursor:pointer;
  transition:transform var(--t-fast) var(--spring);
}
.my-avatar-mini:active{transform:scale(.9);}
.my-avatar-mini img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

.status-select{
  background:rgba(255,255,255,.055);border:1px solid var(--border);
  color:var(--text-sub);font-size:11.5px;font-weight:600;
  padding:5px 9px;border-radius:var(--radius-pill);
  outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  max-width:130px;transition:border-color var(--t-fast);
}
.status-select:focus{border-color:var(--blue-ring);}
.status-select option{background:#111629;}

.icon-btn{
  width:36px;height:36px;border-radius:50%;background:none;border:none;
  color:var(--text-muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color var(--t-fast),background var(--t-fast),transform var(--t-fast) var(--spring);
}
.icon-btn:active{background:rgba(255,255,255,.07);transform:scale(.88);}

/* ─── SEARCH ─── */
.search-bar-container{padding:10px 12px 6px;flex-shrink:0;}
.search-pill{
  background:var(--bg-input);border:1.5px solid var(--border);
  border-radius:var(--radius-pill);padding:9px 14px;
  display:flex;align-items:center;gap:8px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-pill:focus-within{border-color:var(--blue-ring);box-shadow:0 0 0 3px var(--blue-glow);}
.search-pill svg{color:var(--text-muted);flex-shrink:0;}
.search-input{flex:1;background:none;border:none;color:var(--text);font-size:14px;outline:none;min-width:0;-webkit-user-select:text;user-select:text;}
.search-input::placeholder{color:var(--text-muted);}

/* ─── STORIES ─── */
.stories-row{
  display:flex;gap:10px;padding:10px 12px 6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  flex-shrink:0;scrollbar-width:none;
}
.stories-row::-webkit-scrollbar{display:none;}

.story-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;flex-shrink:0;max-width:62px;
  transition:transform var(--t-fast) var(--spring);
}
.story-item:active{transform:scale(.92);}

.story-avatar-wrapper{
  width:56px;height:56px;border-radius:50%;padding:2.5px;
  background:linear-gradient(135deg,var(--orange),#A855F7,var(--blue-lt));
  position:relative;
}
.story-avatar-wrapper.male   {background:linear-gradient(135deg,var(--blue),var(--blue-lt));}
.story-avatar-wrapper.female {background:linear-gradient(135deg,#EC4899,#F43F5E);}
.story-avatar-wrapper.diverse{background:linear-gradient(135deg,#A855F7,#7C3AED);}
.story-avatar-wrapper.roulette-active{background:linear-gradient(135deg,gold,var(--orange));box-shadow:0 0 14px var(--orange-glow);}

.story-avatar{
  width:100%;height:100%;border-radius:50%;
  background:var(--bg-raised);border:2px solid var(--bg-base);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:#fff;overflow:hidden;
}
.story-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

.story-add-btn{
  position:absolute;bottom:0;right:0;width:18px;height:18px;border-radius:50%;
  background:var(--blue-lt);color:#000;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-base);
}
.story-name{font-size:10px;color:var(--text-muted);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-weight:600;}

@keyframes storyPulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.5)}50%{box-shadow:0 0 0 8px rgba(249,115,22,0)}}
.story-pulse .story-avatar-wrapper{animation:storyPulse 1.4s ease 2;}

/* ─── AVATAR GALLERY ─── */
.avatar-gallery-section{flex-shrink:0;padding:6px 12px 2px;overflow:hidden;}
.avatar-gallery-header{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.gallery-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.6);animation:livePulse 2s ease infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.avatar-gallery-track{display:flex;gap:8px;height:74px;position:relative;overflow:hidden;align-items:center;}
.gallery-slot{flex-shrink:0;width:54px;height:54px;position:relative;cursor:pointer;transition:transform var(--t-fast) var(--spring);}
.gallery-slot:active{transform:scale(.88);}
.gallery-slot-ring{width:54px;height:54px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--orange),#A855F7,var(--blue-lt));animation:ringGlow 4s linear infinite;}
.gallery-slot-ring.male   {background:linear-gradient(135deg,var(--blue),var(--blue-lt));}
.gallery-slot-ring.female {background:linear-gradient(135deg,#EC4899,#F43F5E);}
.gallery-slot-ring.diverse{background:linear-gradient(135deg,#A855F7,#7C3AED);}
@keyframes ringGlow{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.gallery-slot-inner{width:100%;height:100%;border-radius:50%;background:var(--bg-raised);border:2px solid var(--bg-base);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;overflow:hidden;}
.gallery-slot-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.gallery-slot-status{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--green);border:2.5px solid var(--bg-base);}
.gallery-slot-name{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text-muted);white-space:nowrap;max-width:56px;overflow:hidden;text-overflow:ellipsis;text-align:center;font-weight:600;pointer-events:none;}
@keyframes slotIn{from{opacity:0;transform:translateY(-14px) scale(.82)}to{opacity:1;transform:none}}
@keyframes slotOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px) scale(.82)}}
.gallery-slot.entering{animation:slotIn .32s var(--spring) both;}
.gallery-slot.leaving {animation:slotOut .22s var(--ease) both;}
@keyframes avatarPop{0%{box-shadow:0 0 0 0 rgba(249,115,22,.7)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:none}}
.gallery-slot.avatar-updated .gallery-slot-ring{animation:avatarPop .9s ease,ringGlow 4s linear infinite;}

/* ─── AD BANNER ─── */
.ad-container-wrapper{padding:4px 12px;flex-shrink:0;}
.ad-banner{display:flex;align-items:center;gap:7px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.18);border-radius:var(--radius-pill);padding:5px 12px 5px 5px;text-decoration:none;width:100%;overflow:hidden;transition:opacity var(--t-fast);}
.ad-banner img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.ad-text-content{flex:1;font-size:11px;font-weight:700;color:var(--orange-lt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}

/* ─── SECTION TITLE ─── */
.list-section-title{
  padding:8px 14px 4px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.count-badge{background:rgba(255,255,255,.07);border:1px solid var(--border);padding:2px 10px;border-radius:var(--radius-pill);font-size:10.5px;color:var(--text-sub);}

/* ─── USER LIST ─── */
.user-list{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:4px 10px 20px;display:flex;flex-direction:column;gap:5px;
  min-height:0;-webkit-overflow-scrolling:touch;
}

.empty-list{text-align:center;color:var(--text-muted);font-size:14px;padding:44px 20px;font-weight:500;}

/* ─── USER CARD ─── */
.user-card{
  display:flex;align-items:center;padding:10px 12px;
  border-radius:var(--radius-lg);background:var(--card-offline);
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),opacity var(--t-fast);
  position:relative;overflow:hidden;width:100%;flex-shrink:0;
  -webkit-user-select:none;user-select:none;
}

/* Left accent stripe */
.user-card::after{
  content:'';position:absolute;left:0;top:8px;bottom:8px;
  width:3px;border-radius:0 2px 2px 0;background:transparent;
  transition:background var(--t-fast);
}
.user-card.male  {background:var(--card-male);  border-color:rgba(37,99,235,.20);}
.user-card.male::after  {background:var(--blue-lt);}
.user-card.female{background:var(--card-female);border-color:rgba(236,72,153,.20);}
.user-card.female::after{background:#EC4899;}
.user-card.diverse{background:var(--card-diverse);border-color:rgba(168,85,247,.20);}
.user-card.diverse::after{background:#A855F7;}
.user-card.active{border-color:var(--blue-ring);box-shadow:0 0 0 1px var(--blue-ring);}
.user-card.is-offline{opacity:.45;filter:grayscale(.6);}
.user-card.is-blocked{opacity:.25;filter:grayscale(1);}
.user-card.unread .user-name{color:#fff;}
.user-card:active{transform:scale(.975);}

/* ─── AVATAR ─── */
.avatar-container{position:relative;margin-right:11px;flex-shrink:0;}
.avatar{
  width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:var(--bg-raised);border:2px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;color:#fff;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

.status-dot{
  position:absolute;bottom:1px;right:1px;
  width:11px;height:11px;border-radius:50%;border:2.5px solid var(--bg-base);
}
.status-dot.online {background:var(--green);}
.status-dot.offline{background:var(--text-muted);}
.status-dot.away   {background:var(--yellow);}

.match-percentage{
  position:absolute;top:-4px;right:-5px;z-index:3;
  background:linear-gradient(135deg,var(--orange),#A855F7);
  color:#fff;font-size:9px;font-weight:800;
  padding:1.5px 5px;border-radius:8px;border:2px solid var(--bg-base);
  line-height:1.3;
}

/* ─── USER CARD DETAILS ─── */
.user-details{flex:1;min-width:0;}
.user-info-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:3px;}
.user-name{
  font-size:13.5px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.gender-icon{font-size:11px;flex-shrink:0;}
.male-icon  {color:var(--blue-lt);}
.female-icon{color:#EC4899;}
.diverse-icon{color:#A855F7;}
.age-badge{background:rgba(255,255,255,.09);color:var(--text-muted);font-size:10px;font-weight:700;padding:1px 6px;border-radius:7px;flex-shrink:0;}
.country-flag{font-size:13px;flex-shrink:0;}
.msg-time-meta{font-size:10.5px;color:var(--text-muted);flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap;}

.user-preview-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.user-status-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;}

.unread-count-badge{
  background:var(--orange);color:#fff;font-size:10px;font-weight:800;
  min-width:18px;height:18px;border-radius:50%;
  display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:0 4px;
}

.compatibility-bar{height:2px;background:rgba(255,255,255,.07);border-radius:2px;margin-top:6px;overflow:hidden;}
.compatibility-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue-lt),var(--orange));transition:width .5s var(--ease);}

/* ─── BOTTOM NAV ─── */
.bottom-nav{
  position:absolute;bottom:0;left:0;width:100%;height:var(--nav-h);
  background:rgba(6,9,16,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;
  padding-bottom:env(safe-area-inset-bottom,0px);z-index:25;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-muted);background:none;border:none;cursor:pointer;
  width:70px;position:relative;padding:4px 0;
  transition:color var(--t-fast),transform var(--t-fast) var(--spring);
}
.nav-item svg{width:22px;height:22px;transition:stroke-width var(--t-fast);}
.nav-item span{font-size:9.5px;font-weight:600;letter-spacing:.15px;}
.nav-item.active{color:var(--blue-lt);}
.nav-item.active svg{stroke-width:2.2;filter:drop-shadow(0 0 5px rgba(96,165,250,.4));}
.nav-item:active{transform:scale(.88);}
.nav-badge{
  position:absolute;top:0;right:8px;background:var(--orange);color:#fff;
  font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:50%;
  display:flex;justify-content:center;align-items:center;
  border:2px solid var(--bg-base);padding:0 3px;
}

/* ─── SETTINGS PANEL ─── */
.tab-panel{
  position:absolute;inset:0;bottom:var(--nav-h);
  background:var(--bg-base);z-index:30;
  overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;flex-direction:column;
}
.tab-panel.active{display:flex;}
.settings-inner{padding:16px 14px 32px;display:flex;flex-direction:column;gap:14px;}

.settings-profile-section{
  display:flex;align-items:center;gap:14px;
  background:var(--bg-card);border:1px solid var(--border-med);border-radius:20px;padding:18px;
}
.settings-avatar-wrap{position:relative;flex-shrink:0;}
.settings-avatar{
  width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--orange));
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#fff;
  border:2.5px solid rgba(255,255,255,.12);
}
.settings-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.avatar-edit-btn{
  position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;
  background:var(--blue-lt);color:#000;border:2.5px solid var(--bg-base);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--t-fast) var(--spring);
}
.avatar-edit-btn:active{transform:scale(.85);}
.settings-profile-info{flex:1;min-width:0;}
.settings-username{font-size:17px;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:-.3px;}
.settings-gender{font-size:12px;color:var(--text-muted);}

.settings-section{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--radius-lg);padding:0 16px;}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--border);}
.setting-row:last-child{border-bottom:none;}
.setting-info h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:2px;}
.setting-info p {color:var(--text-muted);font-size:11.5px;}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.10);transition:var(--t-mid);border-radius:26px;border:1px solid var(--border-med);}
.slider::before{position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:var(--text-muted);transition:var(--t-mid);border-radius:50%;}
input:checked+.slider{background:rgba(37,99,235,.22);border-color:var(--blue-lt);}
input:checked+.slider::before{transform:translateX(20px);background:var(--blue-lt);box-shadow:0 0 8px var(--blue-glow);}

.settings-actions{display:flex;flex-direction:column;gap:10px;}
.settings-btn{width:100%;padding:14px;border-radius:var(--radius-lg);border:none;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter var(--t-fast),transform var(--t-fast) var(--spring);}
.settings-btn:active{transform:scale(.97);}
.settings-btn-logout{background:rgba(239,68,68,.10);color:var(--red);border:1px solid rgba(239,68,68,.25);}

/* ══════════════════════════════════════════
   CHAT STAGE
══════════════════════════════════════════ */
#chat-stage{
  position:absolute;inset:0;display:flex;flex-direction:column;
  z-index:30;background:var(--bg-base);
  transform:translateX(100%);transition:transform var(--t-mid) var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Subtle texture */
#chat-stage::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,rgba(37,99,235,.03) 0%,transparent 60%);
}

body.chat-active #sidebar{
  transform:translateX(-22%);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease),visibility 0s var(--t-mid);
}
body.chat-active #chat-stage{transform:translateX(0);box-shadow:-20px 0 50px rgba(0,0,0,.60);}
body.chat-active .fab-main,.body.chat-active .quick-actions-menu{opacity:0!important;pointer-events:none!important;}

/* ─── CHAT HEADER ─── */
.chat-header{
  display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;
  background:rgba(6,9,16,.96);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);flex-shrink:0;min-height:var(--header-h);z-index:5;
}
.back-btn{color:var(--blue-lt);flex-shrink:0;}
.chat-partner-trigger{flex:1;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0;overflow:hidden;}
.chat-partner-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--bg-raised);border:2px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;overflow:hidden;
}
.chat-partner-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.chat-partner-info{flex:1;min-width:0;}
.chat-name{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.chat-sub-status{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px;margin-top:2px;}

/* Animated status pulse */
.status-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:sPulse 2.4s ease infinite;}
@keyframes sPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}

.chat-header-actions{display:flex;gap:4px;flex-shrink:0;}
.header-action-btn{
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);color:var(--red);
}

/* ─── IN-CHAT AD ─── */
.in-chat-ad{
  display:flex;align-items:center;gap:9px;padding:7px 14px;
  background:rgba(249,115,22,.06);border-bottom:1px solid rgba(249,115,22,.16);
  text-decoration:none;flex-shrink:0;
}
.in-chat-ad img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.in-chat-ad-content{flex:1;min-width:0;}
.in-chat-ad-title{color:#fff;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px;}
.in-chat-ad-sub{color:var(--orange-lt);font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;}
.in-chat-ad-btn{background:var(--sent-bg);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px;}

/* ─── MESSAGES ─── */
#messages-container{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:14px 14px 6px;display:flex;flex-direction:column;gap:6px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  -webkit-user-select:text;user-select:text;min-height:0;
}

/* ── MESSAGE ROW ── */
.msg-row{
  display:flex;width:100%;align-items:flex-end;gap:7px;
  opacity:0;transform:translateY(8px);
  animation:msgIn .26s var(--ease) forwards;
}
@keyframes msgIn{to{opacity:1;transform:none}}
.msg-row.sent    {justify-content:flex-end;}
.msg-row.received{justify-content:flex-start;}

/* ── BUBBLE ── */
.bubble{
  max-width:78%;padding:9px 13px;font-size:14.5px;line-height:1.5;
  border-radius:18px;position:relative;word-break:break-word;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  -webkit-user-select:text;user-select:text;
}
.sent .bubble{
  background:var(--sent-bg);border-bottom-right-radius:5px;color:#fff;
}
.received .bubble{
  background:var(--recv-bg);border-bottom-left-radius:5px;
  color:var(--text);border:1px solid var(--recv-border);
}

.msg-time{font-size:10px;opacity:.6;margin-top:5px;text-align:right;display:block;font-variant-numeric:tabular-nums;}
.msg-ticks{font-weight:700;margin-left:3px;font-size:11px;transition:color var(--t-fast);}
.msg-ticks.sent      {color:rgba(255,255,255,.5);}
.msg-ticks.delivered {color:rgba(255,255,255,.8);}
.msg-ticks.read      {color:#fff;text-shadow:0 0 6px rgba(255,255,255,.4);}

.bubble img{max-width:230px;max-height:280px;width:100%;height:auto;object-fit:contain;border-radius:11px;cursor:zoom-in;margin-top:4px;display:block;}

/* ── REPLY QUOTE ── */
.reply-quote{
  background:rgba(0,0,0,.25);border-left:3px solid var(--blue-lt);
  padding:5px 10px;border-radius:8px;font-size:12px;color:rgba(255,255,255,.65);
  margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── REACTION MENU ── */
.reaction-menu{position:absolute;top:-38px;display:none;gap:8px;background:rgba(8,11,20,.97);backdrop-filter:blur(12px);border:1px solid var(--border-med);padding:6px 12px;border-radius:22px;z-index:10;box-shadow:0 6px 24px rgba(0,0,0,.5);}
.received:hover .reaction-menu{display:flex;left:8px;}
.sent:hover .reaction-menu{display:flex;right:8px;}
.reaction-btn{background:none;border:none;cursor:pointer;font-size:18px;transition:transform .15s;}
.reaction-btn:hover{transform:scale(1.35);}
.active-reaction{position:absolute;bottom:-10px;right:8px;background:rgba(8,11,20,.95);border:1px solid var(--border);border-radius:50%;padding:2px 5px;font-size:12px;}

.msg-action-btn{
  background:rgba(255,255,255,.08);border:none;border-radius:50%;
  width:28px;height:28px;display:none;justify-content:center;align-items:center;
  cursor:pointer;align-self:center;flex-shrink:0;font-size:14px;color:#fff;margin:0 3px;
}
.msg-row:hover .msg-action-btn{display:flex;}

/* ── AUDIO PLAYER ── */
.custom-audio-player{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);padding:6px 10px;border-radius:22px;width:210px;max-width:100%;border:1px solid rgba(255,255,255,.08);margin:3px 0;}
.custom-audio-btn{width:32px;height:32px;border-radius:50%;background:var(--blue-lt);color:#000;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;flex-shrink:0;font-size:13px;box-shadow:0 2px 8px var(--blue-glow);transition:transform .15s;padding-left:2px;}
.custom-audio-btn.playing{padding-left:0;background:var(--orange);box-shadow:0 2px 8px var(--orange-glow);}
.custom-audio-btn:active{transform:scale(.88);}
.custom-audio-track{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:3px;position:relative;overflow:hidden;cursor:pointer;}
.custom-audio-bar{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:3px;transition:width .1s linear;}
.sent .custom-audio-bar{background:rgba(255,255,255,.8);}
.received .custom-audio-bar{background:var(--blue-lt);}
.custom-audio-time{font-size:10.5px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;font-weight:600;min-width:30px;text-align:right;}

/* ── IMAGE CONSENT ── */
.img-consent-box{background:rgba(37,99,235,.06);border:1px dashed var(--blue-lt);padding:18px;text-align:center;border-radius:11px;cursor:pointer;color:var(--blue-lt);font-weight:600;font-size:13px;}

/* ── DATE DIVIDER ── */
.msg-date-divider{text-align:center;margin:12px 0;position:relative;}
.msg-date-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border);}
.msg-date-divider span{background:var(--bg-base);padding:3px 12px;border-radius:11px;font-size:11px;color:var(--text-muted);font-weight:600;position:relative;border:1px solid var(--border);}

/* ── TYPING INDICATOR ── */
#typing-indicator-box{padding:0 14px 6px;flex-shrink:0;}
.typing-bubble{display:inline-flex;gap:5px;padding:10px 14px;align-items:center;border-radius:18px 18px 18px 4px;background:var(--recv-bg);}
.dot{width:6px;height:6px;background:var(--text-muted);border-radius:50%;animation:dotJump 1.4s ease-in-out infinite both;}
.dot:nth-child(1){animation-delay:-.32s}
.dot:nth-child(2){animation-delay:-.16s}
@keyframes dotJump{0%,80%,100%{transform:scale(0)}40%{transform:scale(1);background:var(--blue-lt);}}

/* ── ICEBREAKER ── */
.icebreaker-box{text-align:center;margin:22px 0 8px;flex-shrink:0;}
.btn-icebreaker{background:rgba(37,99,235,.09);border:1px solid rgba(37,99,235,.28);color:var(--blue-lt);padding:11px 24px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast) var(--spring);}
.btn-icebreaker:active{transform:scale(.96);}

/* ── CHAT BOTTOM ── */
.chat-bottom-area{
  background:rgba(6,9,16,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-top:1px solid var(--border);
  padding:6px 10px calc(env(safe-area-inset-bottom,0px) + 6px);
  display:flex;flex-direction:column;gap:5px;z-index:10;flex-shrink:0;
}

/* Block overlay */
#block-overlay{display:flex;justify-content:center;align-items:center;padding:10px;background:rgba(239,68,68,.05);border-radius:var(--radius-md);border:1px solid rgba(239,68,68,.16);}
.unblock-text-btn{background:transparent;border:none;color:var(--red);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;}

/* Reply bar */
#reply-preview-box{
  display:none;align-items:center;justify-content:space-between;
  background:rgba(37,99,235,.07);border-left:3px solid var(--blue-lt);
  padding:6px 12px;border-radius:var(--radius-sm);font-size:12px;color:rgba(255,255,255,.55);
}
#reply-close{cursor:pointer;color:var(--text-muted);background:none;border:none;font-size:16px;flex-shrink:0;margin-left:8px;padding:0 4px;}

/* Spam bar */
#spam-warning-bar{display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;}
#spam-warning-bar.warn {display:flex;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.28);color:var(--yellow);}
#spam-warning-bar.muted{display:flex;background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.28);color:var(--red);}
#spam-countdown{margin-left:auto;background:rgba(239,68,68,.18);border-radius:7px;padding:2px 10px;font-variant-numeric:tabular-nums;font-size:14px;font-weight:800;}

/* ── CHAT FORM ── */
#chat-form{
  display:flex;align-items:flex-end;gap:5px;position:relative;width:100%;
}
#chat-form.is-muted .input-pill,
#chat-form.is-muted #send-btn{opacity:.4;pointer-events:none;}
@keyframes doShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
#chat-form.do-shake{animation:doShake .38s var(--ease);}

/* ── EMOJI PICKER ── */
#emoji-picker{
  position:absolute;bottom:calc(100% + 10px);left:0;
  width:min(calc(100vw - 20px),300px);max-height:200px;
  background:rgba(8,11,20,.99);backdrop-filter:blur(28px);
  border:1px solid var(--border-med);border-radius:var(--radius-lg);
  padding:10px;z-index:100;overflow-y:auto;display:none;
  box-shadow:0 -8px 40px rgba(0,0,0,.55);
}
#emoji-picker.show{display:block;}
#emoji-picker::-webkit-scrollbar{display:none;}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.emoji-item{font-size:22px;text-align:center;cursor:pointer;padding:5px;border-radius:9px;transition:background var(--t-fast);-webkit-user-select:none;user-select:none;}
.emoji-item:hover{background:var(--bg-hover);}

/* ── INPUT PILL ── */
.input-pill{
  flex:1;background:var(--bg-input);border:1.5px solid var(--border);
  border-radius:26px;padding:8px 8px 8px 14px;
  display:flex;align-items:center;gap:5px;min-width:0;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input-pill:focus-within{border-color:rgba(249,115,22,.40);box-shadow:0 0 0 3px rgba(249,115,22,.09);}
.chat-input{
  flex:1;background:transparent;border:none;color:var(--text);padding:1px 0;
  font-size:15px;font-family:inherit;outline:none;max-height:100px;resize:none;
  line-height:1.45;-webkit-user-select:text;user-select:text;min-width:0;
}
.chat-input::placeholder{color:rgba(255,255,255,.28);}

/* ── ICON BUTTON (form) ── */
#chat-form .icon-btn {ackground:none;border:none;color:var(--text-muted);width:38px;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;flex-shrink:0;border-radius:50%;touch-action:manipulation;transition:color var(--t-fast),background var(--t-fast),transform var(--t-fast) var(--spring);}
#emoji-btn:hover,#image-upload-btn:hover{color:var(--orange-lt);}
#mic-btn:hover{color:var(--red);}
.icon-btn:active{transform:scale(.88);background:rgba(255,255,255,.06);}

/* ── RECORDING UI ── */
#recording-ui{flex:1;display:flex;align-items:center;justify-content:space-between;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.20);border-radius:22px;padding:0 14px;margin-right:4px;height:42px;min-width:0;}
.record-indicator{display:flex;align-items:center;gap:8px;color:var(--red);font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;flex-shrink:0;}
.record-dot{width:9px;height:9px;background:var(--red);border-radius:50%;animation:recBlink 1s ease-in-out infinite;}
@keyframes recBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.75)}}
.slide-cancel{color:var(--text-muted);font-size:12px;font-weight:500;animation:slideL 1.8s ease-in-out infinite;white-space:nowrap;}
@keyframes slideL{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(-5px);opacity:1}}

/* ── SEND BUTTON ── */
.send-btn-circle{
  width:42px;height:42px;border-radius:50%;border:none;
  background:var(--sent-bg);color:#fff;
  display:flex;justify-content:center;align-items:center;cursor:pointer;flex-shrink:0;
  box-shadow:0 3px 14px var(--orange-glow);
  transition:box-shadow var(--t-fast),transform var(--t-fast) var(--spring),opacity var(--t-fast);
  touch-action:manipulation;padding-left:1px;
}
.send-btn-circle:hover:not(:disabled){box-shadow:0 4px 20px rgba(249,115,22,.5);transform:scale(1.06);}
.send-btn-circle:active:not(:disabled){transform:scale(.90);}
.send-btn-circle:disabled{opacity:.32;cursor:default;box-shadow:none;}

/* ── FAB ── */
.fab-main{
  position:fixed;bottom:calc(var(--nav-h) + 14px);right:14px;
  width:50px;height:50px;border-radius:50%;
  background:var(--sent-bg);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 18px var(--orange-glow);z-index:100;
  transition:transform var(--t-mid) var(--spring),box-shadow var(--t-fast);touch-action:manipulation;
}
.fab-main:active{transform:scale(.88) rotate(45deg);}
.fab-main.rotated{transform:rotate(45deg);box-shadow:0 4px 24px rgba(249,115,22,.5);}

.quick-actions-menu{
  position:fixed;bottom:calc(var(--nav-h) + 74px);right:14px;
  display:flex;flex-direction:column;gap:10px;z-index:99;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-mid),transform var(--t-mid) var(--ease);
  transform:translateY(16px) scale(.94);
}
.quick-actions-menu.show{opacity:1;pointer-events:all;transform:translateY(0) scale(1);}
.quick-action-btn{
  width:46px;height:46px;border-radius:50%;
  background:rgba(8,11,20,.98);border:1px solid var(--border-med);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.45);touch-action:manipulation;
  transition:transform var(--t-fast) var(--spring);backdrop-filter:blur(12px);
}
.quick-action-btn:active{transform:scale(.88);}

/* ══════════════════════════════════════════
   CONNECTION BANNER
══════════════════════════════════════════ */
.connection-banner{
  position:fixed;top:0;left:0;width:100%;padding:10px;text-align:center;
  font-size:12.5px;font-weight:700;z-index:9999;
  transform:translateY(-100%);transition:transform .32s var(--ease);
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.connection-banner.show{transform:translateY(0);}
.connection-banner.offline{background:rgba(239,68,68,.95);color:#fff;border-bottom:1px solid var(--red);backdrop-filter:blur(12px);}
.connection-banner.online {background:rgba(37,99,235,.95);color:#fff;border-bottom:1px solid var(--blue-lt);backdrop-filter:blur(12px);}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-overlay,#exit-confirm-overlay,#fullscreen-img-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:5000;
  display:flex;justify-content:center;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity var(--t-mid);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.modal-overlay.active,.modal-overlay.active #exit-confirm-overlay,
#exit-confirm-overlay.active,#fullscreen-img-modal.active{opacity:1;pointer-events:all;}
#fullscreen-img-modal{align-items:center;padding:0;}

.modal-card,#exit-confirm-card{
  background:var(--bg-card);border:1px solid var(--border-med);
  border-radius:28px 28px 0 0;padding:24px 18px calc(env(safe-area-inset-bottom,0px) + 28px);
  width:100%;max-width:480px;text-align:center;
  transform:translateY(30px);transition:transform var(--t-mid) var(--spring);
  position:relative;box-shadow:0 -12px 50px rgba(0,0,0,.65);
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* Pill handle */
.modal-card::before,#exit-confirm-card::before{
  content:'';display:block;width:36px;height:4px;
  background:rgba(255,255,255,.14);border-radius:3px;margin:0 auto 20px;
}
.modal-overlay.active .modal-card,
#exit-confirm-overlay.active #exit-confirm-card{transform:translateY(0);}

.close-modal{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.07);border:1px solid var(--border);
  color:var(--text-muted);font-size:17px;cursor:pointer;
  width:32px;height:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;
}

/* ─── QUICK INFO ─── */
.qi-avatar{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#A855F7);margin:0 auto 12px;display:flex;justify-content:center;align-items:center;font-size:30px;font-weight:700;color:#fff;border:3px solid rgba(255,255,255,.10);overflow:hidden;}
.qi-avatar img{width:100%;height:100%;object-fit:cover;}
.qi-name{font-size:20px;font-weight:800;margin-bottom:4px;color:#fff;letter-spacing:-.3px;}
.qi-bio{font-size:13px;color:var(--text-muted);margin-bottom:14px;line-height:1.55;}
.qi-tags{display:flex;justify-content:center;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.qi-tag{background:rgba(255,255,255,.05);padding:5px 14px;border-radius:var(--radius-pill);font-size:12.5px;color:var(--blue-lt);border:1px solid rgba(37,99,235,.20);display:flex;align-items:center;gap:5px;}
.btn-action{padding:13px;border-radius:var(--radius-lg);width:100%;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter var(--t-fast),transform var(--t-fast) var(--spring);}
.btn-action:active{transform:scale(.97);}
.btn-block  {background:rgba(239,68,68,.09);color:var(--red);border:1px solid rgba(239,68,68,.24);}
.btn-unblock{background:rgba(37,99,235,.09);color:var(--blue-lt);border:1px solid rgba(37,99,235,.24);}
.btn-danger {background:rgba(239,68,68,.07);color:var(--red);border:1px solid rgba(239,68,68,.18);margin-top:10px;}

/* ─── STORY MODAL ─── */
.story-modal-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--orange));margin:0 auto 12px;display:flex;justify-content:center;align-items:center;font-size:32px;color:#fff;overflow:hidden;border:3px solid rgba(255,255,255,.10);}
.story-modal-avatar img{width:100%;height:100%;object-fit:cover;}
.story-modal-name{font-size:19px;font-weight:800;color:#fff;margin-bottom:3px;}
.story-modal-time{font-size:12px;color:var(--text-muted);margin-bottom:14px;}
.story-modal-content{font-size:14px;color:var(--text-sub);line-height:1.6;background:var(--glass);border-radius:var(--radius-md);padding:12px 16px;text-align:left;margin-bottom:4px;}

/* ─── EXIT MODAL ─── */
#exit-confirm-overlay{align-items:flex-end;}
.exit-icon-ring{width:68px;height:68px;border-radius:50%;background:rgba(239,68,68,.10);border:2px solid rgba(239,68,68,.30);display:flex;justify-content:center;align-items:center;margin:0 auto 18px;font-size:28px;animation:exitP 2.2s ease infinite;}
@keyframes exitP{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.25)}50%{box-shadow:0 0 0 12px transparent}}
.exit-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px;}
.exit-subtitle{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:24px;}
.exit-btn-stay{width:100%;padding:14px;border-radius:var(--radius-lg);border:none;background:linear-gradient(135deg,var(--blue-lt),var(--blue));color:#fff;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 18px var(--blue-glow);transition:filter var(--t-fast),transform var(--t-fast) var(--spring);}
.exit-btn-stay:active{transform:scale(.97);}
.exit-btn-leave{width:100%;padding:12px;border-radius:var(--radius-lg);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.24);color:var(--red);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;}
.exit-warning-strip{display:flex;align-items:center;gap:8px;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.20);border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;color:var(--yellow);margin-top:16px;text-align:left;}

/* ─── FULLSCREEN IMAGE ─── */
#fullscreen-img-modal img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:12px;}
.btn-close-fullscreen{position:absolute;top:18px;right:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.12);width:40px;height:40px;border-radius:50%;font-size:17px;cursor:pointer;display:flex;justify-content:center;align-items:center;}

/* ══════════════════════════════════════════
   TIME THEMES
══════════════════════════════════════════ */
.time-indicator{position:fixed;top:calc(env(safe-area-inset-top,0px) + 62px);right:10px;z-index:200;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:3px 10px;font-size:10px;color:var(--text-muted);pointer-events:none;}
body.time-morning{background:linear-gradient(135deg,#141e30,#2d4a5e 50%,#1e3a5f);}
body.time-night  {background:linear-gradient(135deg,#060910,#0c1020 50%,#08091a);}

/* ══════════════════════════════════════════
   LANDSCAPE COMPACT
══════════════════════════════════════════ */
@media(orientation:landscape)and(max-height:500px){
  .header-main,.chat-header{min-height:46px;padding-top:calc(env(safe-area-inset-top,0px)+5px);padding-bottom:5px;}
  .stories-row,.avatar-gallery-section{padding-top:4px;padding-bottom:2px;}
  #messages-container{padding:6px 12px;}
  .bubble{font-size:13.5px;}
}


/* ═══════════════════════════════════════════════════════════════
   WHATSAPP-STYLE CHAT LIST & PROFESSIONAL BUBBLES v4.1
   Added: Wake Lock, Reactions, WhatsApp Ordering, Premium Bubbles
   ═══════════════════════════════════════════════════════════════ */

/* ─── WHATSAPP-STYLE UNREAD BADGE ─── */
.unread-count-badge{
  background:var(--green);color:#fff;font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:50%;
  display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:0 5px;
  box-shadow:0 2px 6px rgba(34,197,94,.35);
  animation:badgePop .3s var(--spring);
}
@keyframes badgePop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ─── WHATSAPP-STYLE CHAT LIST ORDERING HIGHLIGHT ─── */
.user-card.recent-msg{
  background:rgba(37,99,235,.06);
  border-color:rgba(37,99,235,.18);
}
.user-card.recent-msg .user-name{
  color:#fff;font-weight:800;
}
.user-card.recent-msg .user-status-text{
  color:var(--text);
  font-weight:600;
}

/* ─── PROFESSIONAL MESSAGE BUBBLES ─── */
.bubble{
  max-width:78%;padding:10px 14px;font-size:14.5px;line-height:1.55;
  border-radius:18px;position:relative;word-break:break-word;
  box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 1px rgba(0,0,0,.08);
  -webkit-user-select:text;user-select:text;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.bubble:hover{transform:translateY(-1px);}
.sent .bubble{
  background:linear-gradient(145deg,#E8620A,#F97316);
  border-bottom-right-radius:5px;color:#fff;
  box-shadow:0 3px 12px rgba(249,115,22,.25),0 0 0 1px rgba(255,255,255,.06) inset;
}
.received .bubble{
  background:linear-gradient(145deg,#141b2d,#1a2332);
  border-bottom-left-radius:5px;
  color:var(--text);border:1px solid rgba(255,255,255,.06);
  box-shadow:0 3px 12px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.03) inset;
}

/* ─── REACTIONS ─── */
.reactions-bar{
  display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;align-items:center;
}
.reaction-pill{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:2px 7px;font-size:12px;cursor:pointer;
  transition:all .15s var(--spring);user-select:none;
  backdrop-filter:blur(4px);
}
.reaction-pill:hover{transform:scale(1.15);background:rgba(255,255,255,.14);}
.reaction-pill.active{background:rgba(249,115,22,.18);border-color:rgba(249,115,22,.4);}
.reaction-pill .rcount{font-size:9px;font-weight:700;color:rgba(255,255,255,.7);margin-left:1px;}
.reaction-pill.active .rcount{color:#fff;}

/* Reaction chooser popup */
.reaction-chooser{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.9);
  display:none;gap:6px;background:rgba(8,11,20,.98);backdrop-filter:blur(16px);
  border:1px solid var(--border-med);padding:6px 10px;border-radius:22px;z-index:15;
  box-shadow:0 8px 32px rgba(0,0,0,.55);opacity:0;transition:all .18s var(--ease);
  pointer-events:none;
}
.msg-row:hover .reaction-chooser,
.bubble:hover .reaction-chooser{
  display:flex;opacity:1;transform:translateX(-50%) scale(1);pointer-events:all;
}
.reaction-chooser-btn{
  background:none;border:none;cursor:pointer;font-size:18px;padding:3px 5px;
  border-radius:50%;transition:transform .15s,background .15s;line-height:1;
}
.reaction-chooser-btn:hover{transform:scale(1.35);background:rgba(255,255,255,.1);}

/* ─── MESSAGE STATUS (WhatsApp ticks) ─── */
.msg-meta-row{
  display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px;
}
.msg-ticks{font-weight:700;font-size:11px;transition:color var(--t-fast);letter-spacing:-1px;}
.msg-ticks.sent{color:rgba(255,255,255,.45);}
.msg-ticks.delivered{color:rgba(255,255,255,.75);}
.msg-ticks.read{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.4);}

/* ─── WAKE LOCK INDICATOR ─── */
.wake-lock-indicator{
  position:fixed;bottom:calc(var(--nav-h) + 70px);left:14px;z-index:90;
  background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.3);
  border-radius:var(--radius-pill);padding:5px 12px;font-size:10px;
  color:var(--blue-lt);font-weight:700;display:none;align-items:center;gap:5px;
  backdrop-filter:blur(8px);animation:fadeIn .3s var(--ease);
}
.wake-lock-indicator.show{display:flex;}
.wake-lock-indicator svg{width:12px;height:12px;}

/* ─── TYPING INDICATOR ENHANCED ─── */
.typing-bubble{
  display:inline-flex;gap:4px;padding:10px 14px;align-items:center;
  border-radius:18px 18px 18px 4px;
  background:linear-gradient(145deg,#141b2d,#1a2332);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ═══════════════════════════════════════════════════════════
   INLINE TOOLBAR — Gifts, Games, Icebreakers inside chat
   Responsive for all phones · No FAB
   ═══════════════════════════════════════════════════════════ */
.inline-toolbar{
  display:flex;align-items:center;gap:6px;
  padding:0 10px 6px;
  flex-shrink:0;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  mask-image:linear-gradient(to right,transparent,black 8px,black calc(100% - 8px),transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 8px,black calc(100% - 8px),transparent);
}
.inline-toolbar::-webkit-scrollbar{display:none;}

.toolbar-btn{
  display:flex;align-items:center;gap:5px;
  flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:6px 12px;
  color:var(--text-sub);font-size:12px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:all var(--t-fast) var(--spring);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.toolbar-btn:hover{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.25);color:var(--orange-lt);transform:translateY(-1px);}
.toolbar-btn:active{transform:scale(.92);background:rgba(249,115,22,.15);}
.toolbar-btn span{font-size:11px;}

/* Hide toolbar when chat is blocked */
#chat-form.is-muted ~ .inline-toolbar,
#chat-form.hidden ~ .inline-toolbar,
#block-overlay:not(.hidden) ~ .inline-toolbar{display:none;}

/* Compact mode for very small screens */
@media(max-width:360px){
  .toolbar-btn{padding:5px 8px;font-size:11px;}
  .toolbar-btn span{display:none;}
}


/* ═══════════════════════════════════════════════════════════
   GENDER STYLES — Couple & LGBTQ+ (Rainbow)
   ═══════════════════════════════════════════════════════════ */

/* ─── COUPLE ─── */
:root{
  --couple-pink:    #FF69B4;
  --couple-pink-lt: #FFB6C1;
  --couple-glow:    rgba(255,105,180,.20);
}

.user-card.couple{
  background:linear-gradient(145deg,#2D1525,#4A2035);
  border-color:rgba(255,105,180,.20);
}
.user-card.couple::after{background:var(--couple-pink);}
.story-avatar-wrapper.couple{background:linear-gradient(135deg,#FF69B4,#FF1493);}
.gallery-slot-ring.couple{background:linear-gradient(135deg,#FF69B4,#FF1493,#C71585);}
.gender-icon.couple-icon{color:var(--couple-pink);font-size:13px;}

/* ─── GAY / LGBTQ+ ─── */
:root{
  --gay-red:    #FF0000;
  --gay-orange: #FF7F00;
  --gay-yellow: #FFFF00;
  --gay-green:  #00FF00;
  --gay-blue:   #0000FF;
  --gay-purple: #9400D3;
  --gay-glow:   rgba(255,69,0,.20);
}

.user-card.gay{
  background:linear-gradient(145deg,#1F0A1F,#3D1F3D);
  border-color:rgba(255,69,0,.20);
}
.user-card.gay::after{
  background:linear-gradient(180deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);
}
.story-avatar-wrapper.gay{
  background:linear-gradient(135deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);
  animation:rainbowRotate 3s linear infinite;
}
@keyframes rainbowRotate{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}
.gallery-slot-ring.gay{
  background:linear-gradient(135deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);
  animation:rainbowRotate 3s linear infinite;
}
.gender-icon.gay-icon{
  background:linear-gradient(90deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-size:13px;font-weight:800;
}

/* ─── GENDER PREVIEW IN SETTINGS ─── */
.settings-gender-display .gender-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;
}
.settings-gender-display .gender-tag.male{background:rgba(37,99,235,.15);color:var(--blue-lt);}
.settings-gender-display .gender-tag.female{background:rgba(236,72,153,.15);color:#EC4899;}
.settings-gender-display .gender-tag.couple{background:rgba(255,105,180,.15);color:#FF69B4;}
.settings-gender-display .gender-tag.gay{
  background:linear-gradient(90deg,rgba(255,0,0,.15),rgba(255,165,0,.15),rgba(255,255,0,.15),rgba(0,128,0,.15),rgba(0,0,255,.15),rgba(128,0,128,.15));
  color:#FF4500;font-weight:800;
}


/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL GENDER BADGES — SVG Icons with Glow
   ═══════════════════════════════════════════════════════════ */

.gender-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  flex-shrink:0;margin-left:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:transform .15s var(--spring);
}
.gender-badge:hover{transform:scale(1.2);}
.gender-badge svg{width:10px;height:10px;}

.male-badge{background:linear-gradient(135deg,#1e3a5f,#2563EB);color:#fff;}
.female-badge{background:linear-gradient(135deg,#5e1230,#EC4899);color:#fff;}
.couple-badge{background:linear-gradient(135deg,#4a2035,#FF69B4);color:#fff;}
.gay-badge{
  background:linear-gradient(135deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);
  background-size:200% 200%;
  animation:rainbowBadge 3s ease infinite;
  color:#fff;
}
@keyframes rainbowBadge{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.diverse-badge{background:linear-gradient(135deg,#170535,#350d60,#A855F7);color:#fff;}

/* Chat partner gender badge in header */
.chat-name .gender-badge{width:16px;height:16px;margin-left:5px;}
.chat-name .gender-badge svg{width:9px;height:9px;}

/* Story avatar wrappers with professional gradients */
.story-avatar-wrapper.male{background:linear-gradient(135deg,#1e3a5f,#2563EB,#60A5FA);}
.story-avatar-wrapper.female{background:linear-gradient(135deg,#5e1230,#EC4899,#F43F5E);}
.story-avatar-wrapper.couple{background:linear-gradient(135deg,#4a2035,#FF69B4,#FF1493);}
.story-avatar-wrapper.gay{background:linear-gradient(135deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);animation:rainbowRotate 3s linear infinite;}

/* Gallery slot rings */
.gallery-slot-ring.male{background:linear-gradient(135deg,#1e3a5f,#2563EB,#60A5FA);}
.gallery-slot-ring.female{background:linear-gradient(135deg,#5e1230,#EC4899,#F43F5E);}
.gallery-slot-ring.couple{background:linear-gradient(135deg,#4a2035,#FF69B4,#FF1493);}
.gallery-slot-ring.gay{background:linear-gradient(135deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#9400D3);animation:rainbowRotate 3s linear infinite;}

/* Remove old gender-icon styles that conflict */
.gender-icon{display:none !important;}

/* ══════════════════════════════════════════
   FALLBACKS
══════════════════════════════════════════ */
@supports not (height:100dvh){:root{--app-h:100vh;}}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL VOICE RECORDING — WhatsApp-style
   ═══════════════════════════════════════════════════════════ */

/* Recording Overlay */
#recording-overlay{
  position:absolute;bottom:calc(100% + 8px);left:0;right:0;
  background:rgba(6,9,16,.98);backdrop-filter:blur(20px);
  border:1px solid var(--border-med);border-radius:var(--radius-lg);
  padding:14px 16px;z-index:100;
  box-shadow:0 -8px 40px rgba(0,0,0,.6);
  transition:all .25s var(--ease);
}
#recording-overlay.hidden{display:none !important;}
#recording-overlay.show{
  animation:recSlideUp .3s var(--spring);
}
@keyframes recSlideUp{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:none}
}

.recording-panel{
  display:flex;flex-direction:column;gap:10px;
}

/* Waveform */
.recording-waveform{
  display:flex;align-items:center;justify-content:center;gap:3px;
  height:36px;overflow:hidden;
}
.wave-bar{
  width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--blue-lt),var(--orange));
  animation:wavePulse .6s ease-in-out infinite alternate;
  min-height:4px;max-height:32px;
}
.wave-bar:nth-child(1){height:12px;animation-delay:-.55s}
.wave-bar:nth-child(2){height:20px;animation-delay:-.45s}
.wave-bar:nth-child(3){height:16px;animation-delay:-.35s}
.wave-bar:nth-child(4){height:28px;animation-delay:-.25s}
.wave-bar:nth-child(5){height:14px;animation-delay:-.15s}
.wave-bar:nth-child(6){height:24px;animation-delay:-.05s}
.wave-bar:nth-child(7){height:18px;animation-delay:.05s}
.wave-bar:nth-child(8){height:30px;animation-delay:.15s}
.wave-bar:nth-child(9){height:10px;animation-delay:.25s}
.wave-bar:nth-child(10){height:22px;animation-delay:.35s}
.wave-bar:nth-child(11){height:16px;animation-delay:.45s}
.wave-bar:nth-child(12){height:26px;animation-delay:.55s}
.wave-bar:nth-child(13){height:14px;animation-delay:-.4s}
.wave-bar:nth-child(14){height:20px;animation-delay:-.3s}
.wave-bar:nth-child(15){height:28px;animation-delay:-.2s}
.wave-bar:nth-child(16){height:12px;animation-delay:-.1s}
.wave-bar:nth-child(17){height:24px;animation-delay:0s}
.wave-bar:nth-child(18){height:18px;animation-delay:.1s}
.wave-bar:nth-child(19){height:32px;animation-delay:.2s}
.wave-bar:nth-child(20){height:14px;animation-delay:.3s}

@keyframes wavePulse{
  0%{transform:scaleY(.3);opacity:.5}
  100%{transform:scaleY(1);opacity:1}
}

/* Recording Meta */
.recording-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;
}
.recording-timer{
  font-weight:800;color:var(--red);font-variant-numeric:tabular-nums;
  font-size:14px;letter-spacing:.5px;
}
.recording-timer::before{
  content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--red);margin-right:6px;
  animation:recBlink 1s ease-in-out infinite;
}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.2}}

.recording-hint{
  color:var(--text-muted);font-size:10px;
  opacity:.8;
}

/* Recording Actions */
.recording-actions{
  display:flex;justify-content:center;gap:20px;margin-top:4px;
}
.rec-action{
  width:44px;height:44px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;transition:all .2s var(--spring);
  touch-action:manipulation;
}
.rec-action:active{transform:scale(.9);}

.rec-cancel{
  background:rgba(239,68,68,.15);color:var(--red);
  border:1px solid rgba(239,68,68,.3);
}
.rec-cancel:hover{background:rgba(239,68,68,.25);}

.rec-send{
  background:var(--sent-bg);color:#fff;
  box-shadow:0 3px 14px var(--orange-glow);
}
.rec-send:hover{box-shadow:0 4px 20px rgba(249,115,22,.5);transform:scale(1.05);}

/* Mic Button States */
.mic-btn.recording{
  color:var(--red) !important;
  animation:micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  50%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(239,68,68,0)}
}

/* Slide to cancel hint */
.recording-hint.sliding{
  color:var(--red);font-weight:700;
  transition:color .2s;
}


/* ═══════════════════════════════════════════════════════════
   MATCH SYSTEM — Like, Match Toast, Notifications
   ═══════════════════════════════════════════════════════════ */

/* Like Button */
.btn-like{
  transition:all .2s var(--spring);
}
.btn-like:hover{background:rgba(34,197,94,.2);transform:translateY(-1px);}
.btn-like:active{transform:scale(.97);}
.btn-like.matched{background:rgba(34,197,94,.25);color:#fff;border-color:var(--green);}
.btn-like.matched svg{fill:currentColor;}

/* Match Toast */
.match-toast{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.85);backdrop-filter:blur(16px);
  display:flex;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.match-toast.show{opacity:1;pointer-events:all;}
.match-toast.hidden{display:none !important;}

.match-toast-inner{
  background:var(--bg-card);border:1px solid var(--border-med);
  border-radius:var(--radius-lg);padding:32px 28px;text-align:center;
  max-width:320px;width:90%;animation:matchPop .5s var(--spring);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
@keyframes matchPop{
  0%{opacity:0;transform:scale(.5) translateY(30px)}
  60%{transform:scale(1.05) translateY(-5px)}
  100%{opacity:1;transform:none}
}

.match-toast-avatars{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:20px;
}
.match-avatar{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.match-avatar.me{background:linear-gradient(135deg,var(--blue),var(--blue-lt));}
.match-avatar.them{background:linear-gradient(135deg,var(--orange),#A855F7);}
.match-heart{
  font-size:28px;animation:heartBeat 1.2s ease-in-out infinite;
}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.3)}
  30%{transform:scale(1)}
  45%{transform:scale(1.15)}
}

.match-toast-title{
  font-family:var(--fh);font-size:22px;font-weight:900;color:#fff;
  margin-bottom:6px;letter-spacing:-.3px;
}
.match-toast-sub{
  font-size:13px;color:var(--text-muted);margin-bottom:20px;
}
.match-toast-btn{
  width:100%;padding:13px;border-radius:var(--radius-lg);
  background:var(--grad-accent);color:#fff;border:none;
  font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;
  box-shadow:0 4px 18px var(--orange-glow);
  transition:all .2s var(--spring);
}
.match-toast-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(249,115,22,.5);}
.match-toast-btn:active{transform:scale(.97);}

/* Match badge on user cards */
.match-badge{
  position:absolute;top:-4px;right:-4px;z-index:3;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#22C55E,#16A34A);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;box-shadow:0 2px 6px rgba(34,197,94,.4);
}


/* ═══════════════════════════════════════════════════════════
   LIKE NOTIFICATION TOAST — Real-time like alerts
   ═══════════════════════════════════════════════════════════ */

.like-toast{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 70px);left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:9999;opacity:0;pointer-events:none;transition:all .4s var(--spring);
  max-width:340px;width:calc(100% - 28px);
}
.like-toast.show{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}
.like-toast.hidden{display:none !important;}

.like-toast-inner{
  background:var(--bg-card);border:1px solid var(--border-med);
  border-radius:var(--radius-lg);padding:16px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(20px);
}

.like-toast-header{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.like-toast-avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--orange),#A855F7);
  box-shadow:0 3px 12px rgba(249,115,22,.3);
}
.like-toast-info{flex:1;min-width:0;}
.like-toast-title{
  font-size:13px;font-weight:800;color:var(--orange-lt);margin-bottom:2px;
  display:flex;align-items:center;gap:5px;
}
.like-toast-name{
  font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.like-toast-sub{
  font-size:11px;color:var(--text-muted);margin-top:1px;
}

.like-toast-actions{
  display:flex;gap:8px;
}
.like-toast-btn{
  flex:1;padding:10px 14px;border-radius:var(--radius-md);border:none;
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s var(--spring);touch-action:manipulation;
}
.like-toast-btn:active{transform:scale(.96);}

.like-toast-btn.like-back{
  background:linear-gradient(135deg,#E8620A,#F97316);color:#fff;
  box-shadow:0 3px 14px rgba(249,115,22,.35);
}
.like-toast-btn.like-back:hover{box-shadow:0 5px 20px rgba(249,115,22,.5);transform:translateY(-1px);}
.like-toast-btn.like-back svg{fill:rgba(255,255,255,.3);}

.like-toast-btn.like-dismiss{
  background:rgba(255,255,255,.06);color:var(--text-muted);
  border:1px solid var(--border);
}
.like-toast-btn.like-dismiss:hover{background:rgba(255,255,255,.1);color:var(--text);}

/* ═══════════════════════════════════════════════════════════
   SIMPLE GENDER DOTS — Clean colored circles (WhatsApp style)
   ═══════════════════════════════════════════════════════════ */

.gender-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  flex-shrink:0;margin-left:5px;
  box-shadow:0 0 4px rgba(0,0,0,.3);
  transition:transform .15s var(--spring);
}
.gender-dot:hover{transform:scale(1.4);}

/* Chat partner gender dot in header */
.chat-name .gender-dot{width:9px;height:9px;margin-left:6px;}

/* Remove old conflicting styles */
.gender-icon{display:none !important;}
.gender-badge{display:none !important;}

/* ─── AVATAR SVG DISPLAY ─── */
.avatar svg{
  width:100%;height:100%;border-radius:50%;
  display:block;
}
.story-avatar svg{
  width:100%;height:100%;border-radius:50%;
  display:block;
}
.gallery-slot-inner svg{
  width:100%;height:100%;border-radius:50%;
  display:block;
}
.settings-avatar svg{
  width:100%;height:100%;border-radius:50%;
  display:block;
}
.qi-avatar svg{
  width:100%;height:100%;border-radius:50%;
  display:block;
}
/* ═══════════════════════════════════════════════════════════
   MY PROFILE MODAL — Avatar upload from header
   ═══════════════════════════════════════════════════════════ */

.my-profile-card {
  text-align: center;
  padding: 28px 24px 24px;
}

.my-profile-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  cursor: pointer;
}

.my-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--orange));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.12);
  box-shadow: 0 0 28px rgba(37,99,235,.25);
  transition: transform var(--t-fast) var(--spring), box-shadow var(--t-fast);
}

.my-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.my-profile-avatar-wrap:hover .my-profile-avatar {
  transform: scale(1.04);
  box-shadow: 0 0 38px rgba(37,99,235,.4);
}

.my-profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--t-fast);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
}

.my-profile-avatar-wrap:hover .my-profile-avatar-overlay,
.my-profile-avatar-wrap:focus-within .my-profile-avatar-overlay {
  opacity: 1;
}

.my-profile-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}

.my-profile-gender {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 20px;
}

.my-profile-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--blue), #3B82F6);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t-fast) var(--spring), box-shadow var(--t-fast), filter var(--t-fast);
  box-shadow: 0 4px 16px rgba(37,99,235,.35);
  letter-spacing: .1px;
}

.my-profile-upload-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(37,99,235,.45);
}

.my-profile-upload-btn:active {
  transform: scale(.96);
}

.my-profile-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.5;
}

/* ─── Avatar mini clickable ring pulse ─── */
.my-avatar-mini {
  cursor: pointer;
  position: relative;
}

.my-avatar-mini::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.my-avatar-mini:hover::after {
  border-color: var(--blue-lt);
  box-shadow: 0 0 10px var(--blue-glow);
}

/* ─── Upload camera badge on avatar mini ─── */
.my-avatar-mini-wrap {
  position: relative;
  display: inline-flex;
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED MESSAGE BUBBLES — More interactive & polished
   ═══════════════════════════════════════════════════════════ */

/* Bubble hover lift */
.message-row .bubble {
  transition: transform .18s var(--spring), box-shadow .18s;
}
.message-row:hover .bubble {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}

/* Sent bubbles get a stronger glow on hover */
.message-row.sent:hover .bubble {
  box-shadow: 0 4px 20px rgba(249,115,22,.30);
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED USER CARDS — More professional hover states
   ═══════════════════════════════════════════════════════════ */

.user-card {
  transition: background var(--t-fast), transform .18s var(--spring), box-shadow .18s;
}

.user-card:hover {
  background: rgba(255,255,255,.055);
  transform: translateX(3px);
}

.user-card:active {
  transform: scale(.985);
}

/* ─── Unread badge pop ─── */
.unread-count-badge {
  animation: badgePop .35s var(--spring) both;
}

@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ─── Online pulse stronger ─── */
.status-dot.online {
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: onlinePing 2.2s ease infinite;
}

@keyframes onlinePing {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED SEND BUTTON
   ═══════════════════════════════════════════════════════════ */

.send-btn-circle:not(:disabled) {
  box-shadow: 0 4px 16px rgba(249,115,22,.4);
}

.send-btn-circle:not(:disabled):hover {
  box-shadow: 0 6px 22px rgba(249,115,22,.55);
  transform: scale(1.08);
}

.send-btn-circle:not(:disabled):active {
  transform: scale(.93);
}

/* ═══════════════════════════════════════════════════════════
   INLINE TOOLBAR BUTTONS — More interactive
   ═══════════════════════════════════════════════════════════ */

.toolbar-btn {
  transition: background var(--t-fast), transform .18s var(--spring), box-shadow .18s;
}

.toolbar-btn:hover {
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.toolbar-btn:active {
  transform: scale(.92);
}

/* ─── Chat header improvements ─── */
.chat-partner-trigger {
  transition: background var(--t-fast), transform .18s var(--spring);
  border-radius: var(--radius-md);
  padding: 5px 8px;
  margin: 0 -8px;
}

.chat-partner-trigger:hover {
  background: rgba(255,255,255,.055);
}

.chat-partner-trigger:active {
  transform: scale(.97);
}

/* ─── Input pill focus glow ─── */
.input-pill:focus-within {
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 2px 12px rgba(0,0,0,.2);
}

/* ─── Story items pulse stronger ─── */
.story-item:hover .story-avatar-wrapper {
  box-shadow: 0 0 18px rgba(249,115,22,.35);
}

/* ═══════════════════════════════════════════════════════════
   MEIN STATUS BUTTON — Header avatar+photo upload
   ═══════════════════════════════════════════════════════════ */
.status-select-hidden {
  display: none !important;
}

.mein-status-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.055);
  border: 1.5px solid rgba(255,255,255,.10);
  border-radius: 28px;
  padding: 5px 13px 5px 5px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform .18s var(--spring), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}

.mein-status-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  transform: translateX(-100%);
  transition: transform .45s;
}

.mein-status-btn:hover::before { transform: translateX(100%); }

.mein-status-btn:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(37,99,235,.4);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 2px 12px rgba(0,0,0,.2);
}

.mein-status-btn:active {
  transform: scale(.95);
}

.mein-status-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--orange));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 0 10px rgba(37,99,235,.3);
  transition: box-shadow var(--t-fast);
}

.mein-status-btn:hover .mein-status-avatar {
  box-shadow: 0 0 16px rgba(249,115,22,.5);
}

.mein-status-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mein-status-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.mein-status-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mein-status-value {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   MESSAGES-CONTAINER — Time-based background themes
   صباح / نهار / مساء / ليل
   ═══════════════════════════════════════════════════════════ */

#messages-container {
  transition: background 2s ease;
}

/* ─── صباح: 5:00 – 9:59 ─── */
#messages-container.theme-time-morning {
  background:
    radial-gradient(ellipse 70% 40% at 80% 5%, rgba(255,183,77,.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 20% 90%, rgba(37,99,235,.07) 0%, transparent 60%),
    linear-gradient(170deg,
      #0d1829 0%,
      #152235 25%,
      #1a2e45 50%,
      #122033 75%,
      #090f1d 100%);
}

/* ─── نهار: 10:00 – 16:59 ─── */
#messages-container.theme-time-day {
  background:
    radial-gradient(ellipse 60% 35% at 90% 8%, rgba(37,99,235,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 10% 85%, rgba(96,165,250,.05) 0%, transparent 60%),
    linear-gradient(165deg,
      #060d1e 0%,
      #0c1530 30%,
      #0f1c3a 55%,
      #091228 80%,
      #060910 100%);
}

/* ─── مساء: 17:00 – 19:59 ─── */
#messages-container.theme-time-evening {
  background:
    radial-gradient(ellipse 65% 38% at 85% 6%, rgba(249,115,22,.10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 25% at 15% 88%, rgba(168,85,247,.07) 0%, transparent 60%),
    linear-gradient(168deg,
      #0e0b18 0%,
      #1a1025 30%,
      #221535 55%,
      #160e22 80%,
      #070510 100%);
}

/* ─── ليل: 20:00 – 4:59 ─── */
#messages-container.theme-time-night {
  background:
    radial-gradient(ellipse 55% 30% at 75% 3%, rgba(168,85,247,.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 25% at 20% 92%, rgba(37,99,235,.06) 0%, transparent 60%),
    linear-gradient(172deg,
      #04060e 0%,
      #070a16 30%,
      #09091f 55%,
      #060813 80%,
      #030408 100%);
}

/* ─── نجوم ليلية (pure CSS) ─── */
#messages-container.theme-time-night::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 8%,  rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 15%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 35%, rgba(255,255,255,.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,.15) 0%, transparent 100%);
  z-index: 0;
}

/* ─── إشراقة صباحية ─── */
#messages-container.theme-time-morning::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,183,77,.06) 0%, transparent 100%);
  z-index: 0;
}

/* Ensure messages render above the pseudo-elements */
#messages-container > * { position: relative; z-index: 1; }
#messages-container { position: relative; overflow-y: auto; }