/* widget.css — shared styling for the demo page and the embeddable widget.
   The mock host-site styles live inside index.html; everything the
   widget itself needs is here so the demo and the deployed widget stay in sync. */

:root{
  --pc-primary:#15293f;
  --pc-accent:#0ea5b7;
  --pc-radius:20px;
  --pc-ink:#13202e;
  --pc-muted:#5b6b7b;
  --pc-line:#e7ecf1;
  --pc-surface:#f6f8fa;
  --pc-font:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;}

/* Launcher */
.pc-root{position:fixed;inset:0;pointer-events:none;z-index:2147483000;}
.pc-root > *{pointer-events:auto;}
.pc-launcher{position:fixed;right:24px;bottom:24px;height:60px;min-width:60px;border:none;
  border-radius:999px;background:var(--pc-primary);color:#fff;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:0 18px;
  box-shadow:0 12px 30px -8px rgba(15,30,55,.5),0 2px 6px rgba(15,30,55,.25);
  transition:transform .18s ease,box-shadow .18s ease;font-family:var(--pc-font);}
.pc-launcher:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(15,30,55,.55);}
.pc-launcher.is-open{background:var(--pc-primary);}
.pc-launcher-ico{display:grid;place-items:center;}
.pc-launcher-label{font-weight:700;font-size:15px;white-space:nowrap;padding-right:4px;}
.pc-launcher:not(.has-text){padding:0;width:60px;justify-content:center;}

/* Photo on the launcher bubble */
.pc-launcher-photo{position:relative;display:block;border-radius:50%;flex-shrink:0;
  background-size:cover;background-position:center;background-color:#2c3f5e;}
.pc-launcher:not(.has-text) .pc-launcher-photo{width:60px;height:60px;}
.pc-launcher.has-text .pc-launcher-photo{width:42px;height:42px;}

/* Pulsing "online — waiting for you" dot */
.pc-online{position:absolute;right:0;bottom:0;width:15px;height:15px;border-radius:50%;
  background:#22c55e;border:2.5px solid #fff;animation:pcOnline .85s ease-in-out infinite;}
.pc-launcher.has-text .pc-online{width:12px;height:12px;border-width:2px;}
@keyframes pcOnline{
  0%,100%{filter:brightness(.78);box-shadow:0 0 0 0 rgba(34,197,94,.65);}
  50%{filter:brightness(1.7);box-shadow:0 0 0 7px rgba(34,197,94,0);}
}
@media(prefers-reduced-motion:reduce){.pc-online{animation:none;}}
.pc-badge{position:absolute;top:-3px;right:-3px;background:var(--pc-accent);color:#fff;
  font-size:12px;font-weight:800;font-style:normal;min-width:22px;height:22px;border-radius:11px;
  display:grid;place-items:center;border:2px solid #fff;}

/* Window */
.pc-window{position:fixed;right:24px;bottom:96px;width:384px;max-width:calc(100vw - 32px);
  height:610px;max-height:calc(100vh - 120px);background:#fff;border-radius:var(--pc-radius);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 70px -18px rgba(13,28,52,.45),0 6px 18px rgba(13,28,52,.12);
  border:1px solid var(--pc-line);
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  pointer-events:none;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.3,1);}
.pc-window.is-open{opacity:1;transform:none;pointer-events:auto;}
.pc-layout-compact.pc-window{width:344px;height:560px;}

/* Header */
.pc-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;background:var(--pc-primary);color:#fff;}
.pc-header-id{display:flex;align-items:center;gap:11px;min-width:0;}
.pc-header-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.pc-header-text strong{font-size:15.5px;font-weight:700;}
.pc-header-text span{font-size:12.5px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:6px;}
.pc-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25);}
.pc-header-actions{display:flex;align-items:center;gap:6px;}
.pc-header-call{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.12);padding:7px 11px;border-radius:9px;font-weight:600;font-size:13px;
  transition:background .15s;white-space:nowrap;}
.pc-header-call:hover{background:rgba(255,255,255,.22);}
.pc-icon-btn{background:transparent;border:none;color:rgba(255,255,255,.8);cursor:pointer;
  padding:6px;border-radius:8px;display:grid;place-items:center;transition:background .15s,color .15s;}
.pc-icon-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
.pc-header-compact{padding:13px 14px;}

/* Body */
.pc-body{flex:1;overflow-y:auto;padding:18px 16px;background:var(--pc-surface);
  display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;}
.pc-body-compact{padding:14px;gap:9px;}
.pc-row{display:flex;align-items:flex-end;gap:8px;max-width:88%;}
.pc-row-bot{align-self:flex-start;}
.pc-row-user{align-self:flex-end;flex-direction:row-reverse;}
.pc-bubble{padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word;}
.pc-bubble-bot{background:#fff;border:1px solid var(--pc-line);color:var(--pc-ink);
  border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(13,28,52,.04);}
.pc-bubble-user{background:var(--pc-primary);color:#fff;border-bottom-right-radius:5px;}
.pc-layout-compact .pc-bubble{font-size:14px;padding:9px 12px;}

/* Avatar */
.pc-avatar{position:relative;border-radius:50%;flex-shrink:0;
  background:linear-gradient(150deg,var(--pc-primary),#2c3f5e);
  color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:-.02em;}
.pc-avatar-img{background-size:cover;background-position:center;background-color:#2c3f5e;}
.pc-status{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:#34d399;border:2px solid #fff;}

/* Typing */
.pc-typing{display:flex;gap:4px;align-items:center;padding:13px 14px;}
.pc-typing i{width:7px;height:7px;border-radius:50%;background:#aab6c2;animation:pcb 1.2s infinite;}
.pc-typing i:nth-child(2){animation-delay:.18s;}
.pc-typing i:nth-child(3){animation-delay:.36s;}
@keyframes pcb{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* Quick replies */
.pc-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;background:var(--pc-surface);}
.pc-chip{border:1px solid var(--pc-line);background:#fff;color:var(--pc-primary);
  padding:8px 13px;border-radius:999px;font-family:var(--pc-font);font-weight:600;font-size:13px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;}
.pc-chip:hover{border-color:var(--pc-accent);color:var(--pc-accent);}

/* Welcome card (concierge) */
.pc-welcome{display:flex;flex-direction:column;gap:16px;}
.pc-welcome-top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.pc-welcome-top h3{margin:6px 0 0;font-size:20px;letter-spacing:-.02em;color:var(--pc-primary);}
.pc-welcome-top p{margin:0;font-size:14px;color:var(--pc-muted);max-width:30ch;line-height:1.5;}
.pc-welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pc-service-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  border:1px solid var(--pc-line);background:#fff;border-radius:13px;padding:13px;cursor:pointer;
  font-family:var(--pc-font);font-weight:600;font-size:13px;color:var(--pc-ink);line-height:1.35;
  transition:border-color .15s,transform .12s,box-shadow .15s;}
.pc-service-btn:hover{border-color:var(--pc-accent);transform:translateY(-2px);
  box-shadow:0 8px 18px -10px rgba(13,28,52,.3);}
.pc-service-btn svg{color:var(--pc-accent);}
.pc-welcome-call{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--pc-accent);color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  padding:13px;border-radius:12px;transition:filter .15s;}
.pc-welcome-call:hover{filter:brightness(1.05);}

/* Composer */
.pc-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--pc-line);
  background:#fff;}
.pc-composer textarea{flex:1;border:1px solid var(--pc-line);border-radius:13px;resize:none;
  padding:11px 13px;font-family:var(--pc-font);font-size:14.5px;line-height:1.4;max-height:96px;outline:none;
  color:var(--pc-ink);transition:border-color .15s,box-shadow .15s;background:var(--pc-surface);}
.pc-composer textarea:focus{border-color:var(--pc-primary);background:#fff;
  box-shadow:0 0 0 3px rgba(27,39,64,.08);}
.pc-send{flex-shrink:0;width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;
  background:var(--pc-accent);color:#fff;display:grid;place-items:center;transition:filter .15s,opacity .15s;}
.pc-send:hover{filter:brightness(1.05);}
.pc-send:disabled{opacity:.4;cursor:default;}

.pc-foot{text-align:center;font-size:11px;color:#9aa7b4;padding:0 0 10px;background:#fff;}

@media(max-width:520px){
  .pc-window{right:0;left:0;bottom:0;width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;}
  .pc-launcher{right:16px;bottom:16px;}
}