/* =========================================================
   RIBEIRO CLONE - LAYOUT ESTILO WHATSAPP WEB
   ========================================================= */

:root {
  --wa-bg: #0b141a;
  --wa-chat-bg: #0b141a;
  --wa-left: #111b21;
  --wa-left-hover: #202c33;
  --wa-left-active: #2a3942;
  --wa-top: #202c33;
  --wa-border: #222d34;
  --wa-search: #202c33;
  --wa-input: #2a3942;
  --wa-text: #e9edef;
  --wa-muted: #8696a0;
  --wa-muted-2: #667781;
  --wa-green: #00a884;
  --wa-green-dark: #005c4b;
  --wa-green-bubble: #005c4b;
  --wa-in-bubble: #202c33;
  --wa-chip: #26353d;
  --wa-chip-active: #00a884;
  --wa-danger: #ef5350;
}

* {
  box-sizing: border-box !important;
}

html,
body {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #111b21 !important;
  color: var(--wa-text) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
}

/* ===== Layout principal ===== */

.app {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 56px 392px minmax(0, 1fr) !important;
  background: var(--wa-bg) !important;
  overflow: hidden !important;
}

/* Caso a barra lateral de ícones tenha outro nome */
.rail,
.iconbar,
.navbar,
.app > nav,
.app > aside:first-child {
  width: 56px !important;
  background: #111b21 !important;
  border-right: 1px solid var(--wa-border) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 0 !important;
  gap: 10px !important;
}

/* Botões da barra lateral */
.rail a,
.rail button,
.iconbar a,
.iconbar button,
.navbar a,
.navbar button,
.app > nav a,
.app > nav button,
.app > aside:first-child a,
.app > aside:first-child button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  color: #aebac1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

.rail a:hover,
.rail button:hover,
.iconbar a:hover,
.iconbar button:hover,
.navbar a:hover,
.navbar button:hover,
.app > nav a:hover,
.app > nav button:hover,
.app > aside:first-child a:hover,
.app > aside:first-child button:hover {
  background: #202c33 !important;
}

.rail .active,
.iconbar .active,
.navbar .active,
.app > nav .active,
.app > aside:first-child .active {
  background: var(--wa-green) !important;
  color: #001f19 !important;
}

/* ===== Sidebar / lista de conversas ===== */

.sidebar {
  width: 392px !important;
  min-width: 392px !important;
  height: 100vh !important;
  background: var(--wa-left) !important;
  border-right: 1px solid var(--wa-border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Header da esquerda */
.sidebar header,
.sidebar .side-header,
.sidebar .list-header {
  height: 64px !important;
  min-height: 64px !important;
  background: var(--wa-left) !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  border-bottom: none !important;
}

.sidebar h1,
.sidebar .title {
  margin: 0 !important;
  color: var(--wa-text) !important;
  font-size: 22px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -.2px !important;
}

.sidebar small,
.sidebar .subtitle {
  color: var(--wa-muted) !important;
  font-size: 13px !important;
}

/* Botão QR no header */
.sidebar header a,
.sidebar header button,
.sidebar .side-header a,
.sidebar .side-header button {
  margin-left: auto !important;
  background: var(--wa-green) !important;
  color: #001f19 !important;
  border-radius: 12px !important;
  min-width: 42px !important;
  height: 42px !important;
  border: none !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Busca */
.search,
.sidebar form,
.sidebar .searchbox {
  padding: 0 12px 8px 12px !important;
}

.search input,
input[name="q"],
input[type="search"],
input[placeholder*="Pesquisar"] {
  width: 100% !important;
  height: 40px !important;
  background: var(--wa-search) !important;
  border: none !important;
  outline: none !important;
  border-radius: 8px !important;
  color: var(--wa-text) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

.search input::placeholder,
input[name="q"]::placeholder,
input[type="search"]::placeholder {
  color: var(--wa-muted) !important;
}

/* Filtros/chips */
.filters,
.tabs,
.chips {
  display: flex !important;
  gap: 8px !important;
  padding: 6px 12px 8px 12px !important;
  flex-wrap: wrap !important;
}

.filters a,
.filters button,
.tabs a,
.tabs button,
.chip,
.filter {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  border-radius: 17px !important;
  padding: 0 14px !important;
  background: var(--wa-chip) !important;
  color: var(--wa-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.filters .active,
.filters a.active,
.filters button.active,
.tabs .active,
.chip.active,
.filter.active {
  background: var(--wa-chip-active) !important;
  color: #003c30 !important;
}

/* Lista */
.conversation-list,
.convs,
.threads,
.sidebar .list {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Item da conversa */
.conv,
.chat-item,
.conversation,
.thread {
  position: relative !important;
  width: 100% !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 8px 12px !important;
  color: var(--wa-text) !important;
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(134,150,160,.15) !important;
}

.conv:hover,
.chat-item:hover,
.conversation:hover,
.thread:hover {
  background: var(--wa-left-hover) !important;
}

.conv.active,
.chat-item.active,
.conversation.active,
.thread.active,
.selected {
  background: var(--wa-left-active) !important;
}

/* Avatar */
.avatar,
.contact-avatar {
  width: 49px !important;
  height: 49px !important;
  border-radius: 50% !important;
  background: #2a3942 !important;
  color: var(--wa-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  overflow: hidden !important;
}

/* textos da conversa */
.conv .name,
.conv-name,
.contact-name,
.chat-item .name {
  color: var(--wa-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.preview,
.last-message,
.conv .preview,
.chat-item .preview {
  color: var(--wa-muted) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.conv time,
.chat-item time,
.thread time,
.time-list {
  color: var(--wa-muted) !important;
  font-size: 12px !important;
  align-self: start !important;
  margin-top: 4px !important;
}

/* Bolinha de não lidas */
.unread,
.count,
.counter {
  background: var(--wa-green) !important;
  color: #001f19 !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== Chat ===== */

.chat {
  min-width: 0 !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--wa-chat-bg) !important;
  overflow: hidden !important;
}

/* Header do chat */
.chat-header {
  height: 64px !important;
  min-height: 64px !important;
  background: var(--wa-top) !important;
  border-left: 1px solid rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--wa-border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  gap: 12px !important;
}

.chat-header .avatar {
  width: 43px !important;
  height: 43px !important;
  font-size: 17px !important;
}

.chat-header h2,
.chat-header .name,
.chat-title {
  margin: 0 !important;
  color: var(--wa-text) !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
}

.chat-header small,
.chat-header .subtitle {
  color: var(--wa-muted) !important;
  font-size: 13px !important;
}

/* Botões topo */
.chat-header button,
.chat-header a,
.top-actions button,
.top-actions a {
  height: 40px !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.chat-header .assumir,
.chat-header .take,
button.assumir,
button.take {
  background: #ff5757 !important;
  color: white !important;
}

.chat-header .bruna,
button.bruna {
  background: var(--wa-green) !important;
  color: #001f19 !important;
}

/* Barra etiqueta/status */
.meta-bar,
.status-bar,
.tagbar {
  min-height: 42px !important;
  background: var(--wa-left) !important;
  border-bottom: 1px solid var(--wa-border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  color: var(--wa-muted) !important;
  font-size: 13px !important;
}

.badge,
.label,
.tag {
  background: var(--wa-green) !important;
  color: #001f19 !important;
  border-radius: 10px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Fundo da conversa */
.messages {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 28px 7.5% 18px 7.5% !important;
  background-color: #0b141a !important;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}

/* Balões */
.bubble {
  width: fit-content !important;
  max-width: 62% !important;
  padding: 6px 8px 5px 8px !important;
  margin: 2px 0 !important;
  border-radius: 7.5px !important;
  color: var(--wa-text) !important;
  font-size: 14.2px !important;
  line-height: 19px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.35) !important;
  word-break: break-word !important;
}

.bubble.in {
  background: var(--wa-in-bubble) !important;
  margin-right: auto !important;
  border-top-left-radius: 0 !important;
}

.bubble.out {
  background: var(--wa-green-bubble) !important;
  margin-left: auto !important;
  border-top-right-radius: 0 !important;
}

.bubble small {
  display: block !important;
  text-align: right !important;
  color: rgba(233,237,239,.66) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  margin-top: 2px !important;
}

/* Áudio */
.bubble audio {
  width: 300px !important;
  max-width: 100% !important;
  height: 42px !important;
  border-radius: 22px !important;
  display: block !important;
}

/* Composer */
.composer {
  min-height: 62px !important;
  flex-shrink: 0 !important;
  background: var(--wa-top) !important;
  border-top: 1px solid var(--wa-border) !important;
  padding: 10px 16px !important;
  display: grid !important;
  grid-template-columns: 42px 42px minmax(0, 1fr) 74px !important;
  align-items: center !important;
  gap: 8px !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
}

.composer button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: #aebac1 !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

.composer button:hover {
  background: rgba(255,255,255,.06) !important;
}

.input-wrap {
  min-width: 0 !important;
}

.composer textarea,
#messageInput {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 120px !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 8px !important;
  background: var(--wa-input) !important;
  color: var(--wa-text) !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  line-height: 20px !important;
}

.composer textarea::placeholder {
  color: var(--wa-muted) !important;
}

.composer .send,
button.send,
button[type="submit"] {
  width: 74px !important;
  min-width: 74px !important;
  border-radius: 21px !important;
  background: var(--wa-green) !important;
  color: #001f19 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Sugestões */
#suggestBox,
.suggest {
  background: #233138 !important;
  border: 1px solid #31424b !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
}

#suggestBox .sg,
.suggest .sg {
  padding: 10px 12px !important;
  color: var(--wa-text) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  cursor: pointer !important;
}

#suggestBox .sg:hover,
.suggest .sg:hover {
  background: #2a3942 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Responsivo */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 52px 1fr !important;
  }

  .sidebar {
    width: auto !important;
    min-width: 0 !important;
  }

  .chat {
    display: none !important;
  }

  body:has(.chat) .chat {
    display: flex !important;
  }

  .messages {
    padding: 18px 12px 12px 12px !important;
  }

  .bubble {
    max-width: 86% !important;
  }

  .composer {
    grid-template-columns: 38px 38px minmax(0, 1fr) 62px !important;
    padding: 8px !important;
  }

  .composer .send,
  button.send {
    width: 62px !important;
    min-width: 62px !important;
  }
}

/* =========================================================
   AJUSTE FINO - MAIS PRÓXIMO DO WHATSAPP WEB
   ========================================================= */

/* Fundo da conversa: tirar o quadriculado */
.messages {
  background-color: #0b141a !important;
  background-image: none !important;
  padding: 20px 6.5% 14px 6.5% !important;
}

/* Bolhas mais finas e mais próximas do texto */
.bubble {
  width: fit-content !important;
  max-width: 46% !important;
  padding: 4px 7px 3px 7px !important;
  border-radius: 7.5px !important;
  line-height: 18px !important;
  font-size: 14px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.28) !important;
}

/* Bolha recebida */
.bubble.in {
  background: #202c33 !important;
  border-top-left-radius: 0 !important;
}

/* Bolha enviada */
.bubble.out {
  background: #005c4b !important;
  border-top-right-radius: 0 !important;
  margin-left: auto !important;
}

/* Texto dentro da bolha */
.bubble > div,
.bubble p,
.bubble span {
  margin: 0 !important;
}

/* Horário mais discreto */
.bubble small {
  display: block !important;
  text-align: right !important;
  color: rgba(233,237,239,.66) !important;
  font-size: 11px !important;
  line-height: 12px !important;
  margin-top: 2px !important;
}

/* Áudio mais compacto */
.bubble:has(audio) {
  max-width: 320px !important;
  padding: 4px 6px 3px 6px !important;
}

/* Player de áudio mais enxuto */
.bubble audio {
  width: 250px !important;
  max-width: 100% !important;
  height: 36px !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 18px !important;
}

/* Texto [audio recebido] menor */
.bubble:has(audio) div,
.bubble:has(audio) p,
.bubble:has(audio) span {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 16px !important;
}

/* Lista da esquerda um pouco mais próxima do WhatsApp */
.conv,
.chat-item,
.conversation,
.thread {
  min-height: 72px !important;
  padding: 8px 12px !important;
}

/* Campo de digitação mais parecido */
.composer {
  min-height: 60px !important;
  padding: 9px 14px !important;
}

.composer textarea,
#messageInput {
  height: 40px !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}

/* Botão enviar um pouco menor */
.composer .send,
button.send,
button[type="submit"] {
  height: 40px !important;
  min-width: 70px !important;
  width: 70px !important;
  border-radius: 20px !important;
}

/* Responsivo */
@media (max-width: 800px) {
  .messages {
    padding: 14px 10px 10px 10px !important;
  }

  .bubble {
    max-width: 82% !important;
  }

  .bubble audio {
    width: 220px !important;
    height: 34px !important;
  }
}

/* =========================================================
   PATCH WHATSAPP WEB REAL - CORES + FUNDO + BOLHAS
   ========================================================= */

:root {
  --wa-real-bg: #111b21;
  --wa-real-chat: #0b141a;
  --wa-real-panel: #111b21;
  --wa-real-panel2: #202c33;
  --wa-real-input: #2a3942;
  --wa-real-border: #26343d;
  --wa-real-text: #e9edef;
  --wa-real-muted: #8696a0;
  --wa-real-green: #00a884;
  --wa-real-bubble-out: #005c4b;
  --wa-real-bubble-in: #202c33;
}

/* Fundo geral */
html,
body,
.app {
  background: #111b21 !important;
  color: var(--wa-real-text) !important;
}

/* Barra lateral esquerda */
.sidebar {
  background: #111b21 !important;
  border-right: 1px solid #26343d !important;
}

.sidebar header {
  background: #111b21 !important;
}

.sidebar h1 {
  color: #e9edef !important;
}

.sidebar small,
.preview,
.last-message {
  color: #8696a0 !important;
}

/* Busca igual WhatsApp */
.search input,
input[name="q"],
input[type="search"] {
  background: #202c33 !important;
  color: #d1d7db !important;
  border-radius: 8px !important;
}

/* Filtros */
.filters a,
.filters button,
.chip,
.filter {
  background: #202c33 !important;
  color: #d1d7db !important;
}

.filters .active,
.filters a.active,
.filters button.active,
.chip.active,
.filter.active {
  background: #00a884 !important;
  color: #061f1a !important;
}

/* Lista de conversas */
.conv,
.chat-item,
.conversation,
.thread {
  background: #111b21 !important;
  border-bottom: 1px solid rgba(134,150,160,.15) !important;
}

.conv:hover,
.chat-item:hover,
.conversation:hover,
.thread:hover {
  background: #202c33 !important;
}

.conv.active,
.chat-item.active,
.conversation.active,
.thread.active,
.selected {
  background: #2a3942 !important;
}

/* Avatares */
.avatar,
.contact-avatar {
  background: #2a3942 !important;
  color: #d1d7db !important;
}

/* Header da conversa */
.chat-header {
  background: #202c33 !important;
  border-bottom: 1px solid #26343d !important;
}

.chat-header h2,
.chat-header .name,
.chat-title {
  color: #e9edef !important;
}

.chat-header small {
  color: #8696a0 !important;
}

/* Barra abaixo do header */
.meta-bar,
.status-bar,
.tagbar {
  background: #111b21 !important;
  border-bottom: 1px solid #26343d !important;
}

/* Fundo da conversa estilo WhatsApp Web */
.messages {
  background-color: #0b141a !important;

  background-image:
    url("data:image/svg+xml,%3Csvg width='420' height='420' viewBox='0 0 420 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 48c18-18 42-18 60 0s18 42 0 60-42 18-60 0-18-42 0-60z'/%3E%3Cpath d='M47 66h26M60 53v26'/%3E%3Cpath d='M162 34c22 0 40 18 40 40s-18 40-40 40-40-18-40-40 18-40 40-40z'/%3E%3Cpath d='M145 76c10 12 26 12 36 0'/%3E%3Cpath d='M272 52l36 36M308 52l-36 36'/%3E%3Cpath d='M340 38h42v52h-42zM350 100h22'/%3E%3Cpath d='M42 180c10-18 32-22 48-8 18 16 14 46-8 58-20 10-46 0-52-22'/%3E%3Cpath d='M146 162h60v44h-60zM158 206l-10 24M194 206l10 24'/%3E%3Cpath d='M270 166c20 0 36 16 36 36s-16 36-36 36-36-16-36-36 16-36 36-36z'/%3E%3Cpath d='M254 202h32M270 186v32'/%3E%3Cpath d='M346 170c22 4 38 24 34 46-4 22-24 38-46 34-22-4-38-24-34-46'/%3E%3Cpath d='M48 320h70M48 344h48'/%3E%3Cpath d='M170 300l34 34-34 34-34-34z'/%3E%3Cpath d='M260 304h66v48h-66zM274 320h38'/%3E%3Cpath d='M350 300c24 20 24 52 0 72-24-20-24-52 0-72z'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: repeat !important;
  background-size: 420px 420px !important;
  padding: 22px 6.5% 14px 6.5% !important;
}

/* Bolhas mais parecidas com WhatsApp */
.bubble {
  width: fit-content !important;
  max-width: 48% !important;
  padding: 5px 7px 4px 7px !important;
  border-radius: 7.5px !important;
  font-size: 14.2px !important;
  line-height: 19px !important;
  box-shadow: 0 1px .5px rgba(0,0,0,.25) !important;
}

/* Recebida */
.bubble.in {
  background: #202c33 !important;
  color: #e9edef !important;
  border-top-left-radius: 0 !important;
  margin-right: auto !important;
}

/* Enviada */
.bubble.out {
  background: #005c4b !important;
  color: #e9edef !important;
  border-top-right-radius: 0 !important;
  margin-left: auto !important;
}

/* Horário */
.bubble small {
  color: rgba(233,237,239,.7) !important;
  font-size: 11px !important;
  line-height: 12px !important;
  margin-top: 2px !important;
}

/* Áudio estilo mais compacto */
.bubble:has(audio) {
  max-width: 340px !important;
  min-width: 285px !important;
  padding: 5px 7px 4px 7px !important;
}

.bubble audio {
  width: 265px !important;
  height: 38px !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 20px !important;
}

/* Texto abaixo do áudio */
.bubble:has(audio) div {
  font-size: 12.5px !important;
  line-height: 15px !important;
  margin-top: 3px !important;
  color: #e9edef !important;
}

/* Campo de mensagem igual WhatsApp */
.composer {
  background: #202c33 !important;
  border-top: 1px solid #26343d !important;
  min-height: 62px !important;
  padding: 10px 14px !important;
}

.composer textarea,
#messageInput {
  background: #2a3942 !important;
  color: #e9edef !important;
  border-radius: 8px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 11px 14px !important;
}

.composer textarea::placeholder,
#messageInput::placeholder {
  color: #8696a0 !important;
}

.composer button {
  color: #aebac1 !important;
}

.composer .send,
button.send,
button[type="submit"] {
  background: #00a884 !important;
  color: #061f1a !important;
}

/* Botões topo */
button.assumir,
.chat-header .assumir,
button.take {
  background: #ef5350 !important;
  color: #fff !important;
}

button.bruna,
.chat-header .bruna {
  background: #00a884 !important;
  color: #061f1a !important;
}

/* Mobile */
@media (max-width: 800px) {
  .messages {
    padding: 16px 10px 10px 10px !important;
    background-size: 360px 360px !important;
  }

  .bubble {
    max-width: 84% !important;
  }

  .bubble:has(audio) {
    min-width: 250px !important;
    max-width: 280px !important;
  }

  .bubble audio {
    width: 235px !important;
  }
}