/* Telegram dark-like */
:root{
  --bg:#0f141b;
  --bg2:#0b1016;
  --panel:#1f2a36;
  --text:#e8edf3;
  --muted:#93a0af;
  --accent:#2ea6ff;
  --bubble:#17202a;
  --green:#39c16c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg) url('assets/bg-telegram.png') center/cover no-repeat fixed;
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.chat{
  max-width:980px;
  margin:0 auto;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:rgba(0,0,0,.25);
}

.chat-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid #223042;
  background:linear-gradient(180deg, #111922 0, #0f141b 100%);
  position:sticky; top:0; z-index:3;
}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}
.chat-title .name{font-weight:700}
.verified{color:#4cc3ff; font-weight:900; margin-left:6px}
.status{color:var(--muted); font-size:.9rem}
.menu{margin-left:auto;color:var(--muted)}

.messages{
  padding:20px 18px 100px;
  overflow:auto;
}
.date{
  margin:12px auto 18px;
  padding:6px 12px;
  background:#233142;
  border-radius:20px;
  width:max-content;
  color:#c9d3dd;
  font-size:.9rem;
}

.bubble{
  background:var(--bubble);
  border-radius:12px;
  padding:14px;
  margin:10px 0;
  width:min(720px, 100% - 80px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 6px 16px rgba(0,0,0,.25);
}

.bubble.media{padding:0; overflow:hidden}
.promo{display:block; width:100%; height:auto}

.bubble.audio{display:flex; align-items:center; gap:12px; background:#143b22; border-left:4px solid var(--green)}
.audio-bar{flex:1; height:28px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden}
.audio-bar .bar{height:100%; width:40%; background:var(--green)}
.audio-time{opacity:.9}

.bubble.card h3{margin:0 0 8px}
.features{margin:10px 0 16px; padding-left:18px}
.features li{margin:6px 0}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  background:#2a3a4d; border:0; color:#fff; padding:12px 16px; border-radius:10px; cursor:pointer;
}
.btn.primary{background:#275d96}
.btn:hover{filter:brightness(1.1)}

.input{
  position:sticky; bottom:0; padding:10px 14px; display:flex; gap:10px; align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6)), var(--bg2);
  border-top:1px solid #223042;
}
.input input{
  flex:1; background:#111923; border:1px solid #223042; border-radius:20px; padding:12px 16px; color:#bfc9d4;
}
.input .icons{display:flex; gap:12px; color:var(--muted)}

.bubble.payment .success{color:#6de09a; font-weight:700; margin-bottom:8px}
.bubble.payment .amount{margin-bottom:8px}
.bubble.payment .qr-wrap{display:flex; justify-content:center; margin:10px 0}
.bubble.payment .qr{width:240px; height:240px; object-fit:contain; background:#0a0f15; padding:8px; border-radius:8px}
.bubble.payment .pix-code{width:100%; height:80px; background:#0a0f15; border:1px solid #223042; color:#e8edf3; border-radius:8px; padding:10px; margin:8px 0}
.bubble.payment .pay-actions{display:flex; gap:10px; flex-wrap:wrap}
.bubble.payment .status-line{margin-top:10px; color:#9fb2c5}




/* 🔊 Áudio estilo Telegram */
.bubble.audio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #143b22;
  border-left: 4px solid var(--green);
  padding: 12px;
  border-radius: 12px;
  max-width: 420px;
}

.audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-player .progress {
  flex: 1;
  height: 34px; /* altura igual ao estilo Telegram */
  border-radius: 18px;
  background: #1c4729;
  overflow: hidden;
  position: relative;
}

.audio-player .progress-bar {
  height: 100%;
  width: 0%;
  background: #2ecc71;
  transition: width 0.2s linear;
}

.audio-player .time {
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff;
  min-width: 45px;
  text-align: right;
}


/* 🔊 Estilo áudio igual Telegram */
.bubble.audio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #143b22;
  border-left: 4px solid var(--green);
  padding: 12px;
  border-radius: 12px;
  max-width: 420px;
}

.audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-player .progress {
  flex: 1;
  height: 32px;
  border-radius: 16px;
  background: #1c4729;
  overflow: hidden;
}

.audio-player .progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  transition: width 0.2s linear;
}

.audio-player .time {
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
  min-width: 45px;
  text-align: right;
}