/* ── RESET & BASE ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --wa-bg: #e5ddd5;
  --wa-header: #075e54;
  --wa-header-text: #fff;
  --wa-bubble-out: #dcf8c6;
  --wa-bubble-in: #fff;
  --wa-bubble-shadow: 0 1px 2px rgba(0,0,0,.15);
  --wa-text: #111;
  --wa-text-meta: #667781;
  --wa-footer-bg: #f0f0f0;
  --wa-footer-border: #d1d7db;
  --wa-tick: #53bdeb;
  --wa-link: #027eb5;
  --wa-audio-bar: #075e54;
  --wa-audio-bg: #f0f0f0;
  --wa-date-bg: rgba(225,221,214,.92);
  --wa-date-text: #54656f;
  --wa-location-bg: #fff;
  --radius-bubble: 7.5px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wa-bg: #0d1418;
    --wa-header: #1f2c34;
    --wa-bubble-out: #005c4b;
    --wa-bubble-in: #1f2c34;
    --wa-text: #e9edef;
    --wa-text-meta: #8696a0;
    --wa-footer-bg: #1f2c34;
    --wa-footer-border: #2a3942;
    --wa-audio-bg: #2a3942;
    --wa-date-bg: rgba(13,20,24,.85);
    --wa-date-text: #8696a0;
    --wa-location-bg: #1f2c34;
  }
}

html, body { height: 100%; font-family: var(--font); }
body { background: #111; display: flex; align-items: center; justify-content: center; }

/* ── APP SHELL ────────────────────────────── */
.app {
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--wa-bg);
  position: relative;
  overflow: hidden;
}

/* background pattern like WA */
.chat-area {
  background-color: var(--wa-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' opacity='.06'%3E%3Ctext y='40' font-size='36'%3E💬%3C/text%3E%3C/svg%3E");
}

/* ── HEADER ───────────────────────────────── */
.wa-header {
  background: var(--wa-header);
  color: var(--wa-header-text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  min-height: 56px;
  flex-shrink: 0;
  z-index: 10;
}

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.hdr-info { flex: 1; min-width: 0; }
.hdr-name { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-sub { display: block; font-size: 12px; opacity: .8; }

.hdr-icons { display: flex; gap: 18px; }
.hdr-icons svg { width: 22px; height: 22px; stroke: rgba(255,255,255,.85); cursor: pointer; }

/* ── CHAT AREA ────────────────────────────── */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-area::-webkit-scrollbar { width: 5px; }
.chat-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 99px; }

/* ── DATE SEPARATOR ──────────────────────── */
.date-sep {
  text-align: center;
  margin: 12px auto 6px;
}
.date-sep span {
  background: var(--wa-date-bg);
  color: var(--wa-date-text);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 7px;
  backdrop-filter: blur(4px);
}

/* ── BUBBLE ROW ──────────────────────────── */
.msg-row {
  display: flex;
  margin: 1px 0;
  padding: 0 4px;
}
.msg-row.out { justify-content: flex-end; }
.msg-row.in  { justify-content: flex-start; }

/* ── BUBBLE ──────────────────────────────── */
.bubble {
  max-width: 72%;
  border-radius: var(--radius-bubble);
  box-shadow: var(--wa-bubble-shadow);
  position: relative;
  word-break: break-word;
}

.msg-row.out .bubble {
  background: var(--wa-bubble-out);
  border-top-right-radius: 2px;
}
.msg-row.in .bubble {
  background: var(--wa-bubble-in);
  border-top-left-radius: 2px;
}

/* Tail */
.msg-row.out .bubble::after {
  content: '';
  position: absolute;
  top: 0; right: -8px;
  border: 8px solid transparent;
  border-top: 8px solid var(--wa-bubble-out);
  border-right: 0; border-left: 8px solid var(--wa-bubble-out);
}
.msg-row.in .bubble::before {
  content: '';
  position: absolute;
  top: 0; left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid var(--wa-bubble-in);
  border-left: 0; border-right: 8px solid var(--wa-bubble-in);
}

/* ── TEXT BUBBLE ─────────────────────────── */
.bubble-text { padding: 6px 8px 18px; min-width: 80px; }
.bubble-text .text-body {
  font-size: 14.2px;
  line-height: 1.45;
  color: var(--wa-text);
  white-space: pre-wrap;
}
.bubble-text .text-body a { color: var(--wa-link); text-decoration: none; }

/* ── SENDER NAME (grupos) ─────────────────── */
.sender-name {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 2px;
  padding: 5px 8px 0;
  color: #06cf9c;
}

/* ── META (hora + ticks) ─────────────────── */
.meta {
  position: absolute;
  bottom: 4px; right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--wa-text-meta);
  white-space: nowrap;
  pointer-events: none;
}
.meta .ticks { color: var(--wa-tick); font-size: 13px; }

/* ── IMAGE BUBBLE ────────────────────────── */
.bubble-image {
  overflow: hidden;
  border-radius: var(--radius-bubble);
  cursor: pointer;
  position: relative;
  min-width: 160px;
}
.bubble-image img {
  display: block;
  max-width: 260px;
  width: 100%;
  border-radius: var(--radius-bubble);
}
.bubble-image .meta {
  bottom: 6px; right: 8px;
  background: rgba(0,0,0,.45);
  color: #fff;
  padding: 2px 5px;
  border-radius: 20px;
}
.bubble-image .meta .ticks { color: #fff; }

/* ── STICKER ────────────────────────────── */
.bubble-sticker {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}
.bubble-sticker::after, .bubble-sticker::before { display: none !important; }
.bubble-sticker img { width: 140px; height: 140px; object-fit: contain; display: block; }

/* ── AUDIO BUBBLE ────────────────────────── */
.bubble-audio {
  padding: 8px 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 280px;
}
.audio-play-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--wa-audio-bar);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.audio-play-btn:hover { background: #025e4f; }
.audio-play-btn svg { width: 18px; height: 18px; fill: #fff; }

.audio-content { flex: 1; min-width: 0; }
.audio-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  cursor: pointer;
  padding: 0 2px;
}
.wv-bar {
  flex: 1;
  background: var(--wa-text-meta);
  border-radius: 2px;
  min-height: 3px;
  transition: background .1s;
}
.wv-bar.played { background: var(--wa-audio-bar); }

.audio-time {
  font-size: 11.5px;
  color: var(--wa-text-meta);
  margin-top: 2px;
}
.audio-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

/* ── LOCATION BUBBLE ─────────────────────── */
.bubble-location {
  overflow: hidden;
  border-radius: var(--radius-bubble);
  min-width: 200px;
  max-width: 260px;
  cursor: pointer;
}
.location-map {
  width: 100%;
  height: 140px;
  background: #e8e0d5;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.location-map img { width: 100%; height: 100%; object-fit: cover; }
.location-pin {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.location-label {
  padding: 6px 10px 18px;
  font-size: 13px;
  color: var(--wa-link);
  font-weight: 500;
  background: var(--wa-location-bg);
}

/* ── DOCUMENT BUBBLE ─────────────────────── */
.bubble-doc {
  padding: 8px 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 260px;
}
.doc-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #bf5af2;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.doc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--wa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-size { font-size: 11px; color: var(--wa-text-meta); }

/* ── FOOTER ──────────────────────────────── */
.wa-footer {
  background: var(--wa-footer-bg);
  border-top: 1px solid var(--wa-footer-border);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ft-emoji, .ft-mic {
  width: 40px; height: 40px;
  border: none; background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--wa-text-meta);
  transition: background .15s;
}
.ft-emoji:hover, .ft-mic:hover { background: rgba(0,0,0,.06); }
.ft-emoji svg, .ft-mic svg { width: 22px; height: 22px; }
.ft-mic { background: var(--wa-header); }
.ft-mic svg { stroke: #fff; }
.ft-input {
  flex: 1;
  background: var(--wa-bubble-in);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--wa-text-meta);
  cursor: default;
}

/* ── LIGHTBOX ────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.lightbox.hidden { display: none; }
.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 4px;
  object-fit: contain;
}
.lb-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none;
  color: #fff; font-size: 28px;
  cursor: pointer; line-height: 1;
}

/* ── CONFIG PANEL ─────────────────────────── */
.config-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
}
.config-panel.hidden { display: none; }
.config-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  width: 340px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.config-box h2 { font-size: 18px; margin-bottom: 8px; color: #111; }
.config-box p { font-size: 14px; color: #555; margin-bottom: 20px; }
.name-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.name-btn {
  padding: 10px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
  text-align: left;
}
.name-btn.selected { border-color: #075e54; background: #e8f5f3; color: #075e54; font-weight: 600; }
.config-box > button {
  width: 100%;
  padding: 12px;
  background: #075e54;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.config-box > button:hover { background: #025e4f; }

/* ── LOADING ──────────────────────────────── */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--wa-text-meta);
}
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(7,94,84,.2);
  border-top-color: #075e54;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SCROLLBAR THIN ──────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }