/* popup.css — Widget OpenChatBot
   Personnalisation : les couleurs sont pilotées en JS (depuis widget-config.php)
   via les variables --oc-primary / --oc-accent posées sur :root par popup.js.
   Vous pouvez aussi les fixer ici à la main si vous préférez ne pas passer par l'admin. */

:root{
  --oc-primary:#4FB8E8;
  --oc-accent:#06B6D4;
  --oc-ink:#0B0F0E;
  --oc-surface:#121817;
  --oc-surface-2:#171F1D;
  --oc-line:rgba(255,255,255,.1);
  --oc-text:#ECF1EF;
  --oc-mute:#8A9491;
  --oc-mute-2:#5E6967;
  --oc-green:#3FB984;
  --oc-err:#E0857F;
}

.oc-fab{
  position:fixed;bottom:24px;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--oc-primary),var(--oc-accent));
  border:none;cursor:pointer;z-index:9000;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(79,184,232,.4);
  animation:oc-fab-pulse 2.5s ease-in-out infinite;
  transition:transform .3s ease, opacity .3s;
}
.oc-fab.oc-pos-right{right:24px}
.oc-fab.oc-pos-left{left:24px}
@keyframes oc-fab-pulse{
  0%,100%{box-shadow:0 8px 24px rgba(79,184,232,.4),0 0 0 0 rgba(79,184,232,.3)}
  50%{box-shadow:0 8px 24px rgba(79,184,232,.4),0 0 0 16px rgba(79,184,232,0)}
}
.oc-fab:hover{transform:scale(1.08)}
.oc-fab svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oc-fab.oc-hidden{opacity:0;pointer-events:none;transform:scale(.5)}

.oc-window{
  position:fixed;bottom:24px;
  width:380px;max-width:calc(100vw - 32px);
  height:560px;max-height:calc(100vh - 120px);
  background:var(--oc-surface);border:1px solid rgba(255,255,255,.15);
  border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  z-index:9001;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(40px) scale(.92);pointer-events:none;
  transition:all .35s ease;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.oc-window.oc-pos-right{right:24px}
.oc-window.oc-pos-left{left:24px}
.oc-window.oc-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.oc-header{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:linear-gradient(135deg,var(--oc-surface-2),var(--oc-surface));
  border-bottom:1px solid var(--oc-line);flex-shrink:0;
}
.oc-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;position:relative;
  background:linear-gradient(135deg,var(--oc-primary),var(--oc-accent));
  display:grid;place-items:center;box-shadow:0 0 12px rgba(79,184,232,.3);
}
.oc-avatar svg{width:22px;height:22px;color:#fff;stroke:#fff;fill:none;stroke-width:2}
.oc-avatar-dot{
  width:8px;height:8px;border-radius:50%;background:var(--oc-green);
  position:absolute;bottom:-2px;right:-2px;border:2px solid var(--oc-surface);
}
.oc-info{flex:1;min-width:0}
.oc-name{font-weight:600;font-size:.92rem;color:var(--oc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-status{font-size:.72rem;color:var(--oc-green);display:flex;align-items:center;gap:5px}
.oc-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oc-green);box-shadow:0 0 6px var(--oc-green)}
.oc-close{
  width:32px;height:32px;border:none;background:var(--oc-surface-2);border-radius:50%;
  color:var(--oc-mute);cursor:pointer;display:grid;place-items:center;transition:all .2s;flex-shrink:0;
}
.oc-close:hover{background:rgba(79,184,232,.15);color:var(--oc-text)}
.oc-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

.oc-messages{
  flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.oc-messages::-webkit-scrollbar{width:5px}
.oc-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

.oc-msg{
  max-width:85%;padding:12px 16px;border-radius:14px;font-size:.88rem;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word;animation:oc-msg-in .35s ease;
}
@keyframes oc-msg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.oc-msg.oc-bot{align-self:flex-start;background:var(--oc-surface-2);border:1px solid var(--oc-line);color:var(--oc-text);border-bottom-left-radius:4px}
.oc-msg.oc-user{align-self:flex-end;background:var(--oc-primary);color:var(--oc-ink);font-weight:500;border-bottom-right-radius:4px}
.oc-msg.oc-error{align-self:center;background:rgba(224,133,127,.1);border:1px solid rgba(224,133,127,.3);color:var(--oc-err);font-size:.82rem;text-align:center}

.oc-typing{
  align-self:flex-start;display:flex;gap:4px;padding:14px 18px;
  background:var(--oc-surface-2);border:1px solid var(--oc-line);
  border-radius:14px;border-bottom-left-radius:4px;
}
.oc-typing span{width:8px;height:8px;border-radius:50%;background:var(--oc-primary);animation:oc-typing-bounce 1.4s ease-in-out infinite}
.oc-typing span:nth-child(2){animation-delay:.2s}
.oc-typing span:nth-child(3){animation-delay:.4s}
@keyframes oc-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}

.oc-quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 8px;flex-shrink:0}
.oc-quick-btn{
  padding:7px 14px;background:var(--oc-surface-2);border:1px solid var(--oc-line);
  border-radius:99px;color:var(--oc-primary);font-size:.78rem;cursor:pointer;transition:all .2s;
  font-family:inherit;
}
.oc-quick-btn:hover{background:rgba(79,184,232,.12);border-color:var(--oc-primary)}

.oc-input-area{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--oc-line);background:rgba(0,0,0,.18);flex-shrink:0}
.oc-input{
  flex:1;padding:12px 16px;background:var(--oc-ink);border:1px solid var(--oc-line);
  border-radius:99px;color:var(--oc-text);font-size:.88rem;font-family:inherit;outline:none;transition:border-color .2s;
}
.oc-input::placeholder{color:var(--oc-mute-2)}
.oc-input:focus{border-color:var(--oc-primary)}
.oc-send{
  width:42px;height:42px;flex-shrink:0;border:none;
  background:linear-gradient(135deg,var(--oc-primary),var(--oc-accent));
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:transform .2s;box-shadow:0 4px 12px rgba(79,184,232,.3);
}
.oc-send:hover{transform:scale(1.05)}
.oc-send:active{transform:scale(.95)}
.oc-send svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:480px){
  .oc-window{width:calc(100vw - 24px);height:calc(100vh - 100px)}
}