/* ──────────────────────────────────────────────────────────────
   E-CARE — Assistante Giri Soins · Design premium signé Maha
   Adaptive aux thèmes du builder (variables CSS).
   ────────────────────────────────────────────────────────────── */

:root { --gs-asst-on-accent: #0a0a0f; --gs-asst-bubble-radius: 18px; }
body[data-dashboard-theme="light"]    { --gs-asst-on-accent: #ffffff; }
body[data-dashboard-theme="sand"]     { --gs-asst-on-accent: #ffffff; }
body[data-dashboard-theme="ocean"]    { --gs-asst-on-accent: #ffffff; }
body[data-dashboard-theme="amethyst"] { --gs-asst-on-accent: #ffffff; }
body[data-dashboard-theme="aurore"]   { --gs-asst-on-accent: #1a1615; }

/* ═══ FAB (boule or) ═══ */
.gs-asst-fab{
  position:fixed; bottom:25px; right:25px;
  width:64px; height:64px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  z-index:9999; padding:0; overflow:visible;
  display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 8px 24px rgba(184,148,74,.35));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
  animation: gsAsstFloat 4.5s ease-in-out infinite;
}
.gs-asst-fab img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block; position:relative; z-index:2;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), inset 0 0 24px rgba(255,210,140,.35);
}
.gs-asst-fab:hover{ transform:scale(1.08) rotate(-3deg); filter: drop-shadow(0 12px 36px rgba(201,169,110,.55)); animation-play-state: paused; }
.gs-asst-fab .gs-asst-pulse{
  position:absolute; inset:-6px; border-radius:50%;
  border:2.5px solid var(--accent,#c9a96e);
  opacity:.6; pointer-events:none; z-index:1;
  animation: gsAsstPulse 2.4s ease-out infinite;
  box-shadow: 0 0 0 1px rgba(201,169,110,.25);
}
.gs-asst-fab .gs-asst-pulse::before,
.gs-asst-fab .gs-asst-pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(201,169,110,.55);
  pointer-events:none;
}
.gs-asst-fab .gs-asst-pulse::before{
  animation: gsAsstPulse 2.4s ease-out infinite;
  animation-delay: .8s;
}
.gs-asst-fab .gs-asst-pulse::after{
  animation: gsAsstPulse 2.4s ease-out infinite;
  animation-delay: 1.6s;
}
.gs-asst-fab::after{
  content:""; position:absolute; bottom:2px; right:2px;
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(135deg,#5ed18e 0%,#2eb56b 100%);
  border:2.5px solid var(--bg-card,#111118);
  z-index:3;
  box-shadow: 0 0 8px rgba(94,209,142,.6);
  animation: gsAsstDotPulse 2.2s ease-in-out infinite;
}
.gs-asst-fab.seen::after{ display:none; }
@keyframes gsAsstPulse  { 0%{transform:scale(.92);opacity:.85} 70%{opacity:.15} 100%{transform:scale(1.75);opacity:0} }
@keyframes gsAsstFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes gsAsstDotPulse{ 0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(94,209,142,.6)} 50%{transform:scale(1.15);box-shadow:0 0 14px rgba(94,209,142,.9)} }

/* ═══ Panel ═══ */
.gs-asst-panel{
  position:fixed; bottom:104px; right:25px;
  width:400px; height:600px;
  background: var(--bg-card,#111118);
  border:1px solid color-mix(in srgb, var(--accent,#c9a96e) 22%, transparent);
  border-radius: 22px;
  display:none; flex-direction:column;
  z-index:9999; overflow:hidden;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02),
    0 0 40px color-mix(in srgb, var(--accent,#c9a96e) 12%, transparent);
}
.gs-asst-panel.open{ display:flex; animation: gsAsstSlideIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes gsAsstSlideIn { from{ opacity:0; transform:translateY(20px) scale(.97) } to{ opacity:1; transform:none } }

/* ═══ Header — gradient or premium ═══ */
.gs-asst-header{
  position:relative;
  padding:16px 18px 14px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent,#c9a96e) 14%, var(--bg-surface,#1a1a24)) 0%,
      var(--bg-surface,#1a1a24) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--accent,#c9a96e) 18%, transparent);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  overflow:hidden;
}
.gs-asst-header::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent,#c9a96e) 18%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.gs-asst-title{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; position:relative; z-index:1; }
.gs-asst-title img{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent,#c9a96e) 35%, transparent),
    0 0 18px color-mix(in srgb, var(--accent,#c9a96e) 35%, transparent);
}
.gs-asst-title-text{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.gs-asst-title-text strong{
  font-size:1.02rem; font-weight:500;
  color:var(--text-primary,#f0ece4);
  font-family: var(--font-display, "Cormorant Garamond", serif);
  letter-spacing:.4px;
  display:flex; align-items:center; gap:6px;
}
.gs-asst-title-text .gs-asst-status{
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size:.68rem; font-weight:500;
  color: #5ed18e;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.gs-asst-title-text .gs-asst-status::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#5ed18e; box-shadow:0 0 8px rgba(94,209,142,.7);
  animation: gsAsstDotPulse 2.2s ease-in-out infinite;
}
.gs-asst-title-text small{
  font-size:.74rem;
  color: color-mix(in srgb, var(--text-secondary,#9a958c) 95%, transparent);
  font-weight:400; margin-top:1px;
}
.gs-asst-close{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--text-secondary,#9a958c) 22%, transparent);
  background: transparent;
  color:var(--text-secondary,#9a958c);
  font-size:1.25rem; cursor:pointer; flex-shrink:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.gs-asst-close:hover{
  background: var(--accent,#c9a96e);
  color: var(--gs-asst-on-accent,#0a0a0f);
  border-color: var(--accent,#c9a96e);
  transform: rotate(90deg);
}

/* ═══ Messages ═══ */
.gs-asst-msgs{
  flex:1; padding:18px 16px; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
  background:var(--bg-card,#111118);
  scroll-behavior:smooth;
}
.gs-asst-msgs::-webkit-scrollbar{ width:6px }
.gs-asst-msgs::-webkit-scrollbar-track{ background:transparent }
.gs-asst-msgs::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent,#c9a96e) 30%, transparent);
  border-radius:3px;
}
.gs-asst-msgs::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--accent,#c9a96e) 50%, transparent);
}

.gs-asst-msg{
  padding:11px 15px;
  max-width:84%;
  font-size:.9rem; line-height:1.55;
  animation: gsAsstPopIn .3s cubic-bezier(.2,.8,.2,1);
  white-space:pre-wrap; word-wrap:break-word;
  position:relative;
}
@keyframes gsAsstPopIn { from{ opacity:0; transform:translateY(8px) scale(.96) } to{ opacity:1; transform:none } }

.gs-asst-msg.user{
  background: linear-gradient(135deg,
    var(--accent,#c9a96e) 0%,
    color-mix(in srgb, var(--accent,#c9a96e) 88%, #fff 12%) 100%);
  color: var(--gs-asst-on-accent,#0a0a0f);
  align-self:flex-end;
  border-radius: var(--gs-asst-bubble-radius) var(--gs-asst-bubble-radius) 4px var(--gs-asst-bubble-radius);
  font-weight:500;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent,#c9a96e) 25%, transparent);
}
.gs-asst-msg.bot{
  background: var(--bg-surface,#1a1a24);
  color: var(--text-primary,#f0ece4);
  align-self:flex-start;
  border-radius: var(--gs-asst-bubble-radius) var(--gs-asst-bubble-radius) var(--gs-asst-bubble-radius) 4px;
  border:1px solid color-mix(in srgb, var(--accent,#c9a96e) 12%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.gs-asst-msg.bot.loading{
  opacity:.7; font-style:italic;
  display:inline-flex; align-items:center; gap:8px;
}
.gs-asst-msg.bot.loading::after{
  content:""; width:14px; height:14px;
  border:2px solid color-mix(in srgb, var(--accent,#c9a96e) 30%, transparent);
  border-top-color: var(--accent,#c9a96e);
  border-radius:50%;
  animation: gsAsstSpin .8s linear infinite;
}
@keyframes gsAsstSpin { to { transform: rotate(360deg) } }

/* ═══ Suggestions chips ═══ */
.gs-asst-suggestions{
  padding:0 16px 10px;
  display:flex; flex-wrap:wrap; gap:7px;
  background:var(--bg-card,#111118);
}
.gs-asst-chip{
  font-size:.76rem; padding:7px 13px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--accent,#c9a96e) 22%, transparent);
  background: color-mix(in srgb, var(--accent,#c9a96e) 5%, transparent);
  color: var(--text-secondary,#9a958c);
  cursor:pointer;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
  font-family:inherit;
}
.gs-asst-chip:hover{
  background: var(--accent,#c9a96e);
  color: var(--gs-asst-on-accent,#0a0a0f);
  border-color: var(--accent,#c9a96e);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent,#c9a96e) 30%, transparent);
}

/* ═══ Input row ═══ */
.gs-asst-input-row{
  padding:13px 14px 14px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--bg-surface,#1a1a24) 30%);
  border-top:1px solid color-mix(in srgb, var(--accent,#c9a96e) 14%, transparent);
  display:flex; gap:9px; align-items:center;
}
.gs-asst-input-row input{
  flex:1; padding:11px 16px;
  border:1px solid color-mix(in srgb, var(--accent,#c9a96e) 18%, transparent);
  border-radius:22px;
  background: var(--bg-input,#13131b);
  color: var(--text-primary,#f0ece4);
  font-size:.9rem; outline:none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  font-family:inherit;
}
.gs-asst-input-row input:focus{
  border-color: var(--accent,#c9a96e);
  background: color-mix(in srgb, var(--bg-input,#13131b) 92%, var(--accent,#c9a96e) 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent,#c9a96e) 18%, transparent);
}
.gs-asst-input-row input::placeholder{ color: var(--text-muted,#5a564f); font-style:italic; }

.gs-asst-send{
  width:42px; height:42px; border-radius:50%; border:none;
  background: linear-gradient(135deg, var(--accent,#c9a96e) 0%, color-mix(in srgb, var(--accent,#c9a96e) 82%, #fff 18%) 100%);
  color: var(--gs-asst-on-accent,#0a0a0f);
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s, box-shadow .25s, filter .2s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent,#c9a96e) 30%, transparent);
}
.gs-asst-send:hover{ transform: translateY(-1px) scale(1.04); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent,#c9a96e) 45%, transparent); filter: brightness(1.05); }
.gs-asst-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; filter:none; }
.gs-asst-send svg{ width:18px; height:18px; fill:currentColor; }

/* ═══ Responsive ═══ */

/* Tablet (601–900) : panel un poil plus large */
@media (min-width:601px) and (max-width:900px){
  .gs-asst-panel{ width:420px; height:620px; bottom:100px; right:22px; }
}

/* Desktop confortable (901–1280) : taille premium  */
@media (min-width:901px) and (max-width:1280px){
  .gs-asst-panel{ width:420px; height:620px; }
}

/* Grand écran (>1280) : version plus généreuse */
@media (min-width:1281px){
  .gs-asst-panel{ width:440px; height:660px; bottom:110px; right:32px; }
  .gs-asst-fab{ width:68px; height:68px; bottom:30px; right:32px; }
}

/* Hauteur écran courte → on s'adapte */
@media (max-height:740px) and (min-width:601px){
  .gs-asst-panel{ height: calc(100vh - 140px); max-height:620px; }
}

/* Mobile (≤600) : plein utile */
@media (max-width:600px){
  .gs-asst-panel{
    width: calc(100vw - 16px);
    right:8px; left:8px;
    bottom: max(80px, calc(env(safe-area-inset-bottom,0px) + 80px));
    height: min(620px, calc(100vh - 110px));
    border-radius:18px;
  }
  .gs-asst-fab{ bottom: max(18px, env(safe-area-inset-bottom,0px)); right:18px; width:60px; height:60px; }
  .gs-asst-msgs{ padding:14px 12px; }
  .gs-asst-msg{ max-width:88%; font-size:.92rem; }
  .gs-asst-title img{ width:38px; height:38px; }
  .gs-asst-title-text strong{ font-size:.95rem; }
}

/* Très petits écrans (<360) : économie de place */
@media (max-width:360px){
  .gs-asst-header{ padding:13px 14px; }
  .gs-asst-title{ gap:10px; }
  .gs-asst-input-row{ padding:11px 12px; }
}

/* Mode reduce-motion : respect total */
@media (prefers-reduced-motion: reduce){
  .gs-asst-fab,
  .gs-asst-fab::after,
  .gs-asst-title-text .gs-asst-status::before,
  .gs-asst-msg.bot.loading::after,
  .gs-asst-fab .gs-asst-pulse,
  .gs-asst-fab .gs-asst-pulse::before,
  .gs-asst-fab .gs-asst-pulse::after{ animation: none !important; }
  .gs-asst-panel.open{ animation: none !important; }
}

/* [BACKDROP 2026-06-16 Maha] Voile sombre derriere E-Care UNIQUEMENT mobile (≤600px) */
.gs-asst-backdrop{ display:none; }
@media (max-width:600px){
  .gs-asst-backdrop{
    position:fixed; inset:0; z-index:9998;
    background:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    opacity:0; transition:opacity .25s ease;
    pointer-events:none;
  }
  .gs-asst-backdrop.show{
    display:block; opacity:1; pointer-events:auto;
  }
}

/* [ECARE-NOTIF 2026-06-16] Pastille rouge notif sur boule + bannière haute dans panel */
/* note: .gs-asst-fab est deja position:fixed (ligne 14) — agit comme containing block pour le badge absolute */
.gs-asst-fab .gs-ecare-notif-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:11px;
  background:#ef4444; color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
  box-shadow:0 2px 6px rgba(239,68,68,.45), 0 0 0 2px var(--bg-card,#15110e);
  animation:gsEcareNotifPulse 1.8s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes gsEcareNotifPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.08);opacity:.92}
}
.gs-ecare-notif-banner{
  margin:0 0 12px;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.06));
  border:1px solid rgba(239,68,68,.32);
  border-radius:10px;
  font-size:.85rem;
  color:var(--text-primary,#f0ece4);
}
.gs-ecare-notif-banner-inner{
  display:flex; align-items:center; gap:10px;
}
.gs-ecare-notif-icon{ font-size:1.1rem; flex-shrink:0 }
.gs-ecare-notif-text{ flex:1; line-height:1.35; min-width:0 }
.gs-ecare-notif-text strong{ color:#ef4444 }
.gs-ecare-notif-cta{
  flex-shrink:0;
  padding:5px 12px;
  background:#ef4444; color:#fff;
  border:none; border-radius:6px;
  font-weight:600; font-size:.76rem;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s ease;
}
.gs-ecare-notif-cta:hover{ background:#dc2626 }