/* WhatsApp bubble personalization v69 — per-chat outgoing bubble color + balanced rhythm. */

/* Group chats keep the established compact rhythm. Personal chats get a little
   more breathing room because there are no sender labels / avatars between runs,
   so the same numeric margins looked visually much tighter than the reference. */
html[data-social-app="whatsapp"] .msg-row{margin:6px 0!important;}
html[data-social-app="whatsapp"] .wa-cluster-start,
html[data-social-app="whatsapp"] .wa-cluster-mid{margin-bottom:3px!important;}
html[data-social-app="whatsapp"] .wa-cluster-mid,
html[data-social-app="whatsapp"] .wa-cluster-end{margin-top:3px!important;}

/* Personal-chat rhythm matched to the supplied WhatsApp reference:
   ~11px between different sender runs and ~4px inside one sender run. */
html[data-social-app="whatsapp"] .wa-chat-dm .msg-row{margin:11px 0!important;}
html[data-social-app="whatsapp"] .wa-chat-dm .wa-cluster-start,
html[data-social-app="whatsapp"] .wa-chat-dm .wa-cluster-mid{margin-bottom:4px!important;}
html[data-social-app="whatsapp"] .wa-chat-dm .wa-cluster-mid,
html[data-social-app="whatsapp"] .wa-chat-dm .wa-cluster-end{margin-top:4px!important;}

html[data-social-app="whatsapp"] .bubble{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
html[data-social-app="whatsapp"] .bubble-text{
  position:static;
  top:auto;
}

/* Custom outgoing bubble metadata follows the selected bubble color. */
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .bubble-meta-inline,
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .sticker-meta,
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .media-meta-overlay{
  color:var(--bubble-out-meta,var(--bubble-meta))!important;
}
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .bubble-meta-inline span[style*="--check-read"],
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .bubble-meta-inline span[style*="var(--check-read)"],
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .sticker-meta span[style*="--check-read"],
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .media-meta-overlay span[style*="--check-read"]{
  color:var(--bubble-out-read,var(--check-read))!important;
}
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .pending-clock,
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.out .pending-clock svg{
  color:var(--bubble-out-meta,var(--bubble-meta))!important;
  stroke:currentColor!important;
}

.wa-bubble-color-chip{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  border:1px solid rgba(120,120,128,.20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  margin-left:auto;
}

.wa-bubble-picker-preview{
  min-height:158px;
  border-radius:22px;
  margin:4px 0 16px;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  background:var(--chat-bg);
  border:1px solid var(--divider);
  overflow:hidden;
}
.wa-bubble-picker-preview .wa-preview-row{display:flex;width:100%;}
.wa-bubble-picker-preview .wa-preview-row.out{justify-content:flex-end;}
.wa-bubble-picker-preview .wa-preview-bubble{
  min-width:92px;
  max-width:72%;
  min-height:40px;
  border-radius:19px;
  padding:9px 14px;
  display:flex;
  align-items:center;
  font-size:15px;
  line-height:20px;
  box-shadow:0 .5px 1.5px rgba(0,0,0,.10);
}
.wa-bubble-picker-preview .wa-preview-row.in .wa-preview-bubble{
  background:var(--bubble-in);
  color:var(--bubble-in-text);
}
.wa-preview-message{
  display:inline-flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
}
.wa-preview-copy{flex:1 1 auto;min-width:72px;}
.wa-preview-meta{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
  font-size:10.5px;
  line-height:12px;
  white-space:nowrap;
  color:var(--wa-preview-meta,currentColor);
}
.wa-preview-checks{
  font-size:11px;
  font-weight:800;
  letter-spacing:-2px;
  color:var(--wa-preview-read,currentColor);
}

.wa-bubble-palette{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px 10px;
  margin:8px 0 18px;
}
.wa-bubble-swatch{
  position:relative;
  width:42px;
  height:42px;
  max-width:100%;
  justify-self:center;
  border-radius:50%;
  border:1px solid rgba(120,120,128,.20);
  padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
  background:var(--swatch,#d7fdd2);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.wa-bubble-swatch:active{transform:scale(.94);}
.wa-bubble-swatch.selected{
  border-color:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px var(--sheet-bg),0 0 0 5px var(--text-main),inset 0 0 0 1px rgba(255,255,255,.22);
}
.wa-bubble-swatch.selected::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--swatch-check,#111);
  font-size:18px;
  font-weight:800;
  text-shadow:0 1px 2px rgba(255,255,255,.34),0 -1px 2px rgba(0,0,0,.12);
}
.wa-bubble-swatch.wa-default-swatch{
  background:linear-gradient(135deg,#d7fdd2 0 50%,#165c46 50% 100%);
}

.wa-bubble-custom-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:8px;
  align-items:center;
  margin-top:7px;
}
.wa-bubble-custom-row input[type="color"]{
  width:52px;
  height:44px;
  border:0;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
}
.wa-bubble-custom-row input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.wa-bubble-custom-row input[type="color"]::-webkit-color-swatch{border:1px solid var(--divider);border-radius:12px;}
.wa-bubble-custom-row .text-field{margin:0;min-width:0;}
.wa-bubble-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.wa-bubble-actions .btn{width:100%;min-width:0;}

@media(max-width:420px){
  .wa-bubble-palette{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media(max-width:350px){
  .wa-bubble-palette{grid-template-columns:repeat(4,minmax(0,1fr));}
  .wa-bubble-actions{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .wa-bubble-swatch{transition:none;}
}


/* v70 — media timestamps stay white on photos/videos in every theme.
   Keep delivery/read marks free to use their own status color. */
html[data-social-app="whatsapp"] .bubble.media.wa-media-no-caption .media-wrap>.media-meta-overlay,
html[data-theme="light"][data-social-app="whatsapp"] .bubble.media.wa-media-no-caption .media-wrap>.media-meta-overlay,
html[data-theme="dark"][data-social-app="whatsapp"] .bubble.media.wa-media-no-caption .media-wrap>.media-meta-overlay,
html[data-social-app="whatsapp"] [data-wa-custom-bubble="1"] .bubble.media.out.wa-media-no-caption .media-wrap>.media-meta-overlay{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}