/* CareTales Widget — tokens, FAB, window, header
   Design tokens overridden at runtime via wp_head inline style. */

/* Scoped reset */
#ct-widget,#ct-widget * { box-sizing:border-box; font-family:var(--ct-font,"Montserrat"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }

/* Design tokens */
#ct-widget {
  --ct-accent:#99F3F1; --ct-accent-dark:#6fd8d6; --ct-accent-light:#b2f5f4;
  --ct-user-bubble:#99f3f1; --ct-user-shadow:#6fd8d6;
  --ct-depth:4px; --ct-radius:20px; --ct-font:"Montserrat"; --ct-text-color:#262626;
}

/* Root wrapper */
#ct-widget { position:fixed; bottom:24px; right:24px; z-index:2147483647; display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin:0; padding:0; }

/* FAB 3D wrapper */
#ct-fab-3d { position:relative; padding-bottom:var(--ct-depth); flex-shrink:0; align-self:flex-end; }
.ct-fab-shadow { pointer-events:none; position:absolute; left:0; right:0; bottom:0; top:var(--ct-depth); border-radius:50%; background:#d4d4d4; transition:background 0.15s ease; }
#ct-fab-3d:hover .ct-fab-shadow { background:var(--ct-accent-dark); }

#ct-fab {
  position:relative; z-index:1; width:56px; height:56px; border-radius:50%;
  background:#fff; border:1.5px solid #e5e5e5; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; margin:0;
  transition:transform 0.1s ease-out, border-color 0.15s ease, opacity 0.15s ease;
}
#ct-fab:hover  { transform:translateY(clamp(0px,var(--ct-depth),3px)); border-color:var(--ct-accent); opacity:0.82; }
#ct-fab:active { transform:translateY(min(var(--ct-depth),4px)); opacity:0.65; }
#ct-fab img { display:block; }

/* Chat window */
#ct-window {
  width:380px; height:560px; background:#fff; border:1px solid #e5e5e5;
  border-radius:var(--ct-radius); margin:0; padding:0;
  box-shadow:0 8px 40px rgba(0,0,0,0.11),0 1px 4px rgba(0,0,0,0.06);
  display:none; flex-direction:column; overflow:hidden; position:relative;
  animation:ct-pop 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#ct-window.ct-open { display:flex; }

@keyframes ct-pop {
  from { opacity:0; transform:translateY(14px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Desktop expanded mode — triggered by line break in input */
@media (min-width:641px) {
  #ct-window {
    transition: width 0.32s cubic-bezier(0.4,0,0.2,1),
                height 0.32s cubic-bezier(0.4,0,0.2,1);
  }
  #ct-window.ct-expanded {
    width: min(40vw, 580px);
    min-width: 360px;
    height: calc(100vh - 120px);
  }
  #ct-widget:has(#ct-window.ct-expanded) #ct-fab-3d { display:none; }
}

/* Header */
#ct-header { background:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; border-bottom:1px solid #f0f0f0; }
#ct-header-left { display:flex; align-items:center; gap:11px; }
#ct-avatar { width:38px; height:38px; background:#f5f5f5; border:1px solid #e5e5e5; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#ct-avatar img { display:block; }
#ct-header-name { color:var(--ct-text-color,#262626); font-weight:600; font-size:14px; line-height:1.2; letter-spacing:-0.01em; }
#ct-header-status { display:flex; align-items:center; gap:5px; color:#a3a3a3; font-size:11px; margin-top:3px; }
#ct-status-dot { width:6px; height:6px; background:#40c4aa; border-radius:50%; display:inline-block; flex-shrink:0; animation:ct-pulse 2.5s ease-in-out infinite; }
@keyframes ct-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

#ct-minimize-btn { background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
#ct-minimize-btn:hover { background:#f5f5f5; }
#ct-minimize-btn img { display:block; opacity:0.4; }
#ct-minimize-btn:hover img { opacity:0.7; }

/* Consent overlay */
#ct-consent { position:absolute; inset:0; z-index:10; background:#fff; border-radius:var(--ct-radius); flex-direction:column; overflow:hidden; }
#ct-consent-header { background:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; border-bottom:1px solid #f0f0f0; }
#ct-consent .ct-header-left { display:flex; align-items:center; gap:11px; }
#ct-consent .ct-avatar { width:38px; height:38px; background:#f5f5f5; border:1px solid #e5e5e5; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#ct-consent .ct-avatar img { display:block; }
#ct-consent .ct-header-name { color:#262626; font-weight:600; font-size:14px; line-height:1.2; letter-spacing:-0.01em; }
#ct-consent .ct-header-status { display:flex; align-items:center; gap:5px; color:#a3a3a3; font-size:11px; margin-top:3px; }
#ct-consent .ct-status-dot { width:6px; height:6px; background:#40c4aa; border-radius:50%; display:inline-block; flex-shrink:0; animation:ct-pulse 2.5s ease-in-out infinite; }
#ct-consent-close { background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
#ct-consent-close:hover { background:#f5f5f5; }
#ct-consent-close img { display:block; opacity:0.4; }
#ct-consent-close:hover img { opacity:0.7; }
#ct-consent-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 24px; gap:16px; text-align:center; }
.ct-consent-icon { width:64px; height:64px; background:#f5f5f5; border:1px solid #e5e5e5; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-consent-icon img { display:block; }
.ct-consent-text { color:#262626; font-size:13px; line-height:1.6; margin:0; max-width:280px; }
.ct-consent-links { display:flex; flex-direction:column; gap:6px; align-items:center; }
.ct-consent-links a { color:#262626; font-size:13px; text-decoration:underline; }
.ct-consent-links a:hover { opacity:0.7; }
#ct-consent-accept { width:100%; max-width:280px; padding:11px 20px; background:var(--ct-accent); border:none; border-bottom:var(--ct-depth) solid var(--ct-accent-dark); border-radius:var(--ct-radius); font-family:var(--ct-font,"Montserrat"),-apple-system,sans-serif; font-size:14px; font-weight:600; color:#262626; cursor:pointer; transition:opacity 0.15s,transform 0.1s; margin-top:4px; }
#ct-consent-accept:hover { opacity:0.85; transform:translateY(1px); }
#ct-consent-accept:active { transform:translateY(calc(var(--ct-depth))); border-bottom-width:0; }