/* =================================================================
   Chat Conversation Widget — Frontend CSS
   Namespace: .ccw-*  (avoid conflicts with theme/Elementor)
   ================================================================= */

.ccw-wrapper{
  --ccw-anim-duration: 600ms;
  --ccw-anim-stagger: 120ms;
  --ccw-typing-duration: 900ms;
  --ccw-bubble-bg-user: #ffffff;
  --ccw-bubble-bg-reply-from: #fde4ec;
  --ccw-bubble-bg-reply-to: #fbd0de;
  --ccw-tail-user: #ffffff;
  --ccw-tail-reply: #fbd0de;
  position: relative;
}

.ccw-list{
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0 auto;
  max-width: 1040px;
}

/* === Row layout ============================================= */
.ccw-row{
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.ccw-row--paired{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.ccw-row--paired::before{
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc(50% - 30px);
  width: 60px;
  height: 0;
  border-top: 2px dashed #fbd0de;
  transform: translateY(-50%);
  pointer-events: none;
}

.ccw-row--solo.ccw-row--user  { justify-content: flex-end;   flex-direction: row-reverse; }
.ccw-row--solo.ccw-row--reply { justify-content: flex-start; }

/* === Side container ========================================== */
.ccw-side{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  position: relative;
}
.ccw-side.ccw-row--user  { justify-content: flex-end;   flex-direction: row-reverse; }
.ccw-side.ccw-row--reply { justify-content: flex-start; }

/* === Avatar ================================================== */
.ccw-avatar{
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fde4ec 60%, #fbd0de 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(233,30,99,.12);
  font-size: var(--ccw-avatar-fs, 60px);
  position: relative;
}

.ccw-avatar img{
  width: 55%; height: 55%;
  object-fit: cover; display: block; border-radius: inherit;
}
.ccw-avatar .ccw-avatar__icon{
  font-size: 55%;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ccw-avatar .ccw-avatar__icon i{ font-size: 1em; line-height: 1; }
.ccw-avatar .ccw-avatar__icon svg{ width: 1em; height: 1em; display: block; fill: currentColor; }

.ccw-avatar__text{
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Heebo', serif;
  color: #e91e63;
  line-height: 1;
  font-size: 55%;
}

.ccw-avatar--preset{ background: transparent !important; padding: 0 !important; }
.ccw-avatar .ccw-avatar__svg{ width: 100% !important; height: 100% !important; display: block; }

/* === Bubble base ============================================= */
.ccw-bubble{
  position: relative;
  padding: 18px 26px;
  font-size: 18px;
  line-height: 1.45;
  max-width: 100%;
  word-break: break-word;
  background: var(--ccw-bubble-bg-user);
  color: #1a1a1a;
  border-radius: 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ccw-bubble strong, .ccw-bubble b{ color: inherit; font-weight: 700; }

.ccw-bubble--user{
  background: var(--ccw-bubble-bg-user);
  border-bottom-right-radius: 8px;
}
.ccw-bubble--reply{
  background: linear-gradient(180deg, var(--ccw-bubble-bg-reply-from) 0%, var(--ccw-bubble-bg-reply-to) 100%);
  border-bottom-left-radius: 8px;
}
.ccw-bubble--reply strong{ color: #e91e63; }

/* === Hover lift (subtle) ==================================== */
.ccw-hover-yes .ccw-bubble:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(216,27,96,.14);
}

/* === Bubble style variants =================================== */
/* rounded — default */

/* pill */
.ccw-user-style-pill  .ccw-bubble--user,
.ccw-reply-style-pill .ccw-bubble--reply{ border-radius: 999px !important; padding: 14px 28px; }

/* sharp */
.ccw-user-style-sharp  .ccw-bubble--user,
.ccw-reply-style-sharp .ccw-bubble--reply{ border-radius: 6px !important; }

/* minimal — outlined */
.ccw-user-style-minimal .ccw-bubble--user{
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px !important;
  padding: 14px 20px;
  box-shadow: none !important;
}
.ccw-reply-style-minimal .ccw-bubble--reply{
  background: transparent !important;
  border: 1px solid rgba(233,30,99,.25);
  border-radius: 12px !important;
  padding: 14px 20px;
  box-shadow: none !important;
}

/* glass */
.ccw-user-style-glass .ccw-bubble--user{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px !important;
}
.ccw-reply-style-glass .ccw-bubble--reply{
  background: rgba(251,208,222,.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 22px !important;
}

/* =====================================================
   CURVED iMessage-STYLE TAILS (CSS mask, no bg matching needed)
   Replaces the old polygon tail.
   ===================================================== */
.ccw-user-tail-yes .ccw-bubble--user::after{
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-end: -7px;
  width: 14px;
  height: 18px;
  background: var(--ccw-tail-user, var(--ccw-bubble-bg-user));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M0 0 L14 0 L14 18 C8 18 0 14 0 0 Z'/></svg>") no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M0 0 L14 0 L14 18 C8 18 0 14 0 0 Z'/></svg>") no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ccw-reply-tail-yes .ccw-bubble--reply::after{
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: -7px;
  width: 14px;
  height: 18px;
  background: var(--ccw-tail-reply, var(--ccw-bubble-bg-reply-to));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M14 0 L0 0 L0 18 C6 18 14 14 14 0 Z'/></svg>") no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M14 0 L0 0 L0 18 C6 18 14 14 14 0 Z'/></svg>") no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ccw-user-tail-no  .ccw-bubble--user::after,
.ccw-reply-tail-no .ccw-bubble--reply::after{ display: none !important; }

/* tails don't fit with pill / minimal / glass */
.ccw-user-style-pill   .ccw-bubble--user::after,
.ccw-user-style-glass  .ccw-bubble--user::after,
.ccw-user-style-minimal .ccw-bubble--user::after,
.ccw-reply-style-pill  .ccw-bubble--reply::after,
.ccw-reply-style-glass .ccw-bubble--reply::after,
.ccw-reply-style-minimal .ccw-bubble--reply::after{ display: none !important; }

/* =====================================================
   TYPING INDICATOR (animated 3 dots)
   ===================================================== */
.ccw-typing{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--ccw-bubble-bg-reply-from) 0%, var(--ccw-bubble-bg-reply-to) 100%);
  border-radius: 26px;
  border-bottom-left-radius: 8px;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.96);
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 20px rgba(216,27,96,.08);
}
.ccw-typing.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ccw-typing span{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(233,30,99,.55);
  animation: ccw-typing-bounce 1.4s infinite ease-in-out;
}
.ccw-typing span:nth-child(2){ animation-delay: .2s; }
.ccw-typing span:nth-child(3){ animation-delay: .4s; }

@keyframes ccw-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Reply side wrapper holds bubble + typing absolutely */
.ccw-reply-wrap{
  position: relative;
  display: inline-block;
  min-width: 80px;
}

/* =====================================================
   ANIMATIONS — Entrance
   ===================================================== */
.ccw-anim-yes .ccw-row{
  opacity: 0;
  transition: opacity var(--ccw-anim-duration) ease, transform var(--ccw-anim-duration) ease;
  transition-delay: calc(var(--ccw-i, 0) * var(--ccw-anim-stagger, 120ms));
}
.ccw-anim-yes.ccw-anim-type-fade        .ccw-row{ transform: none; }
.ccw-anim-yes.ccw-anim-type-fade-up     .ccw-row{ transform: translateY(24px); }
.ccw-anim-yes.ccw-anim-type-fade-side   .ccw-row--solo.ccw-row--user{ transform: translateX(-30px); }
.ccw-anim-yes.ccw-anim-type-fade-side   .ccw-row--solo.ccw-row--reply{ transform: translateX(30px); }
.ccw-anim-yes.ccw-anim-type-fade-side   .ccw-row--paired{ transform: translateY(24px); }
.ccw-anim-yes.ccw-anim-type-scale       .ccw-row{ transform: scale(.92); }
.ccw-anim-yes.ccw-anim-type-flip        .ccw-row{ transform: perspective(800px) rotateX(20deg); transform-origin: bottom; }

.ccw-anim-yes .ccw-row.is-visible{ opacity: 1 !important; transform: none !important; }

/* Sequential mode disables CSS staggered transition (JS controls timing) */
.ccw-anim-mode-sequential .ccw-row{ transition-delay: 0s !important; }

@media (prefers-reduced-motion: reduce){
  .ccw-anim-yes .ccw-row{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .ccw-typing span{ animation: none !important; }
}

/* =====================================================
   BACKGROUND PATTERNS (decorative)
   ===================================================== */
.ccw-bg-pattern-dots .ccw-wrapper{
  background-image: radial-gradient(rgba(233,30,99,.18) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.ccw-bg-pattern-grid .ccw-wrapper{
  background-image:
    linear-gradient(rgba(233,30,99,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,30,99,.10) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ccw-bg-pattern-whatsapp .ccw-wrapper{
  background-color: #efeae2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='%23000' fill-opacity='.04'><path d='M30 8c-2 0-3 1-3 3v2c-3 1-5 4-5 7v6c0 3 2 6 5 7v2c0 2 1 3 3 3s3-1 3-3v-2c3-1 5-4 5-7v-6c0-3-2-6-5-7v-2c0-2-1-3-3-3z'/></g></svg>");
}
.ccw-bg-pattern-blob .ccw-wrapper{
  background-image:
    radial-gradient(at 20% 10%, rgba(233,30,99,.10) 0, transparent 35%),
    radial-gradient(at 80% 80%, rgba(255,107,61,.10) 0, transparent 40%),
    radial-gradient(at 50% 50%, rgba(156,39,176,.06) 0, transparent 45%);
}
.ccw-bg-pattern-mesh .ccw-wrapper{
  background:
    linear-gradient(135deg, #fff5f8 0%, #fde9f0 50%, #ffe4e1 100%);
}

/* =====================================================
   APP-STYLE PRESETS (one-click looks)
   ===================================================== */

/* SOFT FEMININE — default */
.ccw-preset-soft .ccw-wrapper{
  background: linear-gradient(180deg, #fff5f8 0%, #fde9f0 100%);
}

/* MINIMAL CLEAN */
.ccw-preset-minimal .ccw-wrapper{ background: #ffffff; }
.ccw-preset-minimal .ccw-bubble--user{
  background: #f6f6f7;
  border-bottom-right-radius: 16px;
  box-shadow: none;
}
.ccw-preset-minimal .ccw-bubble--reply{
  background: #111;
  color: #fff;
  border-bottom-left-radius: 16px;
}
.ccw-preset-minimal .ccw-bubble--reply strong{ color: #ffd54f; }
.ccw-preset-minimal .ccw-avatar{ background: #f0f0f1; box-shadow: none; }
.ccw-preset-minimal .ccw-avatar__text{ color: #111; font-style: normal; }
.ccw-preset-minimal .ccw-row--paired::before{ border-color: #e5e5e7; }
.ccw-preset-minimal{ --ccw-tail-user: #f6f6f7; --ccw-tail-reply: #111; }

/* BOLD GRADIENT */
.ccw-preset-bold .ccw-wrapper{
  background: linear-gradient(135deg, #1a0033 0%, #4a0080 100%);
  color: #fff;
}
.ccw-preset-bold .ccw-bubble--user{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.ccw-preset-bold .ccw-bubble--reply{
  background: linear-gradient(135deg, #ff6b3d 0%, #e91e63 50%, #9c27b0 100%);
  color: #fff;
}
.ccw-preset-bold .ccw-bubble--reply strong{ color: #fff176; }
.ccw-preset-bold .ccw-avatar{ background: rgba(255,255,255,.12); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.ccw-preset-bold .ccw-avatar__text{ color: #fff; }
.ccw-preset-bold .ccw-row--paired::before{ border-color: rgba(255,255,255,.25); }
.ccw-preset-bold{ --ccw-tail-user: rgba(255,255,255,.08); --ccw-tail-reply: #9c27b0; }

/* iMESSAGE */
.ccw-preset-imessage .ccw-wrapper{ background: #ffffff; }
.ccw-preset-imessage .ccw-bubble--user{
  background: #e9e9eb;
  color: #000;
  border-bottom-right-radius: 18px;
}
.ccw-preset-imessage .ccw-bubble--reply{
  background: linear-gradient(180deg, #34a3ff 0%, #007aff 100%);
  color: #fff;
  border-bottom-left-radius: 18px;
}
.ccw-preset-imessage .ccw-bubble--reply strong{ color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); }
.ccw-preset-imessage{ --ccw-tail-user: #e9e9eb; --ccw-tail-reply: #007aff; }
.ccw-preset-imessage .ccw-row--paired::before{ border-color: #d1d1d6; }

/* WHATSAPP */
.ccw-preset-whatsapp .ccw-wrapper{
  background: #efeae2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='%23000' fill-opacity='.03'><circle cx='10' cy='10' r='1.5'/><circle cx='30' cy='30' r='1.5'/><circle cx='30' cy='10' r='.8'/><circle cx='10' cy='30' r='.8'/></g></svg>");
}
.ccw-preset-whatsapp .ccw-bubble--user{
  background: #ffffff;
  color: #111b21;
  border-bottom-right-radius: 6px;
  box-shadow: 0 1px 1px rgba(11,20,26,.13);
}
.ccw-preset-whatsapp .ccw-bubble--reply{
  background: #d9fdd3;
  color: #111b21;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 1px rgba(11,20,26,.13);
}
.ccw-preset-whatsapp .ccw-bubble--reply strong{ color: #00a884; }
.ccw-preset-whatsapp{ --ccw-tail-user: #ffffff; --ccw-tail-reply: #d9fdd3; }
.ccw-preset-whatsapp .ccw-row--paired::before{ border-color: #c3b8a8; }

/* INSTAGRAM DM */
.ccw-preset-instagram .ccw-wrapper{ background: #ffffff; }
.ccw-preset-instagram .ccw-bubble--user{
  background: #efefef;
  color: #000;
  border-radius: 22px !important;
  border-bottom-right-radius: 6px !important;
}
.ccw-preset-instagram .ccw-bubble--reply{
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  color: #fff;
  border-radius: 22px !important;
  border-bottom-left-radius: 6px !important;
}
.ccw-preset-instagram .ccw-bubble--reply strong{ color: #fff; }
.ccw-preset-instagram{ --ccw-tail-user: #efefef; --ccw-tail-reply: #fcb045; }

/* TELEGRAM */
.ccw-preset-telegram .ccw-wrapper{
  background: linear-gradient(135deg, #cdeaff 0%, #e8f4ff 50%, #fce4ec 100%);
}
.ccw-preset-telegram .ccw-bubble--user{
  background: #ffffff;
  color: #000;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,35,47,.15);
}
.ccw-preset-telegram .ccw-bubble--reply{
  background: linear-gradient(180deg, #6cf 0%, #2aabee 100%);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.ccw-preset-telegram .ccw-bubble--reply strong{ color: #fff; background: rgba(255,255,255,.18); padding: 0 4px; border-radius: 3px; }
.ccw-preset-telegram{ --ccw-tail-user: #ffffff; --ccw-tail-reply: #2aabee; }

/* MONO — pure black/white */
.ccw-preset-mono .ccw-wrapper{ background: #fafafa; }
.ccw-preset-mono .ccw-bubble--user{
  background: #ffffff;
  color: #111;
  border: 1px solid #e5e5e5;
  border-radius: 16px !important;
  box-shadow: none;
}
.ccw-preset-mono .ccw-bubble--reply{
  background: #111;
  color: #fff;
  border-radius: 16px !important;
}
.ccw-preset-mono .ccw-bubble--reply strong{ color: #fff; border-bottom: 2px solid #fff; }
.ccw-preset-mono .ccw-avatar{ background: #f0f0f0; box-shadow: none; border: 1px solid #e5e5e5; }
.ccw-preset-mono .ccw-row--paired::before{ border-color: #d4d4d4; }
.ccw-preset-mono{ --ccw-tail-user: #ffffff; --ccw-tail-reply: #111; }

/* NEON — cyberpunk */
.ccw-preset-neon .ccw-wrapper{
  background: radial-gradient(at 30% 20%, #1a0040 0%, #0a0014 100%);
  color: #fff;
}
.ccw-preset-neon .ccw-bubble--user{
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid #ff00ff;
  box-shadow: 0 0 20px rgba(255,0,255,.4), inset 0 0 10px rgba(255,0,255,.1);
  text-shadow: 0 0 10px rgba(255,0,255,.5);
}
.ccw-preset-neon .ccw-bubble--reply{
  background: rgba(0,255,255,.08);
  color: #fff;
  border: 1px solid #00ffff;
  box-shadow: 0 0 24px rgba(0,255,255,.5), inset 0 0 10px rgba(0,255,255,.1);
}
.ccw-preset-neon .ccw-bubble--reply strong{ color: #ffff00; text-shadow: 0 0 10px rgba(255,255,0,.6); }
.ccw-preset-neon .ccw-avatar{
  background: rgba(255,0,255,.12);
  box-shadow: 0 0 18px rgba(255,0,255,.4);
}
.ccw-preset-neon .ccw-avatar__text{ color: #ff00ff; text-shadow: 0 0 8px rgba(255,0,255,.7); }
.ccw-preset-neon .ccw-row--paired::before{ border-color: rgba(0,255,255,.4); }

/* =====================================================
   RESPONSIVE — Tablet, Mobile, Very narrow
   ===================================================== */

/* Tablet landscape & small laptop (<=1024px) — tighten paired layout */
@media (max-width: 1024px){
  .ccw-row--paired{ gap: 36px; }
  .ccw-row--paired::before{
    width: 36px;
    inset-inline-start: calc(50% - 18px);
  }
  .ccw-list{ gap: 24px; }
}

/* Tablet portrait (<=768px) — pairs auto-stack when toggle is on */
@media (max-width: 768px){
  .ccw-bubble{
    font-size: 17px;
    padding: 16px 22px;
  }
  .ccw-avatar{
    width: 52px;
    height: 52px;
    --ccw-avatar-fs: 52px;
  }
  .ccw-typing{ padding: 16px 20px; }

  .ccw-m-stack-yes .ccw-row--paired{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ccw-m-stack-yes .ccw-row--paired::before{ display: none; }
  .ccw-m-stack-yes .ccw-row--paired .ccw-side.ccw-row--reply{
    flex-direction: row;
    justify-content: flex-start;
  }
  /* Bubble width cap — prevents stretched single bubbles */
  .ccw-row--solo .ccw-bubble,
  .ccw-m-stack-yes .ccw-row--paired .ccw-bubble{
    max-width: 80%;
  }
}

/* Mobile (<=560px) */
@media (max-width: 560px){
  .ccw-list{ gap: 16px; }
  .ccw-bubble{
    font-size: 15.5px;
    padding: 13px 18px;
  }
  .ccw-avatar{
    width: 44px;
    height: 44px;
    --ccw-avatar-fs: 44px;
  }
  .ccw-side{ gap: 10px; }
  .ccw-typing{
    padding: 12px 16px;
    gap: 4px;
  }
  .ccw-typing span{
    width: 6px;
    height: 6px;
  }
  .ccw-reply-wrap{ min-width: 54px; }
  .ccw-row--solo .ccw-bubble,
  .ccw-m-stack-yes .ccw-row--paired .ccw-bubble{
    max-width: 86%;
  }
  /* Background patterns scale down */
  .ccw-bg-pattern-dots .ccw-wrapper{ background-size: 16px 16px; }
  .ccw-bg-pattern-grid .ccw-wrapper{ background-size: 24px 24px; }
}

/* Very narrow (<=380px) — phones in landscape, small Androids */
@media (max-width: 380px){
  .ccw-bubble{
    font-size: 14.5px;
    padding: 12px 16px;
    border-radius: 20px;
  }
  .ccw-bubble--user{ border-bottom-right-radius: 6px; }
  .ccw-bubble--reply{ border-bottom-left-radius: 6px; }
  .ccw-avatar{
    width: 38px;
    height: 38px;
    --ccw-avatar-fs: 38px;
  }
  .ccw-side{ gap: 8px; }
  /* Tail offset compensates for smaller bubble radius */
  .ccw-user-tail-yes .ccw-bubble--user::after,
  .ccw-reply-tail-yes .ccw-bubble--reply::after{
    width: 12px; height: 14px;
  }
}