/* Petly Live Support — frontend widget
   iOS17-style glass panel: blurred surfaces, soft shadows, rounded corners.
   Scoped entirely under #petly-support-root so it can't leak into / clash
   with the rest of the site's styles. Reacts to Petly Modern's own
   [data-theme] toggle when present, and otherwise falls back to the
   visitor's OS-level dark/light preference. */

#petly-support-root{
  --pls-bg: #FFFFFF;
  --pls-surface: rgba(255,255,255,0.78);
  --pls-surface-solid:#ffffff;
  --pls-text:#1D1D1F;
  --pls-text-soft:#6E6E73;
  --pls-border: rgba(0,0,0,0.08);
  --pls-accent:#FF6B4A;
  --pls-accent-2:#0A84FF;
  --pls-green:#2FB350;
  --pls-green-2:#34C759;
  --pls-bubble-visitor: linear-gradient(135deg,#FF6B4A,#ff8a68);
  --pls-bubble-admin:#F1F1F3;
  --pls-bubble-admin-text:#1D1D1F;
  --pls-shadow: 0 20px 60px rgba(0,0,0,0.18);
  --pls-radius: 24px;
  direction: rtl;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Vazirmatn, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]) #petly-support-root{
    --pls-bg:#0C0C10;
    --pls-surface: rgba(28,28,32,0.78);
    --pls-surface-solid:#18181c;
    --pls-text:#F5F5F7;
    --pls-text-soft:#A1A1A6;
    --pls-border: rgba(255,255,255,0.09);
    --pls-bubble-admin:#232328;
    --pls-bubble-admin-text:#F5F5F7;
    --pls-shadow: 0 20px 60px rgba(0,0,0,0.55);
  }
}
html[data-theme="dark"] #petly-support-root{
  --pls-bg:#0C0C10;
  --pls-surface: rgba(28,28,32,0.78);
  --pls-surface-solid:#18181c;
  --pls-text:#F5F5F7;
  --pls-text-soft:#A1A1A6;
  --pls-border: rgba(255,255,255,0.09);
  --pls-bubble-admin:#232328;
  --pls-bubble-admin-text:#F5F5F7;
  --pls-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
html[data-theme="light"] #petly-support-root{
  --pls-bg:#FFFFFF; --pls-surface: rgba(255,255,255,0.78); --pls-surface-solid:#ffffff;
  --pls-text:#1D1D1F; --pls-text-soft:#6E6E73; --pls-border: rgba(0,0,0,0.08);
  --pls-bubble-admin:#F1F1F3; --pls-bubble-admin-text:#1D1D1F; --pls-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

#petly-support-root *{ box-sizing:border-box; }
#petly-support-root .pls-launcher{
  position:fixed; bottom:22px; z-index:99998;
  width:60px; height:60px; border-radius:50%;
  background: linear-gradient(135deg, var(--pls-accent), #ff8a68);
  box-shadow: 0 10px 30px rgba(255,107,74,0.4);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
#petly-support-root .pls-launcher:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 36px rgba(255,107,74,0.5); }
#petly-support-root[data-position="left"] .pls-launcher{ left:22px; }
#petly-support-root[data-position="right"] .pls-launcher{ right:22px; }
#petly-support-root .pls-launcher svg{ width:26px; height:26px; fill:#fff; }
#petly-support-root .pls-launcher .pls-badge{
  position:absolute; top:-2px; left:-2px;
  min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:#FF3B30; color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--pls-bg);
}

#petly-support-root .pls-panel{
  position:fixed; bottom:96px; z-index:99999;
  width:380px; max-width:calc(100vw - 32px);
  height:min(600px, calc(100vh - 140px));
  background: var(--pls-surface);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--pls-border);
  border-radius: var(--pls-radius);
  box-shadow: var(--pls-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform: translateY(16px) scale(.98); pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}
#petly-support-root[data-position="left"] .pls-panel{ left:22px; }
#petly-support-root[data-position="right"] .pls-panel{ right:22px; }
#petly-support-root.is-open .pls-panel{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
#petly-support-root.is-open .pls-launcher .pls-icon-chat{ display:none; }
#petly-support-root.is-open .pls-launcher .pls-icon-close{ display:block !important; }

#petly-support-root .pls-header{
  padding:16px 18px 0; flex:0 0 auto;
}
#petly-support-root .pls-header-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
#petly-support-root .pls-brand{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--pls-text); font-size:15px; }
#petly-support-root .pls-brand-dot{ width:9px; height:9px; border-radius:50%; background:var(--pls-green-2); box-shadow:0 0 0 3px rgba(52,199,89,.18); }
#petly-support-root .pls-close-btn{
  width:30px; height:30px; border-radius:50%; border:none; background: rgba(120,120,128,0.12);
  color:var(--pls-text-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
#petly-support-root .pls-tabs{
  display:flex; gap:4px; background: rgba(120,120,128,0.12); border-radius:14px; padding:4px; margin-bottom:12px;
}
#petly-support-root .pls-tab{
  flex:1; border:none; background:transparent; padding:8px 6px; border-radius:11px;
  font-size:12.5px; font-weight:700; color:var(--pls-text-soft); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition: background .2s ease, color .2s ease;
}
#petly-support-root .pls-tab svg{ width:17px; height:17px; fill:currentColor; }
#petly-support-root .pls-tab.is-active{ background: var(--pls-surface-solid); color:var(--pls-accent); box-shadow:0 2px 8px rgba(0,0,0,0.08); }

#petly-support-root .pls-body{ flex:1 1 auto; min-height:0; position:relative; }
#petly-support-root .pls-view{ position:absolute; inset:0; display:none; flex-direction:column; }
#petly-support-root .pls-view.is-active{ display:flex; }

/* ---------- Chat views (support + AI share this layout) ---------- */
#petly-support-root .pls-messages{
  flex:1; overflow-y:auto; padding:6px 16px; display:flex; flex-direction:column; gap:10px;
}
#petly-support-root .pls-empty{
  margin:auto; text-align:center; color:var(--pls-text-soft); font-size:13px; padding:24px;
}
#petly-support-root .pls-empty strong{ display:block; color:var(--pls-text); font-size:14px; margin-bottom:4px; }
#petly-support-root .pls-msg{ max-width:82%; padding:10px 14px; border-radius:18px; font-size:13.5px; line-height:1.7; word-wrap:break-word; white-space:pre-wrap; }
#petly-support-root .pls-msg.from-visitor{ align-self:flex-start; background: var(--pls-bubble-visitor); color:#fff; border-bottom-left-radius:6px; }
#petly-support-root .pls-msg.from-admin, #petly-support-root .pls-msg.from-assistant{ align-self:flex-end; background: var(--pls-bubble-admin); color: var(--pls-bubble-admin-text); border-bottom-right-radius:6px; }
#petly-support-root .pls-msg.from-system{ align-self:center; background:transparent; color:var(--pls-text-soft); font-size:12px; }
#petly-support-root .pls-typing{ align-self:flex-end; display:flex; gap:4px; padding:12px 14px; background:var(--pls-bubble-admin); border-radius:18px; border-bottom-right-radius:6px; }
#petly-support-root .pls-typing span{ width:6px; height:6px; border-radius:50%; background:var(--pls-text-soft); animation: pls-bounce 1.2s infinite ease-in-out; }
#petly-support-root .pls-typing span:nth-child(2){ animation-delay:.15s; }
#petly-support-root .pls-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes pls-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

#petly-support-root .pls-input-row{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:8px; padding:10px 14px 14px; border-top:1px solid var(--pls-border);
}
#petly-support-root .pls-input{
  flex:1; resize:none; max-height:88px; border:1px solid var(--pls-border); border-radius:16px;
  padding:10px 14px; font-size:13.5px; font-family:inherit; color:var(--pls-text); background: var(--pls-surface-solid);
  outline:none; line-height:1.5;
}
#petly-support-root .pls-input:focus{ border-color: var(--pls-accent-2); }
#petly-support-root .pls-send-btn{
  width:38px; height:38px; border-radius:50%; border:none; flex:0 0 auto; cursor:pointer;
  background: linear-gradient(135deg, var(--pls-accent-2), #59a6ff); display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease;
}
#petly-support-root .pls-send-btn:active{ transform: scale(.9); }
#petly-support-root .pls-send-btn svg{ width:16px; height:16px; fill:#fff; }
#petly-support-root .pls-send-btn:disabled{ opacity:.5; cursor:default; }

/* ---------- Call view ---------- */
#petly-support-root .pls-call-view{ align-items:center; justify-content:center; text-align:center; padding:24px; gap:14px; }
#petly-support-root .pls-call-avatar{
  width:96px; height:96px; border-radius:50%; background: linear-gradient(135deg, var(--pls-green), var(--pls-green-2));
  display:flex; align-items:center; justify-content:center; position:relative;
}
#petly-support-root .pls-call-avatar svg{ width:38px; height:38px; fill:#fff; }
#petly-support-root .pls-call-avatar.is-ringing::before,
#petly-support-root .pls-call-avatar.is-ringing::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--pls-green-2);
  animation: pls-pulse 1.6s ease-out infinite;
}
#petly-support-root .pls-call-avatar.is-ringing::after{ animation-delay:.5s; }
@keyframes pls-pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }
#petly-support-root .pls-call-title{ font-weight:800; font-size:15px; color:var(--pls-text); }
#petly-support-root .pls-call-sub{ font-size:12.5px; color:var(--pls-text-soft); }
#petly-support-root .pls-call-timer{ font-size:20px; font-weight:800; letter-spacing:1px; color:var(--pls-text); direction:ltr; }
#petly-support-root .pls-call-actions{ display:flex; gap:14px; margin-top:6px; }
#petly-support-root .pls-call-btn{
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: transform .15s ease;
}
#petly-support-root .pls-call-btn:active{ transform: scale(.9); }
#petly-support-root .pls-call-btn svg{ width:22px; height:22px; fill:#fff; }
#petly-support-root .pls-call-btn.pls-call-start{ background: linear-gradient(135deg, var(--pls-green), var(--pls-green-2)); box-shadow:0 8px 20px rgba(52,199,89,.35); }
#petly-support-root .pls-call-btn.pls-call-end{ background:#FF3B30; box-shadow:0 8px 20px rgba(255,59,48,.35); }
#petly-support-root .pls-call-btn.pls-call-mute{ background: rgba(120,120,128,0.18); color:var(--pls-text); }
#petly-support-root .pls-call-btn.pls-call-mute svg{ fill:var(--pls-text); }
#petly-support-root .pls-call-btn.pls-call-mute.is-muted{ background: var(--pls-accent); }
#petly-support-root .pls-call-btn.pls-call-mute.is-muted svg{ fill:#fff; }
#petly-support-root .pls-call-note{ font-size:12px; color:var(--pls-text-soft); max-width:260px; }

@media (max-width: 460px){
  #petly-support-root .pls-panel{
    width:calc(100vw - 24px); height:min(78vh, 640px); bottom:88px;
  }
}