/* ============================================================
   premium.css — loaded LAST. The final skin.
   ------------------------------------------------------------
   What this fixes, deliberately:

   · chat-list rows that overflowed off the right edge of a phone
   · unicode icon glyphs (⏻ ↗ ◐) that render as broken boxes on
     Android — every control is an inline SVG now
   · copy/delete/speak stamped under every message — actions now
     hide until you hover (desktop) or long-press (phone)
   · timestamps move INSIDE the bubble, bottom-right, with real
     ticks — the way every serious chat app does it
   · mixed time formats (18:32 vs 10:19 PM) — one format now
   ============================================================ */

/* ============================================================
   1. CHAT LIST — rebuilt as a grid that cannot overflow
   ============================================================ */
.cl-list{ padding:2px 0 14px; }

.cl-row{
  display:grid !important;
  grid-template-columns:50px minmax(0,1fr) auto;
  gap:13px; align-items:center;
  width:100%;
  padding:11px 16px;
  text-align:left;
}
.cl-row::after{ left:79px; }

/* every text line truncates — nothing can push past the edge again */
.cl-mid{ min-width:0; overflow:hidden; }
.cl-name{
  display:flex; align-items:center; gap:7px; min-width:0;
  font-size:15.5px; font-weight:600; letter-spacing:.1px;
}
.cl-name .nm{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}
.cl-tag{
  flex-shrink:0;
  font-size:10px; font-weight:500; letter-spacing:.3px;
  padding:2px 8px; border:none;
  background:rgba(134,150,160,.13); color:var(--wa-dim);
  border-radius:20px;
}
.cl-preview{
  display:block !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; color:var(--wa-dim); margin-top:3px;
  line-height:1.4;
}
.cl-right{ align-self:start; padding-top:3px; }
.cl-time{ font-size:11.5px; color:var(--wa-faint); font-variant-numeric:tabular-nums; }

/* ---- avatars: each of the three has her own colour ---- */
.cl-av{
  width:50px; height:50px; font-size:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.cl-av, .avatar{ background:var(--wa-panel-2); }
[data-k="flirty"]{    background:linear-gradient(135deg,#3b1f2b,#5c2333) !important; }
[data-k="emotional"]{ background:linear-gradient(135deg,#251d3d,#3c2a5e) !important; }
[data-k="motivator"]{ background:linear-gradient(135deg,#132f3a,#14504a) !important; }

/* ============================================================
   2. ICON BUTTONS — SVG everywhere, no more tofu
   ============================================================ */
.ibtn, .cbtn, .backbtn, .jump{ color:#AEBAC1; }
.ibtn svg{ width:21px; height:21px; }
.ibtn.tiny svg{ width:14px; height:14px; }
.cbtn svg{ width:22px; height:22px; }
.backbtn svg{ width:26px; height:26px; }
.jump svg{ width:20px; height:20px; }
.acts button svg{ width:15px; height:15px; }
svg{ display:block; }

.ibtn{ width:38px; height:38px; border-radius:50%; opacity:1; }
.ibtn:hover{ background:rgba(255,255,255,.07); color:#E9EDEF; }
.backbtn{ width:36px; height:36px; border-radius:50%; margin-left:-8px; }
.backbtn:hover{ background:rgba(255,255,255,.07); color:#E9EDEF; }

/* ============================================================
   3. HEADER
   ============================================================ */
.topbar{ gap:11px; }
.avatar{ width:40px; height:40px; font-size:18px; border:none; }
.who-name{ font-size:16.5px !important; font-weight:600; }
.who-status{ font-size:12px; margin-top:1px; }
.live-meta{ font-size:11px; margin-top:1px; }
.cl-topbar .cl-title{ font-size:21px; letter-spacing:.2px; }

/* ============================================================
   4. BUBBLES — time lives inside, actions hide until asked for
   ============================================================ */
.chat{ overflow-anchor:none; gap:0; }
.row{ position:relative; max-width:78%; }
.row + .row{ margin-top:8px; }
.row.her + .row.her, .row.me + .row.me{ margin-top:2.5px; }

.bubble{
  padding:7px 9px 7px 11px;
  border-radius:10px;
  font-size:14.3px; line-height:1.42;
  box-shadow:0 1px 1px rgba(0,0,0,.18);
}
.row.her .bubble{ border-top-left-radius:2px !important; }
.row.me  .bubble{ border-top-right-radius:2px !important; }
.row.her + .row.her .bubble{ border-top-left-radius:10px !important; }
.row.me  + .row.me  .bubble{ border-top-right-radius:10px !important; }
.row.her .bubble::before{ height:11px; }
.row.me  .bubble::after{  height:11px; }

/* the timestamp sits in the bubble's bottom-right corner */
.btime{
  float:right;
  margin:9px -3px -4px 9px;
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; line-height:1;
  color:rgba(233,237,239,.5);
  user-select:none; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.row.me .btime{ color:rgba(233,237,239,.62); }
.btime .seen{ display:inline-flex; color:rgba(233,237,239,.55); }
.btime .seen svg{ width:15px; height:10px; }
.btime .seen.on{ color:var(--wa-tick) !important; }

/* image bubbles: caption+time overlay style stays simple */
.row .cap{ font-size:12.5px; padding:2px 6px 0; }

/* ---- the actions pill: invisible until wanted ---- */
.acts{
  position:absolute; top:-15px; z-index:6;
  display:none; align-items:center; gap:1px;
  padding:3px;
  background:#1A252C;
  border:1px solid rgba(134,150,160,.22);
  border-radius:100px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
}
.row.her .acts{ left:6px; }
.row.me  .acts{ right:6px; }
.row.acts-open .acts{ display:flex; animation:actsIn .15s var(--ease-out); }
@keyframes actsIn{ from{opacity:0; transform:translateY(4px) scale(.94)} to{opacity:1; transform:none} }

@media (hover:hover){
  .row:hover .acts{ display:flex; animation:actsIn .12s ease; }
}

.acts button{
  width:29px; height:29px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--wa-dim);
  transition:background .12s ease, color .12s ease;
}
.acts button:hover{ background:rgba(255,255,255,.08); color:var(--wa-text); }
.acts button.danger:hover{ color:var(--bad); }
.acts button.speaking{ color:var(--wa-green); animation:blink 1s infinite; }

/* long-press feedback */
.row.pressing .bubble{ transition:transform .3s ease; transform:scale(.985); }

/* the OLD meta row is gone — belt and braces if anything still makes one */
.meta{ display:none !important; }

/* ============================================================
   5. TYPING, WHISPERS, DAY MARKS
   ============================================================ */
.typing{ padding:11px 14px; border-radius:10px; border-top-left-radius:2px !important; }
.typing i{ width:5.5px; height:5.5px; }

.whisper{ font-size:11px; padding:6px 12px; margin:6px auto; border-radius:100px; }
.daymark{
  margin:16px auto 10px; padding:4px 12px;
  font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:#7d8b94;
  background:rgba(24,34,40,.85); border-radius:100px;
  backdrop-filter:blur(3px);
}
.earlier{ font-size:12px; padding:7px 15px; }

/* ============================================================
   6. QUICK REPLIES + COMPOSER
   ============================================================ */
.quick{ padding:7px 12px; gap:7px; }
.qr{
  background:transparent !important;
  border:1px solid rgba(134,150,160,.28) !important;
  border-style:solid !important;
  color:var(--wa-dim) !important;
  font-size:12px; padding:7px 13px;
}
.qr:active{ background:rgba(255,255,255,.05) !important; }

.composer{ gap:5px; padding-top:8px; }
.cbtn{ background:transparent; border:none; width:42px; height:42px; }
.cbtn:hover{ background:rgba(255,255,255,.06); color:#E9EDEF; }
.field textarea{
  padding:11px 17px; font-size:15px; border-radius:24px;
  background:#1F2C34 !important;
}
.cbtn.send{
  width:44px; height:44px;
  box-shadow:none;
  opacity:.55; transform:scale(.96);
  transition:opacity .18s ease, transform .18s var(--ease-out), background .2s ease;
}
.composer.armed .cbtn.send{
  opacity:1; transform:scale(1);
  box-shadow:0 4px 16px -6px rgba(0,168,132,.9) !important;
}
.cbtn.send svg{ transform:translateX(1px); }

/* ============================================================
   7. JUMP-TO-LATEST — now a proper FAB with an unread count
   ============================================================ */
.jump{
  width:42px; height:42px;
  background:#1A252C; border:1px solid rgba(134,150,160,.22);
  color:#AEBAC1;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.6);
  transition:transform .18s var(--ease-out), opacity .18s ease;
  opacity:0; transform:translateY(8px) scale(.9); display:grid;
  pointer-events:none;
}
.jump.on{ opacity:1; transform:none; pointer-events:auto; }
.jump:active{ transform:scale(.92); }
.jump .jb{
  position:absolute; top:-5px; right:-5px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; display:none; place-items:center;
  background:var(--wa-green); color:#0B141A;
  font-size:11px; font-weight:700;
}
.jump.unread .jb{ display:grid; }
.jump.unread{ color:var(--wa-green); border-color:rgba(0,168,132,.4); }

/* ============================================================
   8. SMALL CONSISTENCY PASSES
   ============================================================ */
html[data-layout="desktop"] .row{ max-width:min(62%, 560px); }
html[data-layout="desktop"] .chat{ padding-top:20px; padding-bottom:14px; }
html[data-layout="mobile"] .chat{ padding-top:12px; padding-bottom:12px; }

/* the sidebar share/theme icons match the rest */
.cl-tools{ gap:2px; }

/* chips slightly tighter */
.chip{ font-size:12.5px; padding:7px 14px; }
.moods{ padding:9px 12px; }

/* welcome screen */
.welcome h2{ font-family:var(--sans); font-weight:300; font-size:24px; }

/* light theme adjustments for the new pieces */
@media (prefers-color-scheme:light){
  html[data-theme="auto"] .acts{ background:#fff; border-color:rgba(0,0,0,.1); }
  html[data-theme="auto"] .btime{ color:rgba(17,27,33,.45); }
  html[data-theme="auto"] .row.me .btime{ color:rgba(17,27,33,.5); }
  html[data-theme="auto"] .daymark{ background:rgba(255,255,255,.9); color:#54656F; }
  html[data-theme="auto"] .jump{ background:#fff; }
  html[data-theme="auto"] .field textarea{ background:#fff !important; }
  html[data-theme="auto"] .ibtn, html[data-theme="auto"] .cbtn,
  html[data-theme="auto"] .backbtn{ color:#54656F; }
}