/* Chunk's DMs: scripted FAQ widget for the Chuffed site
   Pure CSS, no dependencies. Everything is prefixed cdm- to stay out of the site's way. */

.cdm{
  --cdm-brown:#3B2418;
  --cdm-cream:#FFF4E6;
  --cdm-pink:#F7A8BE;
  --cdm-ink:#2A1810;
  --cdm-line:rgba(59,36,24,.14);
  --cdm-shadow:0 14px 40px rgba(59,36,24,.28);
  --cdm-sans:Nunito,'Segoe UI',system-ui,sans-serif;
  --cdm-serif:Fraunces,Georgia,serif;
  font-family:var(--cdm-sans);
  color:var(--cdm-brown);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
.cdm *,.cdm *::before,.cdm *::after{box-sizing:border-box;margin:0;padding:0}
.cdm button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.cdm img{display:block;max-width:100%}

/* Launcher: the floating avatar bottom right */
.cdm-launch{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:64px;height:64px;border-radius:50%;
  background:var(--cdm-pink);
  border:3px solid var(--cdm-cream);
  box-shadow:var(--cdm-shadow);
  overflow:visible;
  transition:transform .2s ease;
}
.cdm-launch:hover,.cdm-launch:focus-visible{transform:scale(1.06)}
.cdm-launch:focus-visible,.cdm button:focus-visible{outline:3px solid var(--cdm-pink);outline-offset:3px}
.cdm-launch img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.cdm-launch .cdm-dot{
  position:absolute;top:-2px;right:-2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--cdm-brown);border:3px solid var(--cdm-cream);
}
.cdm-launch .cdm-hint{
  display:none;
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--cdm-brown);color:var(--cdm-cream);
  font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;
  box-shadow:var(--cdm-shadow);pointer-events:none;
}
.cdm-launch .cdm-hint::after{
  content:"";position:absolute;left:100%;top:50%;margin-top:-6px;
  border:6px solid transparent;border-left-color:var(--cdm-brown);
}
.cdm.is-open .cdm-launch{display:none}
@media(min-width:760px){.cdm-launch{right:24px;bottom:24px}.cdm-launch .cdm-hint{display:block}}

/* Panel: full screen on phones, a card on desktop */
.cdm-panel{
  position:fixed;inset:0;z-index:70;
  display:none;flex-direction:column;
  background:var(--cdm-cream);
  overflow:hidden;
}
.cdm.is-open .cdm-panel{display:flex}
@media(min-width:760px){
  .cdm-panel{
    inset:auto 24px 24px auto;
    width:380px;max-width:calc(100vw - 48px);
    height:640px;max-height:calc(100vh - 48px);
    border-radius:28px;
    box-shadow:var(--cdm-shadow);
    border:1.5px solid var(--cdm-line);
  }
}

/* Header */
.cdm-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px 14px 16px;
  background:var(--cdm-brown);color:var(--cdm-cream);
  padding-top:max(14px,env(safe-area-inset-top));
}
.cdm-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--cdm-pink);flex:none}
.cdm-head .cdm-title{flex:1;min-width:0}
.cdm-head h2{
  font-family:var(--cdm-serif);font-variation-settings:"SOFT" 100,"opsz" 144;
  font-weight:700;font-size:22px;letter-spacing:-0.02em;line-height:1.05;color:var(--cdm-cream)
}
.cdm-head p{font-size:13px;font-weight:600;opacity:.8;margin-top:3px}
.cdm-head .cdm-status{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cdm-pink);margin-right:6px;vertical-align:middle}
.cdm-close{
  flex:none;width:40px;height:40px;border-radius:50%;
  color:var(--cdm-cream);font-size:26px;line-height:1;font-weight:400;
  display:flex;align-items:center;justify-content:center;
}
.cdm-close:hover{background:rgba(255,244,230,.12)}

/* Thread */
.cdm-thread{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 14px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
  -webkit-overflow-scrolling:touch;
}
.cdm-row{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.cdm-row.cdm-her{align-self:flex-start}
.cdm-row.cdm-you{align-self:flex-end;justify-content:flex-end}
.cdm-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--cdm-pink)}
.cdm-bubble{
  padding:11px 15px;font-size:16px;font-weight:600;
  border-radius:22px;
  overflow-wrap:anywhere;
}
.cdm-her .cdm-bubble{background:#fff;color:var(--cdm-brown);border:1.5px solid var(--cdm-line);border-bottom-left-radius:6px}
.cdm-you .cdm-bubble{background:var(--cdm-brown);color:var(--cdm-cream);border-bottom-right-radius:6px}

/* Typing indicator */
.cdm-typing .cdm-bubble{display:flex;gap:5px;align-items:center;padding:14px 16px}
.cdm-typing i{width:8px;height:8px;border-radius:50%;background:var(--cdm-brown);opacity:.45;animation:cdm-bounce 1s infinite ease-in-out}
.cdm-typing i:nth-child(2){animation-delay:.15s}
.cdm-typing i:nth-child(3){animation-delay:.3s}
@keyframes cdm-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-5px);opacity:1}
}

/* Choices: the visitor's tappable buttons, right aligned */
.cdm-choices{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;
  align-self:flex-end;max-width:92%;margin-top:4px;
}
.cdm .cdm-choice{
  border-radius:999px;padding:10px 16px;
  background:var(--cdm-pink);color:var(--cdm-ink);
  font-weight:800;font-size:15px;line-height:1.2;
  border:2px solid var(--cdm-pink);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.cdm .cdm-choice:hover{background:var(--cdm-cream);border-color:var(--cdm-brown)}
.cdm .cdm-choice:active{transform:scale(.97)}
.cdm .cdm-choice.cdm-back{background:transparent;border-color:var(--cdm-brown);color:var(--cdm-brown)}
.cdm .cdm-choice.cdm-back:hover{background:var(--cdm-brown);color:var(--cdm-cream)}

/* Entrances */
.cdm-row,.cdm-choices{animation:cdm-in .22s ease both}
@keyframes cdm-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Reduced motion: keep it still */
@media(prefers-reduced-motion:reduce){
  .cdm-row,.cdm-choices{animation:none}
  .cdm-typing i{animation:none;opacity:.7}
  .cdm-launch,.cdm .cdm-choice{transition:none}
  .cdm-launch:hover,.cdm-launch:focus-visible{transform:none}
}