.sophie-widget{position:fixed;bottom:20px;right:20px;z-index:9999;font-family:"Inter",sans-serif;}
.sophie-bubble{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);padding:4px;background:#fff;position:relative;transition:transform .2s;}
.sophie-bubble:hover{transform:scale(1.08);}
.sophie-bubble img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:center 15%;/* 15% from top centers face in portrait/square crop */}
.sophie-badge{display:none;position:absolute;top:-2px;right:-2px;width:14px;height:14px;
  border-radius:50%;background:#FF3B30;border:2px solid #fff;}
.sophie-panel{display:none;position:absolute;bottom:68px;right:0;width:340px;max-height:460px;
  background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.15);
  flex-direction:column;overflow:hidden;}
.sophie-open .sophie-panel{display:flex;}
.sophie-header{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);font-size:14px;font-weight:600;color:#1C1C1E;}
.sophie-header img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center 15%;/* 15% from top centers face in portrait/square crop */}
.sophie-close{margin-left:auto;background:none;border:none;font-size:20px;cursor:pointer;color:#8E8E93;}
.sophie-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;
  min-height:200px;max-height:300px;}
.sophie-msg{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;max-width:85%;word-wrap:break-word;}
.sophie-msg-sophie{background:#F2F2F7;color:#1C1C1E;align-self:flex-start;}
.sophie-msg-user{background:#007AFF;color:#fff;align-self:flex-end;}
.sophie-input-row{display:flex;gap:8px;padding:10px 14px;border-top:1px solid rgba(0,0,0,.08);}
.sophie-input-row input{flex:1;border:1.5px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 12px;
  font-size:14px;outline:none;font-family:inherit;}
.sophie-input-row input:focus{border-color:#007AFF;}
.sophie-send{width:36px;height:36px;border-radius:50%;background:#007AFF;color:#fff;border:none;
  cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
@media(max-width:480px){
  .sophie-panel{width:calc(100vw - 32px);right:-4px;bottom:64px;max-height:70vh;}
}

/* Phase 1: Quick-reply chips */
.sophie-chips{display:none;grid-template-columns:1fr 1fr;gap:6px;padding:8px 12px 6px}
.sophie-chip{flex-shrink:0;background:#f0f4ff;color:#007AFF;border:1px solid #c5d0fa;border-radius:16px;padding:5px 14px;font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.sophie-chip:hover{background:#007AFF;color:#fff;border-color:#007AFF}

/* Phase 2: Proactive promo bubble */
.sophie-promo-bubble{position:fixed;bottom:84px;right:20px;display:none;align-items:center;gap:8px;background:#fff;color:#1C1C1E;border:1px solid rgba(0,0,0,.1);border-radius:20px 20px 4px 20px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:14px;max-width:260px;cursor:pointer;z-index:9998;animation:sophiePromoIn .35s ease both}
@keyframes sophiePromoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.sophie-promo-close{background:none;border:none;font-size:12px;color:#8E8E93;cursor:pointer;padding:0 0 0 4px;flex-shrink:0}
.sophie-promo-close:hover{color:#1C1C1E}