/* ================================================================
   Cupom Mercado Livre — estilos compartilhados (site + painel)
   Baseado em img/tema-clarowhatsapp-wp.png e img/tema-escuro-whatsapp-wp.png
   ================================================================ */

/* Papel de parede WhatsApp (doodles) — usado como máscara;
   a cor vem de --doodle-color em cada tema */
:root {
  --header-h: 72px;
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 22) rotate(-12)'%3E%3Crect x='0' y='9' width='28' height='20' rx='2'/%3E%3Crect x='-2' y='3' width='32' height='7' rx='1.5'/%3E%3Cpath d='M14 3v26M14 3c-3-7-11-6-7 0M14 3c3-7 11-6 7 0'/%3E%3C/g%3E%3Cg transform='translate(118 26) rotate(8)'%3E%3Cpath d='M0 0h6l5 20h18l5-14H9'/%3E%3Ccircle cx='13' cy='27' r='2.5'/%3E%3Ccircle cx='26' cy='27' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(222 18) rotate(-8)'%3E%3Crect width='32' height='22' rx='2.5'/%3E%3Cpath d='M1 2l15 11L31 2'/%3E%3C/g%3E%3Cg transform='translate(58 108)'%3E%3Ccircle cx='15' cy='15' r='15'/%3E%3Ccircle cx='10' cy='12' r='1.4'/%3E%3Ccircle cx='20' cy='12' r='1.4'/%3E%3Cpath d='M9 19q6 6 12 0'/%3E%3C/g%3E%3Cg transform='translate(168 96) rotate(14)'%3E%3Cpath d='M15 0l4.4 9.2 10.1 1.3-7.4 7 1.9 10L15 22.6l-9 4.9 1.9-10-7.4-7 10.1-1.3z'/%3E%3C/g%3E%3Cg transform='translate(246 104) rotate(20)'%3E%3Cpath d='M0 3v12l17 17 15-15L15 0H3z'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Cpath d='M13 22l8-8'/%3E%3Ccircle cx='13' cy='15' r='1.3'/%3E%3Ccircle cx='21' cy='21' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(18 196) rotate(-6)'%3E%3Cpath d='M0 8l17-8 17 8v19l-17 8-17-8zM0 8l17 8 17-8M17 16v19'/%3E%3C/g%3E%3Cg transform='translate(122 186)'%3E%3Cpath d='M13 24S0 15.5 0 7.5a6.5 6.5 0 0 1 13-2 6.5 6.5 0 0 1 13 2C26 15.5 13 24 13 24z'/%3E%3C/g%3E%3Cg transform='translate(204 196) rotate(-10)'%3E%3Cpath d='M2 9h26l-2 22H4z'/%3E%3Cpath d='M9 9V6a6 6 0 0 1 12 0v3'/%3E%3C/g%3E%3Cg transform='translate(92 258) scale(.6)'%3E%3Cpath d='M15 0l4.4 9.2 10.1 1.3-7.4 7 1.9 10L15 22.6l-9 4.9 1.9-10-7.4-7 10.1-1.3z'/%3E%3C/g%3E%3Cg transform='translate(262 250) rotate(12)'%3E%3Crect width='18' height='30' rx='3'/%3E%3Cpath d='M7 25h4'/%3E%3C/g%3E%3Cg transform='translate(150 258) rotate(10) scale(.7)'%3E%3Crect x='0' y='9' width='28' height='20' rx='2'/%3E%3Crect x='-2' y='3' width='32' height='7' rx='1.5'/%3E%3Cpath d='M14 3v26'/%3E%3C/g%3E%3Cg transform='translate(186 160) scale(.6)'%3E%3Cpath d='M13 24S0 15.5 0 7.5a6.5 6.5 0 0 1 13-2 6.5 6.5 0 0 1 13 2C26 15.5 13 24 13 24z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ================================================================
   TEMA CLARO (padrão)
   ================================================================ */
:root,
[data-theme="light"] {
  --body-bg-desktop:   #d1d7db;
  --wallpaper-color:   #efeae2;
  --doodle-color:      rgba(120, 100, 70, 0.13);

  --header-bg:         #0b5a49;
  --header-text:       #ffffff;
  --header-sub:        rgba(255, 255, 255, 0.88);
  --online-dot:        #25d366;

  --tabs-bar-bg:       rgba(239, 234, 226, 0.92);
  --tab-bg:            #ffffff;
  --tab-text:          #111b21;
  --tab-active-bg:     #e2f3e7;
  --tab-active-text:   #0b7a4b;

  --date-bg:           #ffffff;
  --date-text:         #54656f;

  --card-bg:           #ffffff;
  --text-primary:      #111b21;
  --text-body:         #3b4a54;
  --text-secondary:    #667781;
  --sender:            #0b7a4b;
  --link:              #027eb5;
  --code-bg:           #f0f2f5;

  --badge-exp-bg:      #fde0e0;
  --badge-exp-text:    #d42020;

  --coupon-bg:         #f4fbf6;
  --coupon-border:     #2e9e5a;
  --coupon-code:       #0b6b3f;

  --price-new:         #0b7a4b;
  --economy-bg:        #e2f5e6;
  --economy-text:      #0b6b3f;
  --img-bg:            #f3f5f6;

  --exp-box-bg:        #fff1f1;
  --exp-box-border:    #e53935;
  --exp-code:          #d32f2f;
  --exp-label-bg:      #e3e3e3;
  --exp-label-text:    #555555;

  --btn-yellow:        #ffd200;
  --btn-yellow-text:   #111111;

  --input-bg:          #ffffff;
  --input-icon:        #54656f;
  --input-ph:          #8696a0;
  --send-bg:           #128c5a;
  --send-icon:         #ffffff;

  --tick:              #34b7f1;
  --menu-bg:           #ffffff;
  --menu-text:         #111b21;
  --menu-hover:        #f0f2f5;

  --shadow-card:       0 1px 1.5px rgba(11, 20, 26, 0.13);
  --shadow-soft:       0 1px 2px rgba(11, 20, 26, 0.10);
  --shadow-panel:      0 6px 28px rgba(0, 0, 0, 0.18);
}

/* ================================================================
   TEMA ESCURO
   ================================================================ */
[data-theme="dark"] {
  --body-bg-desktop:   #0a1014;
  --wallpaper-color:   #0b141a;
  --doodle-color:      rgba(255, 255, 255, 0.055);

  --header-bg:         #202c33;
  --header-text:       #e9edef;
  --header-sub:        rgba(233, 237, 239, 0.75);
  --online-dot:        #21c063;

  --tabs-bar-bg:       rgba(11, 20, 26, 0.92);
  --tab-bg:            #202c33;
  --tab-text:          #d1d7db;
  --tab-active-bg:     rgba(33, 192, 99, 0.18);
  --tab-active-text:   #21c063;

  --date-bg:           #182229;
  --date-text:         #8696a0;

  --card-bg:           #202c33;
  --text-primary:      #e9edef;
  --text-body:         #d1d7db;
  --text-secondary:    #8696a0;
  --sender:            #21c063;
  --link:              #53bdeb;
  --code-bg:           #111b21;

  --badge-exp-bg:      rgba(244, 67, 54, 0.18);
  --badge-exp-text:    #ff6b6b;

  --coupon-bg:         rgba(33, 192, 99, 0.07);
  --coupon-border:     #21c063;
  --coupon-code:       #21c063;

  --price-new:         #21c063;
  --economy-bg:        rgba(33, 192, 99, 0.14);
  --economy-text:      #21c063;
  --img-bg:            #2a3942;

  --exp-box-bg:        rgba(244, 67, 54, 0.08);
  --exp-box-border:    #ef5350;
  --exp-code:          #ff6b6b;
  --exp-label-bg:      #2a3942;
  --exp-label-text:    #aebac1;

  --btn-yellow:        #ffd200;
  --btn-yellow-text:   #111111;

  --input-bg:          #2a3942;
  --input-icon:        #8696a0;
  --input-ph:          #8696a0;
  --send-bg:           #00a884;
  --send-icon:         #ffffff;

  --tick:              #53bdeb;
  --menu-bg:           #233138;
  --menu-text:         #e9edef;
  --menu-hover:        #182229;

  --shadow-card:       0 1px 1.5px rgba(0, 0, 0, 0.35);
  --shadow-soft:       0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-panel:      0 6px 32px rgba(0, 0, 0, 0.70);
}

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

/* Ajuste de rolagem ao carregar mensagens antigas é feito via JS */
html, body { overflow-anchor: none; }

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  background-color: var(--wallpaper-color);
  min-height: 100vh;
  transition: background-color 0.3s;
}

button, input, textarea, select { font-family: inherit; }

.ico { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* Papel de parede reutilizável */
.wallpaper {
  position: relative;
  background-color: var(--wallpaper-color);
  transition: background-color 0.3s;
}

.wallpaper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--doodle-color);
  -webkit-mask-image: var(--doodle);
          mask-image: var(--doodle);
  -webkit-mask-size: 300px 300px;
          mask-size: 300px 300px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* ================================================================
   AVATAR
   ================================================================ */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ffd200;
  color: #2d3277;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.msg-avatar {
  width: 36px;
  height: 36px;
  font-size: 22px;
  margin-top: 2px;
}

/* ================================================================
   BOTÕES DE ÍCONE / ABAS
   ================================================================ */
.icon-btn {
  background: none;
  border: none;
  color: inherit;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.icon-btn:hover { background-color: rgba(255, 255, 255, 0.12); }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: none;
  border-radius: 10px;
  background-color: var(--tab-bg);
  color: var(--tab-text);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.2s, color 0.2s;
}

.tab-btn.active {
  background-color: var(--tab-active-bg);
  color: var(--tab-active-text);
  font-weight: 500;
}

.tab-btn:hover:not(.active) { filter: brightness(0.97); }

/* ================================================================
   SEPARADOR DE DATA
   ================================================================ */
.date-separator { text-align: center; margin: 14px 0 2px; position: relative; z-index: 1; }

.date-separator span,
.feed-status > * {
  display: inline-block;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background-color: var(--date-bg);
  color: var(--date-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-soft);
}

/* ================================================================
   MENSAGEM
   ================================================================ */
.message-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;                 /* espaço do "rabinho" do balão */
  max-width: 86%;           /* margem livre à direita, como no WhatsApp */
  margin-top: 12px;
}

.msg-card {
  position: relative;
  flex: 1;
  min-width: 0;
  background-color: var(--card-bg);
  border-radius: 0 12px 12px 12px;
  padding: 12px 14px 10px;
  box-shadow: var(--shadow-card);
  transition: background-color 0.3s;
}

/* "rabinho" do balão */
.msg-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background-color: var(--card-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: background-color 0.3s;
}

.card-sender {
  font-size: 15px;
  font-weight: 500;
  color: var(--sender);
  margin-bottom: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.badge-expired { background-color: var(--badge-exp-bg); color: var(--badge-exp-text); }

.post-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: var(--img-bg);
}

/* Texto no formato do WhatsApp */
.wa-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}

.wa-text strong { color: var(--text-primary); font-weight: 700; }
.wa-text .wa-title { display: inline-block; font-size: 18px; line-height: 1.3; }
.wa-text a { color: var(--link); text-decoration: none; }
.wa-text a:hover { text-decoration: underline; }

.wa-text code {
  font-family: ui-monospace, Consolas, 'Courier New', monospace;
  font-size: 0.92em;
  background-color: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.wa-quote {
  display: inline-block;
  border-left: 3px solid var(--sender);
  padding-left: 8px;
  color: var(--text-secondary);
}

.money-new { font-size: 1.4em; font-weight: 700; color: var(--price-new); }
.money-old { text-decoration: line-through; color: var(--text-secondary); }

.msg-card.is-expired .wa-text,
.msg-card.is-expired .post-img { opacity: 0.7; }

/* Selo de economia */
.economy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 12px;
  border-radius: 6px;
  background-color: var(--economy-bg);
  color: var(--economy-text);
  font-size: 14px;
}

/* Caixa do cupom */
.coupon-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1.5px dashed var(--coupon-border);
  border-radius: 6px;
  background-color: var(--coupon-bg);
}

.coupon-code {
  font-size: 24px;
  font-weight: 700;
  color: var(--coupon-code);
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--coupon-code);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.copy-btn .ico { font-size: 20px; }
.copy-btn:hover { background-color: var(--economy-bg); }

/* Cupom expirado */
.expired-code-box {
  display: inline-block;
  min-width: 140px;
  padding: 12px 16px 10px;
  margin-bottom: 12px;
  border: 1.5px dashed var(--exp-box-border);
  border-radius: 6px;
  background-color: var(--exp-box-bg);
  text-align: center;
}

.expired-code {
  font-size: 22px;
  font-weight: 500;
  color: var(--exp-code);
  margin-bottom: 6px;
  text-decoration: line-through;
}

.expired-label {
  display: inline-block;
  padding: 3px 16px;
  border-radius: 4px;
  background-color: var(--exp-label-bg);
  color: var(--exp-label-text);
  font-size: 12px;
  font-weight: 500;
}

/* Botão amarelo */
.btn-primary {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  background-color: var(--btn-yellow);
  color: var(--btn-yellow-text);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}

.btn-primary .ico { font-size: 24px; }
.btn-primary:hover { filter: brightness(0.96); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* Rodapé */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.timestamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.timestamp .ico { width: 20px; height: 13px; color: var(--tick); }

/* ================================================================
   TOAST
   ================================================================ */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background-color: rgba(0, 0, 0, 0.82);
  color: #ffffff;
  padding: 9px 20px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  text-align: center;
  transition: opacity 0.3s, transform 0.3s;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 420px) {
  .avatar     { width: 42px; height: 42px; font-size: 24px; }
  .msg-avatar { width: 32px; height: 32px; font-size: 19px; }
  .message-row { max-width: 88%; }
  .coupon-code { font-size: 20px; }
}