.cclsp-widget,.cclsp-widget *{box-sizing:border-box}.cclsp-widget{--cclsp-orange-1:color-mix(in srgb,var(--cclsp-primary) 68%,white);--cclsp-orange-2:var(--cclsp-primary);--cclsp-orange-3:color-mix(in srgb,var(--cclsp-primary) 78%,#b43b00);--cclsp-glass:rgba(255,255,255,.84);--cclsp-border:rgba(255,255,255,.66);--cclsp-dark:#111827;--cclsp-muted:#6b7280;--cclsp-shadow:0 26px 80px rgba(17,24,39,.18);position:fixed;bottom:22px;z-index:999999;direction:rtl;font-family:inherit}.cclsp-right{right:22px}.cclsp-left{left:22px}.cclsp-hint{position:absolute;bottom:72px;white-space:nowrap;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.78);color:#1f2937;font-size:13px;font-weight:900;box-shadow:0 14px 36px rgba(17,24,39,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:cclspHint 4.2s ease-in-out infinite;pointer-events:none;transition:.25s}.cclsp-right .cclsp-hint{right:0}.cclsp-left .cclsp-hint{left:0}.cclsp-widget.cclsp-open .cclsp-hint{opacity:0;visibility:hidden;transform:translateY(8px)}.cclsp-toggle{position:relative;border:none;cursor:pointer;height:60px;min-width:156px;padding:0 18px;border-radius:999px;background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.42),transparent 26%),linear-gradient(135deg,var(--cclsp-orange-1),var(--cclsp-orange-2) 52%,var(--cclsp-orange-3));color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:15px;font-weight:950;box-shadow:0 18px 44px color-mix(in srgb,var(--cclsp-primary) 36%,transparent),inset 0 1px 0 rgba(255,255,255,.45);transition:.28s cubic-bezier(.2,.8,.2,1);isolation:isolate}.cclsp-toggle:before{content:"";position:absolute;inset:-7px;border-radius:inherit;background:color-mix(in srgb,var(--cclsp-primary) 28%,transparent);z-index:-1;animation:cclspPulse 2.4s ease-in-out infinite}.cclsp-toggle:hover{transform:translateY(-3px) scale(1.01)}.cclsp-toggle-chat,.cclsp-toggle-close{width:36px;height:36px;min-width:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:.25s;font-size:18px;font-weight:950}.cclsp-toggle-close{position:absolute;right:18px;opacity:0;transform:rotate(-90deg) scale(.65)}.cclsp-widget.cclsp-open .cclsp-toggle-chat{opacity:0;transform:rotate(90deg) scale(.65)}.cclsp-widget.cclsp-open .cclsp-toggle-close{opacity:1;transform:rotate(0) scale(1)}.cclsp-window{position:absolute;bottom:76px;width:450px;max-width:calc(100vw - 28px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.96);transition:.28s cubic-bezier(.2,.8,.2,1)}.cclsp-right .cclsp-window{right:0;transform-origin:bottom right}.cclsp-left .cclsp-window{left:0;transform-origin:bottom left}.cclsp-widget.cclsp-open .cclsp-window{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}.cclsp-panel{width:100%;height:min(780px,calc(100dvh - 112px));min-height:570px;display:flex;flex-direction:column;overflow:hidden;border-radius:30px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--cclsp-primary) 16%,transparent),transparent 42%),radial-gradient(circle at bottom left,rgba(0,136,204,.12),transparent 38%),var(--cclsp-glass);border:1px solid var(--cclsp-border);box-shadow:var(--cclsp-shadow);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}.cclsp-header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid rgba(17,24,39,.075);background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.14))}.cclsp-avatar{position:relative;width:54px;height:54px;min-width:54px;border-radius:20px;background:linear-gradient(135deg,#fff4e8,#fff);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px color-mix(in srgb,var(--cclsp-primary) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.78)}.cclsp-avatar img{width:100%;height:100%;object-fit:contain;padding:4px;border-radius:18px}.cclsp-avatar span{position:absolute;left:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:3px solid #fff;box-shadow:0 0 0 5px rgba(34,197,94,.15)}.cclsp-head-text{min-width:0;display:flex;flex-direction:column;gap:5px}.cclsp-head-text strong{color:var(--cclsp-dark);font-size:16px;font-weight:950;line-height:1.4}.cclsp-head-text small{display:inline-flex;align-items:center;gap:7px;color:#15803d;font-size:12px;font-weight:900;line-height:1.4}.cclsp-head-text small i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.13);animation:cclspOnline 1.7s ease-in-out infinite}.cclsp-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px;scrollbar-width:thin}.cclsp-chat{min-height:175px;max-height:255px;overflow-y:auto;padding:12px;border-radius:24px;background-color:rgba(255,255,255,.48);background-image:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),var(--cclsp-chat-bg);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.66);display:flex;flex-direction:column;gap:7px;scroll-behavior:smooth;margin-bottom:12px}.cclsp-empty{color:var(--cclsp-muted);font-size:12px;font-weight:820;line-height:1.8;text-align:center;padding:14px 8px;margin:auto 0}.cclsp-msg{max-width:88%;min-width:120px;padding:8px 12px;border-radius:16px;font-size:12.6px;font-weight:660;line-height:1.78;white-space:pre-wrap;word-break:break-word;letter-spacing:-.1px}.cclsp-msg-user{align-self:flex-start;background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.3),transparent 32%),linear-gradient(135deg,var(--cclsp-orange-1),var(--cclsp-orange-2));color:#fff;border-bottom-right-radius:7px;box-shadow:0 8px 18px color-mix(in srgb,var(--cclsp-primary) 15%,transparent)}.cclsp-msg-admin{align-self:flex-end;background:rgba(255,255,255,.78);color:#111827;border:1px solid rgba(17,24,39,.055);border-bottom-left-radius:7px;box-shadow:0 8px 18px rgba(17,24,39,.055)}.cclsp-msg strong{display:block;margin-bottom:1px;font-size:10.8px;font-weight:900;opacity:.82}.cclsp-msg-time{display:block;margin-top:3px;font-size:9.8px;font-weight:760;opacity:.55}.cclsp-msg audio{width:100%;margin-top:7px;height:36px}.cclsp-msg a{color:inherit;font-weight:900;text-decoration:underline}.cclsp-form{display:flex;flex-direction:column;gap:8px;width:100%}.cclsp-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cclsp-field{display:flex;flex-direction:column;gap:5px;min-width:0}.cclsp-field label{color:#374151;font-size:11px;font-weight:900;line-height:1.2}.cclsp-field input{width:100%;height:40px;border:1px solid rgba(17,24,39,.085);outline:none;border-radius:14px;background:rgba(255,255,255,.72);color:#111827;font-family:inherit;font-size:12.5px;font-weight:700;padding:0 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.62);transition:.22s}.cclsp-field input:focus{border-color:color-mix(in srgb,var(--cclsp-primary) 52%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cclsp-primary) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.62);background:rgba(255,255,255,.94)}.cclsp-file-input,.cclsp-hp{position:absolute!important;right:-99999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.cclsp-recording-row{display:none;align-items:center;gap:9px;padding:8px 10px;border-radius:16px;background:rgba(239,68,68,.1);color:#b91c1c;font-size:11px;font-weight:900}.cclsp-recording-row.cclsp-show{display:flex}.cclsp-rec-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:cclspRecDot 1s infinite}.cclsp-wave{flex:1;height:26px;display:flex;align-items:center;gap:3px;overflow:hidden}.cclsp-wave i{width:3px;height:8px;border-radius:99px;background:#ef4444;opacity:.55;transition:height .08s linear}.cclsp-attach-preview{display:none;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(17,24,39,.055);color:#374151;font-size:11.5px;font-weight:850;line-height:1.5}.cclsp-attach-preview.cclsp-show{display:flex;flex-direction:column;align-items:stretch}.cclsp-preview-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.cclsp-attach-preview button{border:none;background:rgba(17,24,39,.08);color:#111827;width:24px;height:24px;border-radius:999px;cursor:pointer;font-weight:950}.cclsp-attach-preview audio{width:100%;height:36px}.cclsp-emoji-panel{display:none;grid-template-columns:repeat(12,1fr);gap:5px;padding:8px;border-radius:17px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 24px rgba(17,24,39,.055)}.cclsp-emoji-panel.cclsp-open{display:grid}.cclsp-emoji-panel button{border:none;cursor:pointer;height:28px;border-radius:9px;background:rgba(17,24,39,.045);font-size:16px;transition:.18s}.cclsp-emoji-panel button:hover{background:color-mix(in srgb,var(--cclsp-primary) 12%,transparent);transform:translateY(-1px)}.cclsp-composer-shell{display:grid;grid-template-columns:36px 36px 36px 1fr 46px;align-items:end;gap:7px;padding:7px;border-radius:22px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.82);box-shadow:0 14px 32px rgba(17,24,39,.065),inset 0 1px 0 rgba(255,255,255,.68)}.cclsp-tool-btn{width:36px;height:36px;border:none;border-radius:14px;cursor:pointer;background:rgba(17,24,39,.055);color:#374151;display:flex;align-items:center;justify-content:center;transition:.2s}.cclsp-tool-btn:hover,.cclsp-tool-btn.cclsp-active{background:color-mix(in srgb,var(--cclsp-primary) 13%,transparent);color:color-mix(in srgb,var(--cclsp-primary) 80%,#111827);transform:translateY(-1px)}.cclsp-tool-btn.cclsp-recording{background:rgba(239,68,68,.14);color:#dc2626;animation:cclspRecording 1.2s ease-in-out infinite}.cclsp-composer-shell textarea{width:100%;height:38px;min-height:38px;max-height:110px;resize:vertical;border:none;outline:none;background:transparent;color:#111827;font-family:inherit;font-size:13.2px;font-weight:700;line-height:1.8;padding:7px 2px;overflow-y:auto}.cclsp-send{width:46px;height:38px;border:none;cursor:pointer;border-radius:15px;background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.36),transparent 28%),linear-gradient(135deg,var(--cclsp-orange-1),var(--cclsp-orange-2));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 22px color-mix(in srgb,var(--cclsp-primary) 22%,transparent);transition:.22s}.cclsp-send-loading{display:none;font-weight:950;font-size:15px}.cclsp-send.cclsp-loading .cclsp-send-normal{display:none}.cclsp-send.cclsp-loading .cclsp-send-loading{display:inline}.cclsp-result{display:none;border-radius:13px;padding:8px 10px;font-size:11.3px;font-weight:850;line-height:1.7}.cclsp-result.cclsp-success{display:block;color:#166534;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.16)}.cclsp-result.cclsp-error{display:block;color:#991b1b;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.16)}.cclsp-divider{margin:12px 0 9px;display:flex;align-items:center;gap:10px;color:var(--cclsp-muted);font-size:10.8px;font-weight:900}.cclsp-divider:before,.cclsp-divider:after{content:"";flex:1;height:1px;background:rgba(17,24,39,.075)}.cclsp-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cclsp-link{min-width:0;border-radius:18px;padding:10px 7px;text-decoration:none!important;color:#fff!important;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.2s;font-size:11.6px;font-weight:950;position:relative}.cclsp-link:before{content:"";position:absolute;inset:8px;border-radius:inherit;filter:blur(18px);opacity:.38;z-index:-1}.cclsp-link:hover{transform:translateY(-2px);color:#fff!important}.cclsp-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 12px 26px rgba(37,211,102,.2)}.cclsp-whatsapp:before{background:#25D366}.cclsp-telegram{background:linear-gradient(135deg,#2AABEE,#0088CC);box-shadow:0 12px 26px rgba(42,171,238,.2)}.cclsp-telegram:before{background:#2AABEE}.cclsp-bale{background:linear-gradient(135deg,#2fcf75,#0f9f55);box-shadow:0 12px 26px rgba(47,207,117,.2)}.cclsp-bale:before{background:#2fcf75}.cclsp-link span{width:34px;height:34px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.2);font-weight:950}.cclsp-bale span{background:#fff;padding:6px}.cclsp-bale img{width:100%;height:100%;object-fit:contain;border-radius:9px}.cclsp-footer{flex:0 0 auto;padding:10px 16px 13px;border-top:1px solid rgba(17,24,39,.075);color:var(--cclsp-muted);font-size:11px;font-weight:760;line-height:1.7;text-align:center;background:rgba(255,255,255,.24)}@keyframes cclspPulse{0%,100%{transform:scale(.94);opacity:.44}50%{transform:scale(1.07);opacity:.12}}@keyframes cclspOnline{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}@keyframes cclspHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes cclspRecording{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.15)}50%{box-shadow:0 0 0 7px rgba(220,38,38,.08)}}@keyframes cclspRecDot{0%,100%{opacity:1}50%{opacity:.35}}@media (prefers-color-scheme:dark){.cclsp-widget{--cclsp-glass:rgba(17,24,39,.84);--cclsp-border:rgba(255,255,255,.13);--cclsp-dark:#f9fafb;--cclsp-muted:#cbd5e1;--cclsp-shadow:0 26px 80px rgba(0,0,0,.36)}.cclsp-hint{background:rgba(17,24,39,.84);color:#f9fafb;border-color:rgba(255,255,255,.12)}.cclsp-chat{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}.cclsp-msg-admin{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.1)}.cclsp-field label{color:#fff}.cclsp-field input,.cclsp-composer-shell,.cclsp-emoji-panel,.cclsp-attach-preview{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.11);color:#fff}.cclsp-composer-shell textarea{color:#fff}.cclsp-tool-btn{background:rgba(255,255,255,.08);color:#e5e7eb}.cclsp-emoji-panel button{background:rgba(255,255,255,.08)}.cclsp-avatar{background:rgba(255,255,255,.96)}.cclsp-avatar span{border-color:#111827}}@media (max-width:768px){.cclsp-widget{right:12px!important;left:12px!important;bottom:14px}.cclsp-toggle{margin-right:auto;min-width:142px;height:56px;font-size:14px;padding:0 16px}.cclsp-left .cclsp-toggle{margin-right:0;margin-left:auto}.cclsp-toggle-chat,.cclsp-toggle-close{width:34px;height:34px;min-width:34px}.cclsp-toggle-close{right:16px}.cclsp-hint{display:none}.cclsp-window{position:fixed;left:10px!important;right:10px!important;bottom:80px;width:auto;max-width:none;transform-origin:bottom center!important}.cclsp-panel{height:min(720px,calc(100dvh - 94px));min-height:0;border-radius:28px}.cclsp-header{padding:13px 14px}.cclsp-avatar{width:50px;height:50px;min-width:50px;border-radius:19px}.cclsp-body{padding:12px;overflow-y:auto}.cclsp-chat{min-height:125px;max-height:195px;margin-bottom:10px}.cclsp-contact-grid{grid-template-columns:1fr;gap:8px}.cclsp-subject-field{display:none}.cclsp-emoji-panel{grid-template-columns:repeat(6,1fr)}.cclsp-composer-shell{grid-template-columns:34px 34px 34px 1fr 44px;gap:5px;padding:6px;border-radius:20px}.cclsp-tool-btn{width:34px;height:34px;border-radius:13px}.cclsp-composer-shell textarea{height:38px;min-height:38px;font-size:12.8px}.cclsp-send{width:44px;height:36px}.cclsp-links{grid-template-columns:repeat(3,minmax(0,1fr))}.cclsp-link{padding:8px 6px;font-size:11.2px}.cclsp-footer{padding:9px 12px 11px;font-size:10.8px}}

/* v1.1 professional upgrades */
.cclsp-welcome{opacity:.96}.cclsp-typing{align-self:flex-end;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.78);border:1px solid rgba(17,24,39,.055);border-radius:16px;border-bottom-left-radius:7px;padding:8px 12px;color:#475569;font-size:11px;font-weight:850;box-shadow:0 8px 18px rgba(17,24,39,.055)}.cclsp-typing span{width:5px;height:5px;border-radius:50%;background:#94a3b8;animation:cclspTyping 1.1s ease-in-out infinite}.cclsp-typing span:nth-child(2){animation-delay:.15s}.cclsp-typing span:nth-child(3){animation-delay:.3s}.cclsp-typing b{margin-right:5px}.cclsp-rating-box{margin:8px auto 0;max-width:92%;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.78);border-radius:18px;padding:12px;text-align:center;box-shadow:0 12px 26px rgba(17,24,39,.08);color:#111827}.cclsp-rating-box strong{display:block;font-size:12px;font-weight:950;margin-bottom:8px}.cclsp-rating-stars{display:flex;justify-content:center;gap:5px}.cclsp-rating-stars button{width:34px;height:34px;border:none;border-radius:12px;background:#fff7ed;cursor:pointer;font-size:16px;transition:.2s ease}.cclsp-rating-stars button:hover{transform:translateY(-2px);background:#fed7aa}.cclsp-msg{min-width:145px}.cclsp-msg-admin{background:rgba(255,255,255,.82)!important}@keyframes cclspTyping{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-3px);opacity:1}}@media (prefers-color-scheme: dark){.cclsp-typing,.cclsp-rating-box{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.10)}.cclsp-rating-stars button{background:rgba(255,255,255,.10)}}


/* Code Cloude Live Support Pro v1.2 visual upgrade */
.cclsp-widget{
  --cclsp-surface: rgba(255,255,255,.78);
  --cclsp-soft-border: rgba(255,255,255,.72);
}
.cclsp-panel{
  border-radius: 32px !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.42) inset !important;
}
.cclsp-header{
  padding: 16px 17px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.20)) !important;
}
.cclsp-chat{
  border-radius: 26px !important;
  padding: 14px !important;
  gap: 8px !important;
  background-blend-mode: soft-light !important;
}
.cclsp-msg{
  max-width: 90% !important;
  min-width: 150px !important;
  padding: 8px 13px !important;
  border-radius: 18px !important;
  font-size: 12.7px !important;
  font-weight: 640 !important;
  line-height: 1.82 !important;
}
.cclsp-msg-user{border-bottom-right-radius:8px !important;}
.cclsp-msg-admin{border-bottom-left-radius:8px !important;background:rgba(255,255,255,.84)!important;}
.cclsp-composer-shell{
  border-radius: 24px !important;
  padding: 8px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.66)) !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.cclsp-tool-btn{
  border-radius: 15px !important;
  background: rgba(15,23,42,.055) !important;
}
.cclsp-tool-btn:hover,.cclsp-tool-btn.cclsp-active{
  background: color-mix(in srgb,var(--cclsp-primary) 15%,transparent) !important;
}
.cclsp-tool-btn.cclsp-recording{
  background: rgba(239,68,68,.16)!important;
  color:#dc2626!important;
}
.cclsp-recording-row.cclsp-show{
  display:flex!important;
  background: linear-gradient(135deg, rgba(239,68,68,.13), rgba(255,255,255,.62)) !important;
  border: 1px solid rgba(239,68,68,.18) !important;
  box-shadow: 0 10px 24px rgba(239,68,68,.08) !important;
}
.cclsp-wave i{background:linear-gradient(180deg,#ef4444,#fb7185)!important;}
.cclsp-emoji-panel{
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  user-select: none !important;
}
.cclsp-emoji-panel button{
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.cclsp-links{
  gap:10px!important;
}
.cclsp-link{
  position:relative!important;
  overflow:visible!important;
  border:none!important;
  color:#fff!important;
  isolation:isolate!important;
  min-height:70px!important;
  border-radius:20px!important;
}
.cclsp-link::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:-1;
  filter:blur(22px);
  opacity:.46;
  border-radius:inherit;
}
.cclsp-whatsapp{background:linear-gradient(135deg,#28d56d,#119b55)!important;box-shadow:0 14px 30px rgba(40,213,109,.22)!important;}
.cclsp-whatsapp::before{background:#25D366;}
.cclsp-telegram{background:linear-gradient(135deg,#2AABEE,#0088CC)!important;box-shadow:0 14px 30px rgba(42,171,238,.22)!important;}
.cclsp-telegram::before{background:#2AABEE;}
.cclsp-bale{background:linear-gradient(135deg,#3bd87a,#129a55)!important;box-shadow:0 14px 30px rgba(59,216,122,.22)!important;}
.cclsp-bale::before{background:#3bd87a;}
.cclsp-link span,.cclsp-link-icon{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.20)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto!important;
  line-height:1!important;
}
.cclsp-link svg{display:block!important;color:#fff!important;fill:currentColor!important;width:22px!important;height:22px!important;}
.cclsp-bale span{background:#fff!important;padding:6px!important;}
.cclsp-bale img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:10px!important;}
.cclsp-link b{color:#fff!important;font-weight:950!important;font-size:12px!important;margin-top:2px!important;}
@media (prefers-color-scheme: dark){
  .cclsp-msg-admin{background:rgba(255,255,255,.11)!important;color:#fff!important;}
  .cclsp-composer-shell{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.12)!important;}
}
@media (max-width:768px){
  .cclsp-msg{max-width:92%!important;min-width:130px!important;}
  .cclsp-links{gap:8px!important;}
  .cclsp-link{min-height:64px!important;border-radius:18px!important;}
}


/* Code Cloude Live Support Pro v1.3 - premium UI + voice fix polish */
.cclsp-widget{
  --cclsp-carbon:#0f172a;
  --cclsp-card:rgba(255,255,255,.88);
}
.cclsp-toggle{
  min-width: 210px !important;
  height: 66px !important;
  padding: 0 14px 0 18px !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border-radius: 24px 24px 24px 10px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.55), transparent 25%),
    linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 74%,#fff), var(--cclsp-primary) 54%, color-mix(in srgb,var(--cclsp-primary) 72%,#7c2d12)) !important;
  box-shadow:
    0 22px 56px color-mix(in srgb,var(--cclsp-primary) 38%,transparent),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -12px 28px rgba(0,0,0,.10) !important;
  overflow: visible !important;
}
.cclsp-toggle-glow{
  position:absolute;
  inset:-10px;
  z-index:-1;
  border-radius:inherit;
  background: color-mix(in srgb,var(--cclsp-primary) 34%,transparent);
  filter: blur(14px);
  opacity:.55;
  animation:cclspToggleGlow 2.6s ease-in-out infinite;
}
.cclsp-toggle-chat,
.cclsp-toggle-close{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.20) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.cclsp-toggle-chat svg{display:block;width:24px;height:24px;}
.cclsp-toggle-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2;color:#fff;}
.cclsp-toggle-copy strong{font-size:14px;font-weight:950;letter-spacing:-.2px;}
.cclsp-toggle-copy small{font-size:10.5px;font-weight:850;opacity:.82;}
.cclsp-toggle-close{right:14px!important;font-size:28px!important;line-height:1!important;}
.cclsp-open .cclsp-toggle-copy{opacity:0;transform:translateX(-8px);transition:.2s ease;}
.cclsp-panel{
  border-radius:34px!important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.68)),
    radial-gradient(circle at 20% 0%, color-mix(in srgb,var(--cclsp-primary) 15%,transparent), transparent 36%) !important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 34px 100px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.cclsp-header{
  margin:10px 10px 0!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.70)!important;
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.35))!important;
}
.cclsp-avatar{border-radius:22px!important;width:58px!important;height:58px!important;min-width:58px!important;}
.cclsp-chat{
  border-radius:28px!important;
  min-height:210px!important;
  max-height:300px!important;
  background-color:rgba(248,250,252,.72)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.cclsp-msg{
  max-width:92%!important;
  min-width:170px!important;
  padding:9px 14px!important;
  border-radius:19px!important;
  font-size:12.85px!important;
  line-height:1.86!important;
  font-weight:650!important;
}
.cclsp-msg-user{border-bottom-right-radius:7px!important;}
.cclsp-msg-admin{border-bottom-left-radius:7px!important;}
.cclsp-composer-shell{
  grid-template-columns:38px 38px 38px 1fr 48px!important;
  border-radius:27px!important;
  padding:8px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 20px 50px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.cclsp-tool-btn{width:38px!important;height:38px!important;border-radius:16px!important;font-size:17px!important;}
.cclsp-tool-btn#cclspVoiceBtn.cclsp-recording{background:rgba(239,68,68,.18)!important;color:#dc2626!important;}
.cclsp-send{width:48px!important;height:40px!important;border-radius:17px!important;}
.cclsp-recording-row.cclsp-show{
  display:flex!important;
  border-radius:18px!important;
  background:linear-gradient(135deg, rgba(239,68,68,.14), rgba(255,255,255,.70))!important;
}
.cclsp-wave i{min-height:6px;will-change:height;}
.cclsp-result.cclsp-error{background:rgba(239,68,68,.11)!important;color:#991b1b!important;border:1px solid rgba(239,68,68,.18)!important;}
.cclsp-result.cclsp-success{background:rgba(34,197,94,.11)!important;color:#166534!important;border:1px solid rgba(34,197,94,.18)!important;}
@keyframes cclspToggleGlow{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.72;transform:scale(1.04)}}
@media (prefers-color-scheme:dark){
  .cclsp-panel{background:linear-gradient(145deg, rgba(15,23,42,.92), rgba(15,23,42,.78))!important;border-color:rgba(255,255,255,.12)!important;}
  .cclsp-header{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important;}
  .cclsp-chat{background-color:rgba(2,6,23,.35)!important;border-color:rgba(255,255,255,.10)!important;}
  .cclsp-composer-shell{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important;}
}
@media (max-width:768px){
  .cclsp-toggle{min-width:180px!important;height:60px!important;border-radius:22px 22px 22px 9px!important;}
  .cclsp-toggle-chat,.cclsp-toggle-close{width:38px!important;height:38px!important;min-width:38px!important;}
  .cclsp-toggle-copy strong{font-size:13px;}
  .cclsp-toggle-copy small{font-size:10px;}
  .cclsp-chat{min-height:160px!important;max-height:230px!important;}
  .cclsp-composer-shell{grid-template-columns:36px 36px 36px 1fr 46px!important;}
  .cclsp-msg{min-width:135px!important;max-width:94%!important;}
}


/* v1.4 departments + online/offline */
.cclsp-department-field select{width:100%;height:40px;border:1px solid rgba(17,24,39,.085);outline:none;border-radius:14px;background:rgba(255,255,255,.72);color:#111827;font-family:inherit;font-size:12.5px;font-weight:800;padding:0 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}.cclsp-online-state{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:15px;background:rgba(251,191,36,.14);color:#92400e;font-size:11px;font-weight:900;line-height:1.6}.cclsp-online-state span{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.12)}.cclsp-online-state.cclsp-online{background:rgba(34,197,94,.13);color:#166534}.cclsp-online-state.cclsp-online span{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}.cclsp-online-state.cclsp-offline{background:rgba(239,68,68,.10);color:#991b1b}.cclsp-online-state.cclsp-offline span{background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.12)}
@media (prefers-color-scheme: dark){.cclsp-department-field select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.11);color:#fff}.cclsp-online-state{background:rgba(255,255,255,.08);color:#e5e7eb}}


/* v1.5 Ticket + Telegram media */
.cclsp-ticket-badge{align-self:center;margin:8px auto;padding:8px 13px;border-radius:999px;background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.22);color:#9a3412;font-size:11.5px;font-weight:950;box-shadow:0 10px 24px rgba(255,122,26,.08)}
.cclsp-image-preview{display:block;margin-top:7px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.36)}
.cclsp-image-preview img{display:block;max-width:100%;height:auto;border-radius:14px}
.cclsp-online-state.cclsp-offline{background:rgba(255,122,26,.10);border-color:rgba(255,122,26,.20);color:#9a3412}

/* v2.0.2 In-widget ticket tracking */
.cclsp-ticket-restore{
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cclsp-ticket-restore-toggle{
  width: 100%;
  border: 1px solid rgba(255,122,26,.18);
  cursor: pointer;
  border-radius: 17px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255,122,26,.12), rgba(255,255,255,.72));
  color: #9a3412;
  font-family: inherit;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(255,122,26,.08), inset 0 1px 0 rgba(255,255,255,.65);
  transition: .2s ease;
}
.cclsp-ticket-restore-toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(255,122,26,.30);
}
.cclsp-ticket-restore-box{
  display: none;
  grid-template-columns: minmax(0,1fr) 96px;
  gap: 7px;
  padding: 8px;
  border-radius: 19px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.65);
}
.cclsp-ticket-restore-box.cclsp-show{
  display: grid;
}
.cclsp-ticket-restore-box input{
  width: 100%;
  height: 39px;
  border: 1px solid rgba(17,24,39,.08);
  outline: none;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: #111827;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 0 11px;
}
.cclsp-ticket-restore-box input:focus{
  border-color: color-mix(in srgb,var(--cclsp-primary) 48%,transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--cclsp-primary) 12%,transparent);
}
.cclsp-ticket-restore-box button{
  height: 39px;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 72%,#fff), var(--cclsp-primary));
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 950;
  box-shadow: 0 10px 20px color-mix(in srgb,var(--cclsp-primary) 20%,transparent);
}
.cclsp-ticket-restore-box button:disabled{
  opacity: .65;
  cursor: wait;
}
@media (prefers-color-scheme: dark){
  .cclsp-ticket-restore-toggle{
    background: rgba(255,122,26,.12);
    color: #fed7aa;
    border-color: rgba(255,122,26,.18);
  }
  .cclsp-ticket-restore-box{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.11);
  }
  .cclsp-ticket-restore-box input{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #fff;
  }
}
@media (max-width: 420px){
  .cclsp-ticket-restore-box{
    grid-template-columns: 1fr;
  }
  .cclsp-ticket-restore-box button{
    width: 100%;
  }
}

/* v2.1 Phone verification inside widget */
.cclsp-phone-verify{
  display:none;
  padding:10px;
  border-radius:19px;
  background:linear-gradient(135deg, rgba(255,122,26,.10), rgba(255,255,255,.76));
  border:1px solid rgba(255,122,26,.16);
  box-shadow:0 12px 28px rgba(255,122,26,.08), inset 0 1px 0 rgba(255,255,255,.70);
  gap:9px;
}
.cclsp-phone-verify.cclsp-show{display:flex; flex-direction:column;}
.cclsp-phone-verify-head strong{display:block;color:#9a3412;font-size:12.5px;font-weight:950;line-height:1.5;}
.cclsp-phone-verify-head span{display:block;color:#7c2d12;font-size:11.2px;font-weight:750;line-height:1.7;margin-top:2px;}
.cclsp-phone-verify-row{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:7px;align-items:center;}
.cclsp-phone-verify-row input{
  height:40px;border:1px solid rgba(17,24,39,.08);outline:none;border-radius:14px;background:rgba(255,255,255,.84);
  color:#111827;font-family:inherit;font-size:13px;font-weight:900;text-align:center;letter-spacing:2px;padding:0 10px;
}
.cclsp-phone-verify-row input:focus{border-color:color-mix(in srgb,var(--cclsp-primary) 48%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cclsp-primary) 12%,transparent);}
.cclsp-phone-verify-row button,.cclsp-phone-verify-resend{
  height:40px;border:none;cursor:pointer;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--cclsp-primary) 70%,#fff),var(--cclsp-primary));
  color:#fff;font-family:inherit;font-size:11.5px;font-weight:950;box-shadow:0 10px 20px color-mix(in srgb,var(--cclsp-primary) 18%,transparent);
}
.cclsp-phone-verify-resend{height:34px;background:rgba(17,24,39,.07);color:#374151;box-shadow:none;}
.cclsp-phone-verify-row button:disabled,.cclsp-phone-verify-resend:disabled{opacity:.65;cursor:wait;}
@media (prefers-color-scheme:dark){
  .cclsp-phone-verify{background:rgba(255,122,26,.10);border-color:rgba(255,122,26,.18);}
  .cclsp-phone-verify-head strong{color:#fed7aa;}
  .cclsp-phone-verify-head span{color:#fdba74;}
  .cclsp-phone-verify-row input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff;}
  .cclsp-phone-verify-resend{background:rgba(255,255,255,.08);color:#e5e7eb;}
}
@media (max-width:420px){.cclsp-phone-verify-row{grid-template-columns:1fr}.cclsp-phone-verify-row button{width:100%;}}


/* v2.2 Phone verified chat restore */
.cclsp-phone-restore-help{
  grid-column: 1 / -1;
  color:#64748b;
  font-size:11.5px;
  font-weight:800;
  line-height:1.8;
  padding:2px 4px 4px;
}
.cclsp-phone-restore-box{
  grid-template-columns: 1fr !important;
}
.cclsp-phone-restore-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:7px;
}
.cclsp-phone-restore-load,
.cclsp-phone-restore-account{
  width:100%;
  height:39px;
  border:none;
  cursor:pointer;
  border-radius:14px;
  font-family:inherit;
  font-size:11.5px;
  font-weight:950;
}
.cclsp-phone-restore-load{
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 72%,#fff), var(--cclsp-primary));
  color:#fff;
  box-shadow:0 10px 20px color-mix(in srgb,var(--cclsp-primary) 20%,transparent);
}
.cclsp-phone-restore-account{
  background:rgba(22,101,52,.10);
  color:#166534;
  border:1px solid rgba(22,101,52,.16);
}
.cclsp-phone-restore-list{
  display:none;
  grid-column:1/-1;
  gap:7px;
  margin-top:2px;
}
.cclsp-phone-restore-list.cclsp-show{
  display:grid;
}
.cclsp-phone-restore-list > strong{
  color:#374151;
  font-size:11.5px;
  font-weight:950;
  padding:0 4px;
}
.cclsp-phone-restore-list button{
  text-align:right;
  height:auto;
  min-height:48px;
  border:1px solid rgba(17,24,39,.08);
  background:rgba(255,255,255,.72);
  color:#111827;
  border-radius:15px;
  padding:9px 11px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.cclsp-phone-restore-list button b{
  font-size:12px;
  font-weight:950;
}
.cclsp-phone-restore-list button small{
  color:#64748b;
  font-size:10.5px;
  font-weight:800;
  line-height:1.6;
}
.cclsp-phone-restore-list button:hover{
  border-color:color-mix(in srgb,var(--cclsp-primary) 28%,transparent);
  background:color-mix(in srgb,var(--cclsp-primary) 8%,#fff);
}
@media (prefers-color-scheme: dark){
  .cclsp-phone-restore-help,
  .cclsp-phone-restore-list > strong{
    color:#cbd5e1;
  }
  .cclsp-phone-restore-account{
    background:rgba(34,197,94,.12);
    color:#bbf7d0;
    border-color:rgba(34,197,94,.18);
  }
  .cclsp-phone-restore-list button{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(255,255,255,.12);
  }
  .cclsp-phone-restore-list button small{
    color:#cbd5e1;
  }
}
@media (max-width:420px){
  .cclsp-phone-restore-row{
    grid-template-columns:1fr;
  }
}


/* v2.4 Premium Chat UX */
.cclsp-widget{
  --cclsp-surface: rgba(255,255,255,.88);
  --cclsp-surface-strong: rgba(255,255,255,.96);
  --cclsp-ink: #111827;
  --cclsp-soft-border: rgba(255,255,255,.72);
}

/* Premium launcher */
.cclsp-toggle{
  min-width: 220px !important;
  height: 68px !important;
  padding: 0 14px 0 18px !important;
  border-radius: 26px 26px 26px 11px !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.58), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 70%,#fff), var(--cclsp-primary) 56%, color-mix(in srgb,var(--cclsp-primary) 74%,#8a2c0c)) !important;
  box-shadow:
    0 24px 64px color-mix(in srgb,var(--cclsp-primary) 38%, transparent),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -15px 28px rgba(0,0,0,.12) !important;
  overflow: visible !important;
}
.cclsp-toggle:hover{
  transform: translateY(-3px) scale(1.012) !important;
}
.cclsp-toggle::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  z-index: -2;
  background: color-mix(in srgb,var(--cclsp-primary) 30%, transparent);
  filter: blur(16px);
  opacity: .58;
  animation: cclspPremiumPulse 2.8s ease-in-out infinite;
}
.cclsp-toggle-chat,
.cclsp-toggle-close{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.cclsp-toggle-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  color:#fff !important;
  line-height:1.25 !important;
}
.cclsp-toggle-copy strong{
  font-size:14px !important;
  font-weight:950 !important;
}
.cclsp-toggle-copy small{
  font-size:10.5px !important;
  font-weight:850 !important;
  opacity:.84 !important;
}

/* Window shell */
.cclsp-window{
  width: 462px !important;
}
.cclsp-panel{
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.72)),
    radial-gradient(circle at 22% 0%, color-mix(in srgb,var(--cclsp-primary) 16%,transparent), transparent 38%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    0 34px 110px rgba(15,23,42,.25),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
  overflow: hidden !important;
}
.cclsp-header{
  margin: 10px 10px 0 !important;
  border-radius: 27px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background:
    radial-gradient(circle at 82% 15%, color-mix(in srgb,var(--cclsp-primary) 10%,transparent), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.40)) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.06) !important;
}
.cclsp-avatar{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 23px !important;
}
.cclsp-head-text strong{
  font-size: 16.5px !important;
}
.cclsp-head-text small{
  font-size: 12.2px !important;
}

/* Home screen */
.cclsp-ux-home{
  display:none;
  animation: cclspRise .26s ease both;
}
.cclsp-view-home .cclsp-ux-home{
  display:block;
}
.cclsp-ux-hero{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:26px;
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb,var(--cclsp-primary) 12%,transparent), transparent 38%),
    rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 16px 36px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.78);
  margin-bottom:12px;
}
.cclsp-ux-hero-icon{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(255,255,255,.80);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 26px color-mix(in srgb,var(--cclsp-primary) 14%,transparent);
}
.cclsp-ux-hero-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  border-radius:20px;
}
.cclsp-ux-hero strong{
  display:block;
  color:#111827;
  font-size:20px;
  font-weight:950;
  line-height:1.5;
}
.cclsp-ux-hero span{
  display:block;
  color:#64748b;
  font-size:12.5px;
  font-weight:850;
}
.cclsp-ux-cards{
  display:grid;
  gap:9px;
}
.cclsp-ux-card{
  position:relative;
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:22px;
  padding:14px 14px 14px 12px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(255,255,255,.76);
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:center;
  text-align:right;
  font-family:inherit;
  box-shadow:0 12px 30px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.72);
  transition:.22s cubic-bezier(.2,.8,.2,1);
}
.cclsp-ux-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--cclsp-primary) 25%,transparent);
}
.cclsp-ux-card i{
  width:42px;
  height:42px;
  border-radius:17px;
  background:color-mix(in srgb,var(--cclsp-primary) 12%,#fff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:20px;
  grid-row:1 / span 2;
}
.cclsp-ux-card b{
  color:#111827;
  font-size:13.5px;
  font-weight:950;
  line-height:1.5;
}
.cclsp-ux-card small{
  color:#64748b;
  font-size:11px;
  font-weight:800;
  line-height:1.6;
}
.cclsp-ux-card-primary{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.32), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 68%,#fff), var(--cclsp-primary)) !important;
  color:#fff;
  box-shadow:0 16px 34px color-mix(in srgb,var(--cclsp-primary) 20%,transparent);
}
.cclsp-ux-card-primary b,
.cclsp-ux-card-primary small{
  color:#fff;
}
.cclsp-ux-card-primary i{
  background:rgba(255,255,255,.22);
}

/* tabs */
.cclsp-ux-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:6px;
  margin:0 0 10px;
  border-radius:19px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.cclsp-ux-tabs button{
  border:none;
  cursor:pointer;
  height:34px;
  border-radius:14px;
  background:transparent;
  color:#64748b;
  font-family:inherit;
  font-size:10.8px;
  font-weight:950;
  transition:.18s ease;
}
.cclsp-ux-tabs button.cclsp-active{
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 16%,#fff), rgba(255,255,255,.78));
  color:color-mix(in srgb,var(--cclsp-primary) 80%,#111827);
  box-shadow:0 8px 20px color-mix(in srgb,var(--cclsp-primary) 10%,transparent);
}

/* view logic */
.cclsp-view-home .cclsp-chat,
.cclsp-view-home .cclsp-ticket-restore,
.cclsp-view-home .cclsp-form,
.cclsp-view-home .cclsp-divider,
.cclsp-view-home .cclsp-links,
.cclsp-view-chat .cclsp-ux-home,
.cclsp-view-chat .cclsp-ticket-restore,
.cclsp-view-chat .cclsp-divider,
.cclsp-view-chat .cclsp-links,
.cclsp-view-restore .cclsp-ux-home,
.cclsp-view-restore .cclsp-chat,
.cclsp-view-restore .cclsp-form,
.cclsp-view-restore .cclsp-divider,
.cclsp-view-restore .cclsp-links,
.cclsp-view-quick .cclsp-ux-home,
.cclsp-view-quick .cclsp-chat,
.cclsp-view-quick .cclsp-ticket-restore,
.cclsp-view-quick .cclsp-form{
  display:none !important;
}
.cclsp-view-restore .cclsp-ticket-restore,
.cclsp-view-quick .cclsp-divider,
.cclsp-view-quick .cclsp-links{
  display:flex !important;
}

/* Chat area and bubbles */
.cclsp-chat{
  border-radius:30px !important;
  min-height:250px !important;
  max-height:330px !important;
  padding:13px !important;
  background-color:rgba(248,250,252,.72) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.cclsp-msg{
  max-width:92% !important;
  min-width:160px !important;
  padding:8px 13px !important;
  border-radius:20px !important;
  font-size:12.85px !important;
  line-height:1.85 !important;
  font-weight:640 !important;
  animation:cclspBubbleIn .20s ease both;
}
.cclsp-msg-user{
  border-bottom-right-radius:7px !important;
}
.cclsp-msg-admin{
  border-bottom-left-radius:7px !important;
  background:rgba(255,255,255,.78) !important;
}

/* phone verification and OTP feeling */
.cclsp-phone-verify{
  border-radius:22px !important;
  padding:12px !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb,var(--cclsp-primary) 11%,transparent), transparent 36%),
    rgba(255,255,255,.72) !important;
  border:1px solid rgba(255,255,255,.76) !important;
}
.cclsp-phone-verify-row{
  grid-template-columns: minmax(0,1fr) 86px !important;
}
#cclspPhoneVerifyCode,
#cclspPhoneRestoreCode{
  text-align:center !important;
  letter-spacing:7px !important;
  font-weight:950 !important;
  font-size:16px !important;
  direction:ltr !important;
}

/* composer */
.cclsp-composer-shell{
  grid-template-columns:38px 38px 38px 1fr 50px !important;
  border-radius:29px !important;
  padding:8px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 22px 55px rgba(15,23,42,.105), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.cclsp-tool-btn{
  width:38px !important;
  height:38px !important;
  border-radius:17px !important;
  font-size:17px !important;
  background:rgba(15,23,42,.055) !important;
}
.cclsp-composer-shell textarea{
  height:39px !important;
  min-height:39px !important;
  padding:7px 4px !important;
}
.cclsp-send{
  width:50px !important;
  height:40px !important;
  border-radius:18px !important;
}
.cclsp-form{
  gap:9px !important;
}
.cclsp-field input,
.cclsp-department-field select{
  border-radius:17px !important;
  height:42px !important;
}

/* restore view */
.cclsp-phone-restore-box{
  padding:10px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(255,255,255,.80) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
.cclsp-ticket-restore-toggle{
  border-radius:20px !important;
  min-height:44px !important;
}
.cclsp-phone-restore-list button{
  border-radius:18px !important;
}

/* quick links */
.cclsp-view-quick .cclsp-links{
  margin-top:10px;
  gap:10px !important;
}
.cclsp-link{
  min-height:76px !important;
  border-radius:22px !important;
}

/* mobile bottom sheet */
@media (max-width:768px){
  .cclsp-widget{
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    pointer-events:none;
  }
  .cclsp-toggle{
    pointer-events:auto;
    right:12px;
    bottom:14px;
    margin-right:12px !important;
    min-width:188px !important;
    height:60px !important;
    border-radius:24px 24px 24px 10px !important;
  }
  .cclsp-window{
    pointer-events:auto;
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    max-width:none !important;
    transform-origin:bottom center !important;
  }
  .cclsp-panel{
    height:calc(100dvh - 18px) !important;
    min-height:0 !important;
    border-radius:32px 32px 24px 24px !important;
  }
  .cclsp-header{
    margin:8px 8px 0 !important;
    padding:12px !important;
  }
  .cclsp-body{
    padding:10px !important;
  }
  .cclsp-chat{
    min-height:0 !important;
    max-height:none !important;
    flex:1 1 auto !important;
  }
  .cclsp-view-chat .cclsp-body{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }
  .cclsp-view-chat .cclsp-form{
    flex:0 0 auto !important;
  }
  .cclsp-ux-home{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .cclsp-ux-hero{
    padding:14px !important;
    border-radius:24px !important;
  }
  .cclsp-ux-tabs{
    position:sticky;
    top:0;
    z-index:6;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .cclsp-contact-grid{
    grid-template-columns:1fr !important;
  }
  .cclsp-subject-field{
    display:none !important;
  }
  .cclsp-composer-shell{
    grid-template-columns:36px 36px 36px 1fr 46px !important;
    border-radius:26px !important;
    padding:7px !important;
  }
  .cclsp-tool-btn{
    width:36px !important;
    height:36px !important;
    border-radius:16px !important;
  }
  .cclsp-send{
    width:46px !important;
    height:38px !important;
  }
  .cclsp-ux-tabs button{
    font-size:10.2px !important;
  }
}

@media (max-width:420px){
  .cclsp-ux-tabs{
    gap:4px;
    padding:5px;
  }
  .cclsp-ux-tabs button{
    font-size:9.8px !important;
    height:32px !important;
  }
  .cclsp-ux-card{
    padding:12px !important;
    border-radius:20px !important;
  }
  .cclsp-window{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
  }
}

@media (prefers-color-scheme:dark){
  .cclsp-widget{
    --cclsp-surface: rgba(15,23,42,.86);
    --cclsp-surface-strong: rgba(15,23,42,.94);
    --cclsp-ink:#f9fafb;
  }
  .cclsp-panel{
    background:linear-gradient(145deg, rgba(15,23,42,.94), rgba(15,23,42,.80)) !important;
    border-color:rgba(255,255,255,.12) !important;
  }
  .cclsp-header,
  .cclsp-ux-hero,
  .cclsp-ux-card,
  .cclsp-ux-tabs,
  .cclsp-phone-restore-box,
  .cclsp-phone-verify,
  .cclsp-composer-shell{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.12) !important;
  }
  .cclsp-ux-hero strong,
  .cclsp-ux-card b{
    color:#fff !important;
  }
  .cclsp-ux-hero span,
  .cclsp-ux-card small{
    color:#cbd5e1 !important;
  }
  .cclsp-msg-admin{
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
  }
}

@keyframes cclspPremiumPulse{
  0%,100%{opacity:.42;transform:scale(.97)}
  50%{opacity:.72;transform:scale(1.04)}
}
@keyframes cclspRise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes cclspBubbleIn{
  from{opacity:0;transform:translateY(5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}


/* v2.4.1 Mobile UX layout fix
   Fixes: huge empty space, floating launcher covering popup, misplaced tabs,
   mobile bottom-sheet layout, chat scroll balance, and quick-contact spacing.
*/

/* Hide launcher while panel is open; close is now inside header */
.cclsp-widget.cclsp-open .cclsp-toggle{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(14px) scale(.92) !important;
}

/* Header close button */
.cclsp-header{
  position:relative !important;
  padding-left:62px !important;
}
.cclsp-header-close{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  cursor:pointer;
  border-radius:17px;
  background:rgba(255,255,255,.68);
  color:#f97316;
  font-family:inherit;
  font-size:26px;
  font-weight:950;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.70);
  transition:.2s ease;
}
.cclsp-header-close:hover{
  transform:translateY(-50%) scale(1.04);
  background:color-mix(in srgb,var(--cclsp-primary) 12%,#fff);
}

/* Tabs become a real section under header */
.cclsp-ux-tabs{
  order:0;
  margin:0 0 10px !important;
  position:sticky;
  top:0;
  z-index:8;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Home and quick views should fit content, not stretch to full height */
.cclsp-view-home .cclsp-panel,
.cclsp-view-quick .cclsp-panel{
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 28px) !important;
}

.cclsp-view-home .cclsp-body,
.cclsp-view-quick .cclsp-body{
  flex:0 0 auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-bottom:12px !important;
}

.cclsp-view-home .cclsp-footer,
.cclsp-view-quick .cclsp-footer{
  display:none !important;
}

/* Chat and restore views keep the app-like sheet, but with correct internal scroll */
.cclsp-view-chat .cclsp-panel,
.cclsp-view-restore .cclsp-panel{
  height:min(780px, calc(100dvh - 28px)) !important;
  min-height:0 !important;
  max-height:calc(100dvh - 28px) !important;
}

.cclsp-view-chat .cclsp-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  padding-bottom:10px !important;
}

.cclsp-view-chat .cclsp-ux-tabs{
  flex:0 0 auto !important;
}

.cclsp-view-chat .cclsp-chat{
  flex:1 1 auto !important;
  min-height:150px !important;
  max-height:none !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  margin-bottom:10px !important;
}

.cclsp-view-chat .cclsp-form{
  flex:0 0 auto !important;
  min-height:0 !important;
}

.cclsp-view-chat .cclsp-composer-shell{
  position:relative !important;
  bottom:auto !important;
  z-index:3 !important;
}

/* Restore view scroll area */
.cclsp-view-restore .cclsp-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

.cclsp-view-restore .cclsp-ticket-restore{
  margin-bottom:0 !important;
}

/* Quick contact: fill the view with better cards rather than tiny icons + empty page */
.cclsp-view-quick .cclsp-body{
  display:block !important;
}
.cclsp-view-quick .cclsp-divider{
  margin:18px 0 13px !important;
}
.cclsp-view-quick .cclsp-links{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 0 8px !important;
}
.cclsp-view-quick .cclsp-link{
  min-height:108px !important;
  border-radius:28px !important;
  padding:15px 8px !important;
  justify-content:center !important;
  box-shadow:0 18px 42px rgba(15,23,42,.08), 0 0 28px rgba(255,122,26,.05) !important;
}
.cclsp-view-quick .cclsp-link span,
.cclsp-view-quick .cclsp-link .cclsp-link-icon{
  width:48px !important;
  height:48px !important;
  border-radius:19px !important;
}
.cclsp-view-quick .cclsp-link b{
  font-size:12.5px !important;
  font-weight:950 !important;
}

/* Home cards tighter and more balanced */
.cclsp-view-home .cclsp-ux-home{
  margin-top:0 !important;
}
.cclsp-ux-hero{
  margin-bottom:10px !important;
}
.cclsp-ux-cards{
  gap:8px !important;
}
.cclsp-ux-card{
  min-height:84px !important;
}
.cclsp-ux-card i{
  grid-row:1 / span 2;
}

/* Reduce awkward scrollbars visually */
.cclsp-body,
.cclsp-chat,
.cclsp-view-restore .cclsp-body{
  scrollbar-width:thin;
}
.cclsp-body::-webkit-scrollbar,
.cclsp-chat::-webkit-scrollbar,
.cclsp-view-restore .cclsp-body::-webkit-scrollbar{
  width:4px;
}
.cclsp-body::-webkit-scrollbar-thumb,
.cclsp-chat::-webkit-scrollbar-thumb,
.cclsp-view-restore .cclsp-body::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.14);
  border-radius:99px;
}

/* Mobile: true bottom sheet */
@media (max-width:768px){
  .cclsp-widget{
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:100% !important;
    pointer-events:none !important;
  }

  .cclsp-widget:not(.cclsp-open) .cclsp-toggle{
    pointer-events:auto !important;
    margin-right:12px !important;
    margin-bottom:14px !important;
  }

  .cclsp-window{
    pointer-events:auto !important;
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    max-width:none !important;
    transform-origin:bottom center !important;
  }

  .cclsp-panel{
    border-radius:32px 32px 24px 24px !important;
    overflow:hidden !important;
  }

  .cclsp-header{
    margin:8px 8px 0 !important;
    padding:11px 12px 11px 58px !important;
    border-radius:26px !important;
  }

  .cclsp-header-close{
    left:10px !important;
    width:38px !important;
    height:38px !important;
    border-radius:16px !important;
    font-size:24px !important;
  }

  .cclsp-avatar{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
  }

  .cclsp-head-text strong{
    font-size:15px !important;
  }
  .cclsp-head-text small{
    font-size:11.5px !important;
  }

  .cclsp-body{
    padding:10px !important;
  }

  .cclsp-ux-tabs{
    margin:0 0 9px !important;
    grid-template-columns:repeat(4, 1fr) !important;
    border-radius:18px !important;
  }

  .cclsp-ux-tabs button{
    height:34px !important;
    font-size:10.5px !important;
    border-radius:14px !important;
  }

  .cclsp-view-home .cclsp-panel,
  .cclsp-view-quick .cclsp-panel{
    height:auto !important;
    max-height:calc(100dvh - 16px) !important;
  }

  .cclsp-view-chat .cclsp-panel,
  .cclsp-view-restore .cclsp-panel{
    height:calc(100dvh - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
  }

  .cclsp-view-chat .cclsp-body{
    height:auto !important;
  }

  .cclsp-view-chat .cclsp-chat{
    min-height:130px !important;
  }

  .cclsp-view-chat .cclsp-form{
    gap:8px !important;
  }

  .cclsp-contact-grid{
    grid-template-columns:1fr !important;
  }

  .cclsp-field label{
    font-size:10.5px !important;
  }

  .cclsp-field input,
  .cclsp-department-field select{
    height:39px !important;
    border-radius:15px !important;
  }

  .cclsp-composer-shell{
    grid-template-columns:36px 36px 36px 1fr 46px !important;
    padding:6px !important;
    border-radius:25px !important;
  }

  .cclsp-tool-btn{
    width:36px !important;
    height:36px !important;
  }

  .cclsp-send{
    width:46px !important;
    height:38px !important;
  }

  .cclsp-footer{
    padding:8px 12px !important;
  }

  .cclsp-view-chat .cclsp-footer,
  .cclsp-view-restore .cclsp-footer{
    display:block !important;
    flex:0 0 auto !important;
  }

  .cclsp-view-home .cclsp-ux-card{
    min-height:78px !important;
    padding:12px !important;
  }

  .cclsp-view-quick .cclsp-links{
    gap:10px !important;
  }
  .cclsp-view-quick .cclsp-link{
    min-height:96px !important;
    border-radius:24px !important;
  }
  .cclsp-view-quick .cclsp-link span,
  .cclsp-view-quick .cclsp-link .cclsp-link-icon{
    width:44px !important;
    height:44px !important;
  }
}

@media (max-width:420px){
  .cclsp-window{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
  }

  .cclsp-view-chat .cclsp-panel,
  .cclsp-view-restore .cclsp-panel{
    height:calc(100dvh - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
  }

  .cclsp-view-home .cclsp-panel,
  .cclsp-view-quick .cclsp-panel{
    max-height:calc(100dvh - 12px) !important;
  }

  .cclsp-ux-tabs{
    gap:4px !important;
    padding:5px !important;
  }

  .cclsp-ux-tabs button{
    font-size:9.5px !important;
    height:31px !important;
  }

  .cclsp-view-quick .cclsp-links{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }

  .cclsp-view-quick .cclsp-link{
    min-height:88px !important;
    padding:12px 6px !important;
  }

  .cclsp-view-quick .cclsp-link span,
  .cclsp-view-quick .cclsp-link .cclsp-link-icon{
    width:40px !important;
    height:40px !important;
  }
}

@media (prefers-color-scheme:dark){
  .cclsp-header-close{
    background:rgba(255,255,255,.10);
    color:#fed7aa;
  }
}


/* v2.5 Simple Premium UX
   Goal: remove visual complexity, make the widget readable and task-based.
*/

/* General simplification */
.cclsp-widget{
  --cclsp-simple-ink:#111827;
  --cclsp-simple-muted:#64748b;
  --cclsp-simple-card:rgba(255,255,255,.78);
  --cclsp-simple-border:rgba(255,255,255,.72);
}

/* Launcher: smaller and clearer */
.cclsp-toggle{
  min-width:174px !important;
  height:58px !important;
  padding:0 13px !important;
  border-radius:22px 22px 22px 10px !important;
  gap:8px !important;
}
.cclsp-toggle-copy strong{
  font-size:13px !important;
}
.cclsp-toggle-copy small{
  display:none !important;
}
.cclsp-toggle-chat,
.cclsp-toggle-close{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:15px !important;
}

/* Hide launcher while widget is open */
.cclsp-widget.cclsp-open .cclsp-toggle{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(14px) scale(.94) !important;
}

/* Compact header */
.cclsp-header{
  margin:8px 8px 0 !important;
  padding:10px 100px 10px 12px !important;
  min-height:66px !important;
  border-radius:24px !important;
  align-items:center !important;
}
.cclsp-avatar{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  border-radius:18px !important;
}
.cclsp-head-text strong{
  font-size:15px !important;
  line-height:1.35 !important;
}
.cclsp-head-text small{
  font-size:11px !important;
  line-height:1.5 !important;
}
.cclsp-header-close,
.cclsp-header-back{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:36px !important;
  height:36px !important;
  border:none !important;
  border-radius:14px !important;
  cursor:pointer !important;
  font-family:inherit !important;
  font-weight:950 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 10px 22px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.70) !important;
}
.cclsp-header-close{
  right:12px !important;
  background:rgba(249,115,22,.10) !important;
  color:#f97316 !important;
  font-size:22px !important;
}
.cclsp-header-back{
  right:54px !important;
  background:rgba(15,23,42,.06) !important;
  color:#334155 !important;
  font-size:26px !important;
}
.cclsp-view-home .cclsp-header-back{
  display:none !important;
}

/* Remove tab complexity completely */
.cclsp-ux-tabs{
  display:none !important;
}

/* Body and panel: content-fit on home/restore, app-like on chat */
.cclsp-panel{
  border-radius:30px !important;
}
.cclsp-body{
  padding:10px !important;
}
.cclsp-view-home .cclsp-panel,
.cclsp-view-quick .cclsp-panel{
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 28px) !important;
}
.cclsp-view-home .cclsp-body,
.cclsp-view-quick .cclsp-body{
  overflow:visible !important;
}
.cclsp-view-home .cclsp-footer,
.cclsp-view-quick .cclsp-footer{
  display:none !important;
}

/* Simple home */
.cclsp-simple-home{
  display:none;
}
.cclsp-view-home .cclsp-simple-home{
  display:block !important;
  animation:cclspRise .22s ease both;
}
.cclsp-simple-hero{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px;
  border-radius:23px;
  background:var(--cclsp-simple-card);
  border:1px solid var(--cclsp-simple-border);
  box-shadow:0 14px 32px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.76);
  margin-bottom:10px;
}
.cclsp-simple-hero-icon{
  width:50px;
  height:50px;
  min-width:50px;
  border-radius:19px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 22px color-mix(in srgb,var(--cclsp-primary) 13%,transparent);
}
.cclsp-simple-hero-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
}
.cclsp-simple-hero strong{
  display:block;
  color:var(--cclsp-simple-ink);
  font-size:18px;
  font-weight:950;
  line-height:1.5;
}
.cclsp-simple-hero span{
  display:block;
  color:var(--cclsp-simple-muted);
  font-size:12px;
  font-weight:800;
  line-height:1.7;
}
.cclsp-simple-actions{
  display:grid;
  gap:8px;
}
.cclsp-simple-action{
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:22px;
  padding:13px;
  min-height:82px;
  font-family:inherit;
  text-align:right;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.76);
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:center;
  box-shadow:0 12px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.72);
  transition:.2s ease;
}
.cclsp-simple-action:hover{
  transform:translateY(-1px);
}
.cclsp-simple-action i{
  width:42px;
  height:42px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:20px;
  background:color-mix(in srgb,var(--cclsp-primary) 11%,#fff);
  grid-row:1 / span 2;
}
.cclsp-simple-action b{
  color:#111827;
  font-size:13.5px;
  font-weight:950;
  line-height:1.5;
}
.cclsp-simple-action small{
  color:#64748b;
  font-size:11px;
  font-weight:800;
  line-height:1.6;
}
.cclsp-simple-action-primary{
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 70%,#fff), var(--cclsp-primary)) !important;
  box-shadow:0 16px 34px color-mix(in srgb,var(--cclsp-primary) 22%,transparent) !important;
}
.cclsp-simple-action-primary b,
.cclsp-simple-action-primary small{
  color:#fff !important;
}
.cclsp-simple-action-primary i{
  background:rgba(255,255,255,.22) !important;
}
.cclsp-simple-quick{
  margin-top:10px;
  padding:10px 11px;
  border-radius:20px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.70);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cclsp-simple-quick span{
  color:#64748b;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.cclsp-simple-quick div{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.cclsp-simple-quick a{
  text-decoration:none !important;
  color:#166534 !important;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.14);
  border-radius:999px;
  padding:7px 10px;
  font-size:10.8px;
  font-weight:950;
}

/* View logic: home is cards only, chat is form+messages, restore is restore only */
.cclsp-view-home .cclsp-chat,
.cclsp-view-home .cclsp-ticket-restore,
.cclsp-view-home .cclsp-form,
.cclsp-view-home .cclsp-divider,
.cclsp-view-home .cclsp-links{
  display:none !important;
}
.cclsp-view-chat .cclsp-simple-home,
.cclsp-view-chat .cclsp-ticket-restore,
.cclsp-view-chat .cclsp-divider,
.cclsp-view-chat .cclsp-links{
  display:none !important;
}
.cclsp-view-restore .cclsp-simple-home,
.cclsp-view-restore .cclsp-chat,
.cclsp-view-restore .cclsp-form,
.cclsp-view-restore .cclsp-divider,
.cclsp-view-restore .cclsp-links{
  display:none !important;
}
.cclsp-view-restore .cclsp-ticket-restore{
  display:flex !important;
}
.cclsp-view-quick .cclsp-simple-home,
.cclsp-view-quick .cclsp-chat,
.cclsp-view-quick .cclsp-ticket-restore,
.cclsp-view-quick .cclsp-form{
  display:none !important;
}

/* Chat layout */
.cclsp-view-chat .cclsp-panel,
.cclsp-view-restore .cclsp-panel{
  height:min(740px, calc(100dvh - 28px)) !important;
  max-height:calc(100dvh - 28px) !important;
  min-height:0 !important;
}
.cclsp-view-chat .cclsp-body{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.cclsp-view-chat .cclsp-chat{
  flex:1 1 auto !important;
  min-height:150px !important;
  max-height:none !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  margin-bottom:9px !important;
  padding:10px !important;
  border-radius:24px !important;
}
.cclsp-view-chat .cclsp-form{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}

/* Make the form feel staged and less noisy */
.cclsp-contact-grid{
  order:1 !important;
}
.cclsp-phone-verify{
  order:2 !important;
}
.cclsp-department-field{
  order:3 !important;
}
.cclsp-online-state{
  order:4 !important;
  min-height:38px !important;
  border-radius:16px !important;
  font-size:11.5px !important;
}
.cclsp-subject-field{
  display:none !important;
}
.cclsp-recording-row{
  order:5 !important;
}
.cclsp-attach-preview{
  order:6 !important;
}
.cclsp-emoji-panel{
  display:none !important;
}
.cclsp-composer-shell{
  order:7 !important;
}
.cclsp-result{
  order:8 !important;
}

/* Inputs */
.cclsp-field label{
  font-size:10.5px !important;
  font-weight:900 !important;
  color:#475569 !important;
}
.cclsp-field input,
.cclsp-department-field select{
  height:40px !important;
  border-radius:16px !important;
  font-size:12.5px !important;
}

/* OTP box cleaner */
.cclsp-phone-verify{
  border-radius:20px !important;
  padding:10px !important;
  background:rgba(255,255,255,.70) !important;
}
.cclsp-phone-verify-head strong{
  font-size:12.5px !important;
}
.cclsp-phone-verify-head span{
  font-size:11px !important;
}
#cclspPhoneVerifyCode,
#cclspPhoneRestoreCode{
  text-align:center !important;
  direction:ltr !important;
  letter-spacing:7px !important;
  font-weight:950 !important;
  font-size:16px !important;
}

/* Composer: fewer visible controls */
#cclspEmojiBtn{
  display:none !important;
}
.cclsp-composer-shell{
  grid-template-columns:36px 36px minmax(0,1fr) 46px !important;
  border-radius:24px !important;
  padding:6px !important;
  background:rgba(255,255,255,.88) !important;
}
.cclsp-tool-btn{
  width:36px !important;
  height:36px !important;
  border-radius:15px !important;
}
.cclsp-composer-shell textarea{
  height:38px !important;
  min-height:38px !important;
  font-size:13px !important;
}
.cclsp-send{
  width:46px !important;
  height:38px !important;
  border-radius:16px !important;
}

/* Bubbles: simpler and more readable */
.cclsp-msg{
  max-width:90% !important;
  min-width:130px !important;
  padding:8px 12px !important;
  border-radius:18px !important;
  font-size:13px !important;
  line-height:1.8 !important;
  box-shadow:0 7px 18px rgba(15,23,42,.055) !important;
}
.cclsp-msg-user{
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 70%,#fff), var(--cclsp-primary)) !important;
}
.cclsp-msg-admin{
  background:rgba(255,255,255,.82) !important;
}

/* Restore is a focused form */
.cclsp-view-restore .cclsp-body{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
.cclsp-view-restore .cclsp-ticket-restore-toggle{
  display:none !important;
}
.cclsp-view-restore .cclsp-ticket-restore-box{
  display:grid !important;
  margin-top:0 !important;
  border-radius:24px !important;
}
.cclsp-phone-restore-help{
  font-size:11.5px !important;
  line-height:1.8 !important;
}

/* Old quick page remains supported but hidden from main UX */
.cclsp-view-quick .cclsp-panel{
  height:auto !important;
  min-height:0 !important;
}
.cclsp-view-quick .cclsp-footer{
  display:none !important;
}

/* Mobile */
@media (max-width:768px){
  .cclsp-window{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
  }
  .cclsp-view-home .cclsp-panel,
  .cclsp-view-quick .cclsp-panel{
    height:auto !important;
    max-height:calc(100dvh - 16px) !important;
  }
  .cclsp-view-chat .cclsp-panel,
  .cclsp-view-restore .cclsp-panel{
    height:calc(100dvh - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
  }
  .cclsp-header{
    padding:9px 92px 9px 10px !important;
    min-height:62px !important;
  }
  .cclsp-header-close,
  .cclsp-header-back{
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
  }
  .cclsp-header-close{
    right:10px !important;
  }
  .cclsp-header-back{
    right:48px !important;
  }
  .cclsp-avatar{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }
  .cclsp-head-text strong{
    font-size:14px !important;
  }
  .cclsp-head-text small{
    font-size:10.8px !important;
  }
  .cclsp-body{
    padding:9px !important;
  }
  .cclsp-simple-hero{
    padding:12px !important;
    border-radius:21px !important;
  }
  .cclsp-simple-action{
    min-height:76px !important;
    padding:12px !important;
    border-radius:20px !important;
  }
  .cclsp-simple-quick{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .cclsp-contact-grid{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  .cclsp-view-chat .cclsp-chat{
    min-height:120px !important;
  }
}

@media (max-width:420px){
  .cclsp-window{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
  }
  .cclsp-view-chat .cclsp-panel,
  .cclsp-view-restore .cclsp-panel{
    height:calc(100dvh - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
  }
  .cclsp-simple-action b{
    font-size:13px !important;
  }
  .cclsp-simple-action small{
    font-size:10.5px !important;
  }
}

/* Dark mode */
@media (prefers-color-scheme:dark){
  .cclsp-widget{
    --cclsp-simple-ink:#f9fafb;
    --cclsp-simple-muted:#cbd5e1;
    --cclsp-simple-card:rgba(255,255,255,.08);
    --cclsp-simple-border:rgba(255,255,255,.12);
  }
  .cclsp-simple-hero,
  .cclsp-simple-action,
  .cclsp-simple-quick,
  .cclsp-phone-verify,
  .cclsp-composer-shell{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.12) !important;
  }
  .cclsp-simple-action b,
  .cclsp-simple-hero strong{
    color:#fff !important;
  }
  .cclsp-simple-action small,
  .cclsp-simple-hero span{
    color:#cbd5e1 !important;
  }
  .cclsp-msg-admin{
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
  }
}


/* v2.5.1 Desktop launcher, voice clear, and scroll containment fixes */

/* On desktop, keep the floating launcher visible even when popup is open. */
@media (min-width: 769px){
  .cclsp-widget.cclsp-open .cclsp-toggle{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
}

/* On mobile, keep previous behavior: hide launcher while panel is open. */
@media (max-width: 768px){
  .cclsp-widget.cclsp-open .cclsp-toggle{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(14px) scale(.94) !important;
  }
}

/* Make all widget scroll areas contain scroll and not leak to page body. */
.cclsp-window,
.cclsp-panel,
.cclsp-body,
.cclsp-chat,
.cclsp-view-restore .cclsp-body,
.cclsp-ticket-restore-box,
.cclsp-phone-restore-list{
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}

.cclsp-widget.cclsp-open .cclsp-window{
  touch-action: pan-y !important;
}

/* The voice/file clear button should act only as a local remove button. */
.cclsp-attach-preview button[data-clear],
.cclsp-preview-line button[data-clear]{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
}

/* Desktop panel offset so the still-visible launcher does not visually cover the panel. */
@media (min-width: 769px){
  .cclsp-right .cclsp-window{
    right: 0 !important;
  }
  .cclsp-left .cclsp-window{
    left: 0 !important;
  }
}


/* v2.5.2 Home UI cleanup */

/* Remove duplicated online dot; keep only the text status dot. */
.cclsp-header .cclsp-avatar span,
.cclsp-simple-hero .cclsp-avatar span{
  display:none !important;
}

/* Header should feel lighter and not show two online indicators. */
.cclsp-header{
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* The hello section should NOT be inside a capsule/card. */
.cclsp-simple-hero{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:8px 6px 10px !important;
  margin:2px 0 8px !important;
}
.cclsp-simple-hero-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.62) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
}
.cclsp-simple-hero strong{
  font-size:18px !important;
  margin-bottom:0 !important;
}
.cclsp-simple-hero span{
  font-size:12px !important;
  line-height:1.65 !important;
}

/* Brand quick links: real brand colors + icons, same compact size. */
.cclsp-brand-quick{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:8px 2px 0 !important;
  margin-top:10px !important;
}
.cclsp-brand-quick > span{
  color:#64748b !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.cclsp-brand-quick > div{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}
.cclsp-brand-link{
  width:auto !important;
  min-width:58px !important;
  height:34px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  text-decoration:none !important;
  color:#fff !important;
  font-size:10.8px !important;
  font-weight:950 !important;
  border:none !important;
  box-shadow:0 10px 22px rgba(15,23,42,.09) !important;
  transition:.18s ease !important;
}
.cclsp-brand-link:hover{
  transform:translateY(-1px) !important;
  color:#fff !important;
}
.cclsp-brand-link svg{
  width:17px !important;
  height:17px !important;
  display:block !important;
  flex:0 0 auto !important;
}
.cclsp-brand-link b{
  color:#fff !important;
  font-size:10.8px !important;
  font-weight:950 !important;
  line-height:1 !important;
}
.cclsp-brand-whatsapp{
  background:linear-gradient(135deg,#25D366,#128C7E) !important;
  box-shadow:0 10px 22px rgba(37,211,102,.22) !important;
}
.cclsp-brand-telegram{
  background:linear-gradient(135deg,#2AABEE,#0088CC) !important;
  box-shadow:0 10px 22px rgba(42,171,238,.22) !important;
}
.cclsp-brand-bale{
  background:linear-gradient(135deg,#35d879,#13a85a) !important;
  box-shadow:0 10px 22px rgba(47,207,117,.22) !important;
}
.cclsp-brand-bale-icon{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  border-radius:6px !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:2px !important;
}
.cclsp-brand-bale-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* Remove tracking code badge from user-facing chat; restoration is now by verified phone. */
.cclsp-ticket-code,
.cclsp-ticket-badge,
.cclsp-msg-ticket,
.cclsp-tracking-code,
.cclsp-chat-ticket-code,
.cclsp-ticket-chip,
.cclsp-ticket-code-badge,
.cclsp-ticket-pill{
  display:none !important;
}

/* If old ticket code appears as a standalone pill immediately under chat, hide it visually. */
.cclsp-chat + .cclsp-ticket-code,
.cclsp-chat + .cclsp-ticket-badge,
.cclsp-chat + .cclsp-ticket-pill{
  display:none !important;
}

/* Make first screen less card-heavy. */
.cclsp-simple-actions{
  gap:8px !important;
}
.cclsp-simple-action{
  box-shadow:0 10px 24px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.68) !important;
}

/* Dark mode harmony */
@media (prefers-color-scheme:dark){
  .cclsp-header{
    background:rgba(255,255,255,.08) !important;
  }
  .cclsp-simple-hero-icon{
    background:rgba(255,255,255,.10) !important;
  }
  .cclsp-brand-quick > span{
    color:#cbd5e1 !important;
  }
}

@media (max-width:768px){
  .cclsp-simple-hero{
    padding:6px 4px 9px !important;
  }
  .cclsp-brand-quick{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .cclsp-brand-quick > div{
    width:100% !important;
    justify-content:flex-start !important;
  }
}


/* v2.6 Smart Start + OTP Countdown */

/* Previous chat resume action */
.cclsp-resume-actions{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 9px;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(255,122,26,.10), rgba(255,255,255,.72));
  border:1px solid rgba(255,122,26,.15);
  box-shadow:0 10px 24px rgba(255,122,26,.08), inset 0 1px 0 rgba(255,255,255,.72);
}
.cclsp-resume-actions.cclsp-show{
  display:flex;
}
.cclsp-resume-actions strong{
  display:block;
  color:#9a3412;
  font-size:12px;
  font-weight:950;
  line-height:1.5;
}
.cclsp-resume-actions span{
  display:block;
  color:#7c2d12;
  font-size:10.8px;
  font-weight:800;
  line-height:1.7;
  margin-top:2px;
}
.cclsp-resume-actions button{
  border:none;
  cursor:pointer;
  min-width:112px;
  height:38px;
  border-radius:15px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 70%,#fff), var(--cclsp-primary));
  color:#fff;
  font-family:inherit;
  font-size:11.5px;
  font-weight:950;
  box-shadow:0 10px 22px color-mix(in srgb,var(--cclsp-primary) 20%,transparent);
}

/* Guest phone gate: before verification, keep the chat screen very simple. */
.cclsp-phone-locked .cclsp-chat,
.cclsp-phone-locked .cclsp-resume-actions,
.cclsp-phone-locked .cclsp-department-field,
.cclsp-phone-locked .cclsp-online-state,
.cclsp-phone-locked .cclsp-subject-field,
.cclsp-phone-locked .cclsp-recording-row,
.cclsp-phone-locked .cclsp-attach-preview,
.cclsp-phone-locked .cclsp-emoji-panel,
.cclsp-phone-locked .cclsp-composer-shell{
  display:none !important;
}
.cclsp-phone-locked .cclsp-form{
  gap:10px !important;
}
.cclsp-phone-locked .cclsp-contact-grid{
  order:1 !important;
}

/* Verification box states */
.cclsp-phone-verify{
  position:relative;
}
.cclsp-phone-verify:not(.cclsp-code-sent) .cclsp-phone-verify-row{
  display:none !important;
}
.cclsp-phone-verify.cclsp-code-sent .cclsp-phone-verify-row{
  display:grid !important;
}
.cclsp-phone-verify:not(.cclsp-code-sent) .cclsp-phone-verify-resend{
  height:42px !important;
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 68%,#fff), var(--cclsp-primary)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--cclsp-primary) 18%,transparent) !important;
}

/* Resend countdown */
.cclsp-phone-verify-resend,
#cclspPhoneRestoreSend{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
}
.cclsp-resend-timer{
  display:none;
  min-width:54px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  color:inherit;
  align-items:center;
  justify-content:center;
  font-size:10.5px;
  font-weight:950;
  direction:rtl;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  animation:cclspTimerPulse 1.2s ease-in-out infinite;
}
.cclsp-counting .cclsp-resend-timer{
  display:inline-flex;
}
.cclsp-counting .cclsp-resend-text{
  opacity:.78;
}

/* More beautiful OTP area */
.cclsp-phone-verify.cclsp-code-sent{
  background:
    radial-gradient(circle at top left, color-mix(in srgb,var(--cclsp-primary) 12%,transparent), transparent 42%),
    rgba(255,255,255,.76) !important;
}
.cclsp-phone-verify.cclsp-code-sent .cclsp-phone-verify-head span::after{
  content:" کد تا ۱ دقیقه دیگر قابل ارسال مجدد است.";
  color:#9a3412;
  font-weight:900;
}

@keyframes cclspTimerPulse{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(.96); opacity:.78;}
}

@media (max-width:768px){
  .cclsp-resume-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .cclsp-resume-actions button{
    width:100%;
  }
}

@media (prefers-color-scheme:dark){
  .cclsp-resume-actions{
    background:rgba(255,122,26,.12);
    border-color:rgba(255,122,26,.18);
  }
  .cclsp-resume-actions strong{
    color:#fed7aa;
  }
  .cclsp-resume-actions span{
    color:#fdba74;
  }
  .cclsp-phone-verify.cclsp-code-sent{
    background:rgba(255,255,255,.08) !important;
  }
}


/* v2.6.1 Hide identity fields after chat entry
   Name, phone, department/topic, and verification are only for the entry step.
   After a previous chat is loaded or a new chat starts, user sees only chat + composer.
*/
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-contact-grid,
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-phone-verify,
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-department-field,
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-subject-field{
  display:none !important;
}

/* Give more room to messages once entry fields are hidden. */
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-chat{
  min-height:220px !important;
}

@media (min-width:769px){
  .cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-chat{
    min-height:280px !important;
  }
}

@media (max-width:768px){
  .cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-chat{
    min-height:180px !important;
  }
}

/* Keep guest entry step clean: show only name/mobile + verification until confirmed. */
.cclsp-phone-locked .cclsp-contact-grid,
.cclsp-phone-locked .cclsp-phone-verify{
  display:grid !important;
}

.cclsp-phone-locked .cclsp-department-field,
.cclsp-phone-locked .cclsp-subject-field{
  display:none !important;
}


/* v2.6.2 OTP countdown timer fix */
.cclsp-phone-verify-resend,
#cclspPhoneRestoreSend{
  position:relative !important;
  overflow:hidden !important;
}

.cclsp-phone-verify-resend.cclsp-counting,
#cclspPhoneRestoreSend.cclsp-counting{
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 72%,#fff), var(--cclsp-primary)) !important;
  color:#fff !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}

.cclsp-phone-verify-resend.cclsp-counting::before,
#cclspPhoneRestoreSend.cclsp-counting::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(100%);
  animation:cclspOtpShimmer 1.6s ease-in-out infinite;
  pointer-events:none;
}

.cclsp-phone-verify-resend .cclsp-resend-timer,
#cclspPhoneRestoreSend .cclsp-resend-timer{
  display:none;
  min-width:60px;
  height:25px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  color:inherit;
  align-items:center;
  justify-content:center;
  font-size:10.5px;
  font-weight:950;
  direction:rtl;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  animation:cclspTimerPulse 1.2s ease-in-out infinite;
}

.cclsp-phone-verify-resend.cclsp-counting .cclsp-resend-timer,
#cclspPhoneRestoreSend.cclsp-counting .cclsp-resend-timer{
  display:inline-flex !important;
}

.cclsp-phone-verify-resend.cclsp-counting .cclsp-resend-text,
#cclspPhoneRestoreSend.cclsp-counting .cclsp-resend-text{
  opacity:.95;
  position:relative;
  z-index:2;
}

.cclsp-phone-verify-resend.cclsp-counting .cclsp-resend-timer,
#cclspPhoneRestoreSend.cclsp-counting .cclsp-resend-timer{
  position:relative;
  z-index:2;
}

@keyframes cclspOtpShimmer{
  0%{transform:translateX(110%);}
  100%{transform:translateX(-110%);}
}


/* v2.6.4 safety: logged-in restored chats should not visually show phone gate */
.cclsp-widget.cclsp-user-logged-in .cclsp-phone-locked .cclsp-contact-grid,
.cclsp-widget.cclsp-user-logged-in .cclsp-phone-locked .cclsp-phone-verify{
  display:none !important;
}


/* v2.6.5 Force OTP countdown visibility */
.cclsp-countdown-visible{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  position:relative !important;
  overflow:hidden !important;
}

.cclsp-countdown-visible .cclsp-resend-text{
  display:inline-flex !important;
  position:relative !important;
  z-index:3 !important;
  white-space:nowrap !important;
}

.cclsp-countdown-visible .cclsp-resend-timer{
  display:inline-flex !important;
  min-width:64px !important;
  height:25px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.24) !important;
  color:inherit !important;
  font-size:10.5px !important;
  font-weight:950 !important;
  line-height:1 !important;
  position:relative !important;
  z-index:3 !important;
  direction:rtl !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.cclsp-countdown-visible::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent) !important;
  transform:translateX(100%) !important;
  animation:cclspOtpShimmer 1.7s ease-in-out infinite !important;
  pointer-events:none !important;
  z-index:1 !important;
}

@keyframes cclspOtpShimmer{
  0%{transform:translateX(110%);}
  100%{transform:translateX(-110%);}
}


/* v2.6.7 Universal button loading + direct OTP countdown */
.cclsp-widget button{
  position:relative;
}

.cclsp-loading,
.cclsp-tap-loading{
  cursor:progress !important;
}

.cclsp-loading{
  pointer-events:none;
  opacity:.92;
}

.cclsp-btn-spinner{
  width:14px;
  height:14px;
  min-width:14px;
  border-radius:999px;
  border:2px solid currentColor;
  border-left-color:transparent;
  display:inline-block;
  vertical-align:middle;
  animation:cclspBtnSpin .72s linear infinite;
}

.cclsp-btn-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
}

.cclsp-loading,
.cclsp-countdown-visible{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
}

.cclsp-tap-loading::after{
  content:"";
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid currentColor;
  border-left-color:transparent;
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  animation:cclspBtnSpin .72s linear infinite;
  opacity:.75;
}

.cclsp-countdown-visible{
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 72%,#fff), var(--cclsp-primary)) !important;
  color:#fff !important;
  min-width:128px !important;
  overflow:hidden !important;
  isolation:isolate;
}

.cclsp-countdown-visible::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform:translateX(110%);
  animation:cclspOtpShimmer 1.65s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}

.cclsp-countdown-visible .cclsp-btn-spinner,
.cclsp-countdown-visible .cclsp-btn-label{
  position:relative;
  z-index:2;
}

@keyframes cclspBtnSpin{
  to{ transform:rotate(360deg); }
}

@keyframes cclspOtpShimmer{
  0%{transform:translateX(110%);}
  100%{transform:translateX(-110%);}
}

/* Make small quick buttons not visually break with loader */
.cclsp-brand-link.cclsp-loading,
.cclsp-brand-link.cclsp-tap-loading{
  pointer-events:none;
}


/* v2.6.8 Polished button loading + message meta capsules */

/* Better, smoother loading state for all main buttons */
.cclsp-loading,
.cclsp-tap-loading{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    filter .18s ease !important;
}

.cclsp-loading{
  transform:translateY(-1px) !important;
  opacity:1 !important;
  filter:saturate(1.04) !important;
  box-shadow:0 14px 30px color-mix(in srgb,var(--cclsp-primary) 23%,transparent) !important;
}

.cclsp-loading::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent) !important;
  transform:translateX(100%) !important;
  animation:cclspLoadingSweep 1.25s cubic-bezier(.4,0,.2,1) infinite !important;
  pointer-events:none !important;
  z-index:1 !important;
}

.cclsp-btn-spinner{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  border:none !important;
  border-radius:999px !important;
  background:
    conic-gradient(from 0deg, currentColor 0 74%, rgba(255,255,255,.22) 74% 100%) !important;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  display:inline-block !important;
  animation:cclspBtnSpin .68s linear infinite !important;
  opacity:.96 !important;
  position:relative !important;
  z-index:3 !important;
}

.cclsp-btn-label{
  position:relative !important;
  z-index:3 !important;
  letter-spacing:-.1px !important;
}

.cclsp-tap-loading::after{
  width:15px !important;
  height:15px !important;
  border:none !important;
  border-radius:999px !important;
  background:conic-gradient(from 0deg, currentColor 0 72%, transparent 72% 100%) !important;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  animation:cclspBtnSpin .68s linear infinite !important;
  opacity:.75 !important;
}

.cclsp-countdown-visible{
  min-width:152px !important;
  padding-inline:13px !important;
}

@keyframes cclspLoadingSweep{
  0%{transform:translateX(110%); opacity:.1;}
  38%{opacity:1;}
  100%{transform:translateX(-110%); opacity:.15;}
}

/* Message body structure */
.cclsp-msg-text{
  display:block;
  line-height:1.85;
}

/* Old time line fallback */
.cclsp-msg-time{
  display:none !important;
}

/* New capsules for message time/status */
.cclsp-msg-meta{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:wrap !important;
  margin-top:7px !important;
  opacity:1 !important;
}

.cclsp-msg-chip{
  min-height:21px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  font-size:9.4px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.1px !important;
  white-space:nowrap !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

.cclsp-msg-admin .cclsp-msg-chip{
  color:#64748b !important;
  background:rgba(15,23,42,.045) !important;
  border:1px solid rgba(15,23,42,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.cclsp-msg-user .cclsp-msg-chip{
  color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.cclsp-msg-chip-status::before{
  content:"✓";
  width:13px;
  height:13px;
  min-width:13px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:950;
}

.cclsp-msg-admin .cclsp-msg-chip-status::before{
  background:rgba(34,197,94,.13);
  color:#16a34a;
}

.cclsp-msg-user .cclsp-msg-chip-status::before{
  background:rgba(255,255,255,.20);
  color:#fff;
}

/* Make admin/source name more premium */
.cclsp-msg-admin > strong{
  color:#475569 !important;
}

.cclsp-msg-user > strong{
  color:rgba(255,255,255,.96) !important;
}

@media (prefers-color-scheme:dark){
  .cclsp-msg-admin .cclsp-msg-chip{
    color:#cbd5e1 !important;
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.11) !important;
  }
}


/* v2.6.9 Put action/status capsules below composer */
.cclsp-view-chat .cclsp-composer-shell{
  order:7 !important;
}

.cclsp-view-chat .cclsp-resume-actions{
  order:8 !important;
  margin:7px 0 0 !important;
}

.cclsp-view-chat .cclsp-online-state{
  order:9 !important;
  margin-top:7px !important;
}

.cclsp-view-chat .cclsp-result{
  order:10 !important;
  margin-top:7px !important;
}

/* Make the two lower capsules feel intentional and compact */
.cclsp-view-chat .cclsp-resume-actions{
  min-height:50px !important;
  border-radius:20px !important;
  padding:9px 10px !important;
}

.cclsp-view-chat .cclsp-online-state{
  min-height:40px !important;
  border-radius:18px !important;
  padding:9px 12px !important;
  line-height:1.7 !important;
  box-shadow:0 8px 22px rgba(255,122,26,.06), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* The typing area should visually come first */
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-form{
  gap:7px !important;
}

@media (max-width:768px){
  .cclsp-view-chat .cclsp-resume-actions,
  .cclsp-view-chat .cclsp-online-state{
    margin-top:6px !important;
  }
}


/* v2.7.0 Unified support online/offline state */
.cclsp-head-text small{
  transition:color .2s ease, opacity .2s ease !important;
}

.cclsp-head-text small i,
#cclspHeaderStatusDot{
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.cclsp-support-online #cclspHeaderStatusText{
  color:#16a34a !important;
}

.cclsp-support-online #cclspHeaderStatusDot,
#cclspHeaderStatusDot.cclsp-is-online{
  background:#22c55e !important;
  box-shadow:0 0 0 4px rgba(34,197,94,.12), 0 0 14px rgba(34,197,94,.34) !important;
}

.cclsp-support-offline #cclspHeaderStatusText{
  color:#ef4444 !important;
}

.cclsp-support-offline #cclspHeaderStatusDot,
#cclspHeaderStatusDot.cclsp-is-offline{
  background:#ef4444 !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.12), 0 0 14px rgba(239,68,68,.30) !important;
}

/* When offline, make lower capsule and header talk the same visual language. */
.cclsp-support-offline .cclsp-online-state{
  color:#b42318 !important;
  background:linear-gradient(135deg, rgba(255,237,232,.96), rgba(255,247,237,.82)) !important;
  border:1px solid rgba(255,122,26,.18) !important;
}

.cclsp-support-online .cclsp-online-state{
  color:#166534 !important;
  background:linear-gradient(135deg, rgba(236,253,245,.96), rgba(240,253,244,.82)) !important;
  border:1px solid rgba(34,197,94,.18) !important;
}

@media (prefers-color-scheme:dark){
  .cclsp-support-offline .cclsp-online-state{
    color:#fecaca !important;
    background:rgba(239,68,68,.10) !important;
    border-color:rgba(239,68,68,.18) !important;
  }
  .cclsp-support-online .cclsp-online-state{
    color:#bbf7d0 !important;
    background:rgba(34,197,94,.10) !important;
    border-color:rgba(34,197,94,.18) !important;
  }
}


/* v2.7.1 Auto-dismiss timed capsules */
.cclsp-timed-capsule{
  position:relative !important;
  overflow:hidden !important;
  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    max-height .32s cubic-bezier(.2,.8,.2,1),
    margin .32s ease,
    padding .32s ease !important;
}

.cclsp-capsule-progress{
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  height:3px !important;
  width:100% !important;
  border-radius:999px !important;
  transform-origin:right center !important;
  pointer-events:none !important;
  z-index:5 !important;
  background:linear-gradient(90deg, rgba(255,255,255,.20), currentColor) !important;
  opacity:.55 !important;
}

.cclsp-resume-actions .cclsp-capsule-progress{
  color:#f97316 !important;
}

.cclsp-online-state .cclsp-capsule-progress{
  color:#ef4444 !important;
}

.cclsp-support-online .cclsp-online-state .cclsp-capsule-progress{
  color:#22c55e !important;
}

.cclsp-result .cclsp-capsule-progress{
  color:#22c55e !important;
}

.cclsp-result.error .cclsp-capsule-progress{
  color:#ef4444 !important;
}

@keyframes cclspCapsuleCountdown{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(0); }
}

.cclsp-is-dismissing{
  opacity:0 !important;
  transform:translateY(8px) scale(.985) !important;
  max-height:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-width:0 !important;
  pointer-events:none !important;
}

.cclsp-auto-hidden{
  display:none !important;
}

/* After timed capsules disappear, let the typing/chat area breathe and keep the conversation visually lower. */
.cclsp-view-chat .cclsp-form{
  transition:gap .25s ease !important;
}

.cclsp-view-chat .cclsp-chat{
  scroll-behavior:smooth !important;
}


/* v2.7.2 Crash fix: contain capsule animations and status checks */
.cclsp-timed-capsule{
  contain:layout paint !important;
  will-change:transform, opacity, max-height !important;
}

.cclsp-capsule-progress{
  will-change:transform !important;
}

@media (prefers-reduced-motion: reduce){
  .cclsp-capsule-progress,
  .cclsp-loading::after,
  .cclsp-countdown-visible::before{
    animation:none !important;
  }
}


/* v2.7.3 prettier capsule countdown + fixed result capsule close */
.cclsp-timed-capsule{
  padding-bottom:14px !important;
}

.cclsp-capsule-progress{
  right:12px !important;
  left:12px !important;
  bottom:7px !important;
  width:auto !important;
  height:4px !important;
  border-radius:999px !important;
  transform-origin:right center !important;
  background:transparent !important;
  opacity:1 !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

.cclsp-capsule-progress::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(15,23,42,.055);
}

.cclsp-capsule-progress::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb,currentColor 42%,transparent), currentColor);
  box-shadow:0 0 10px color-mix(in srgb,currentColor 28%,transparent);
  transform-origin:right center;
  animation:cclspCapsuleCountdown var(--cclsp-capsule-duration) linear forwards;
}

/* Stop animating the wrapper itself; animate the inner glow bar instead. */
.cclsp-capsule-progress{
  animation:none !important;
}

.cclsp-resume-actions .cclsp-capsule-progress{
  color:#f97316 !important;
}

.cclsp-online-state .cclsp-capsule-progress{
  color:#ef4444 !important;
}

.cclsp-support-online .cclsp-online-state .cclsp-capsule-progress{
  color:#22c55e !important;
}

.cclsp-result .cclsp-capsule-progress{
  color:#22c55e !important;
}

.cclsp-result.cclsp-error .cclsp-capsule-progress,
.cclsp-result.error .cclsp-capsule-progress{
  color:#ef4444 !important;
}

/* Result capsule should collapse cleanly too */
.cclsp-result.cclsp-timed-capsule{
  position:relative !important;
  overflow:hidden !important;
}

@keyframes cclspCapsuleCountdown{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(0); }
}

@media (prefers-color-scheme:dark){
  .cclsp-capsule-progress::before{
    background:rgba(255,255,255,.08);
  }
}


/* v2.7.4 Premium blur backdrop when chat opens */
.cclsp-widget.cclsp-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:999990;
  pointer-events:none;
  opacity:1;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 16%,transparent), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter:blur(10px) saturate(1.10);
  -webkit-backdrop-filter:blur(10px) saturate(1.10);
  animation:cclspBackdropIn .24s ease both;
}

.cclsp-widget.cclsp-open .cclsp-window,
.cclsp-widget.cclsp-open .cclsp-toggle{
  z-index:1000000 !important;
}

.cclsp-widget.cclsp-open .cclsp-panel{
  box-shadow:
    0 28px 80px rgba(15,23,42,.18),
    0 10px 34px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

@keyframes cclspBackdropIn{
  from{
    opacity:0;
    backdrop-filter:blur(0) saturate(1);
    -webkit-backdrop-filter:blur(0) saturate(1);
  }
  to{
    opacity:1;
    backdrop-filter:blur(10px) saturate(1.10);
    -webkit-backdrop-filter:blur(10px) saturate(1.10);
  }
}

@media (max-width:768px){
  .cclsp-widget.cclsp-open::before{
    background:
      radial-gradient(circle at 50% 12%, color-mix(in srgb,var(--cclsp-primary) 14%,transparent), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    backdrop-filter:blur(8px) saturate(1.06);
    -webkit-backdrop-filter:blur(8px) saturate(1.06);
  }
}

@media (prefers-color-scheme:dark){
  .cclsp-widget.cclsp-open::before{
    background:
      radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 14%,transparent), transparent 34%),
      radial-gradient(circle at 82% 28%, rgba(59,130,246,.10), transparent 36%),
      linear-gradient(180deg, rgba(2,6,23,.38), rgba(2,6,23,.22));
    backdrop-filter:blur(11px) saturate(1.12);
    -webkit-backdrop-filter:blur(11px) saturate(1.12);
  }
}

@media (prefers-reduced-motion: reduce){
  .cclsp-widget.cclsp-open::before{
    animation:none !important;
  }
}


/* v2.7.5 Capsule close button + customizable timing UI */
.cclsp-timed-capsule{
  padding-top:12px !important;
  padding-left:42px !important;
}

.cclsp-capsule-close{
  position:absolute !important;
  top:8px !important;
  left:9px !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border:none !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:10 !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:950 !important;
  line-height:1 !important;
  color:currentColor !important;
  background:rgba(255,255,255,.64) !important;
  box-shadow:0 6px 14px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.70) !important;
  transition:transform .18s ease, background .18s ease, opacity .18s ease !important;
}

.cclsp-capsule-close:hover{
  transform:scale(1.06) !important;
  background:rgba(255,255,255,.88) !important;
}

.cclsp-capsule-progress{
  right:12px !important;
  left:42px !important;
  bottom:7px !important;
  width:auto !important;
  height:4px !important;
  border-radius:999px !important;
  transform-origin:right center !important;
  background:rgba(15,23,42,.055) !important;
  opacity:1 !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

.cclsp-capsule-progress::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in srgb,currentColor 36%,transparent), currentColor);
  box-shadow:0 0 12px color-mix(in srgb,currentColor 25%,transparent);
  transform-origin:right center;
  animation:cclspCapsuleCountdown var(--cclsp-capsule-duration) linear forwards;
}

.cclsp-capsule-progress{
  animation:none !important;
}

.cclsp-resume-actions .cclsp-capsule-progress,
.cclsp-resume-actions .cclsp-capsule-close{
  color:#f97316 !important;
}

.cclsp-online-state .cclsp-capsule-progress,
.cclsp-online-state .cclsp-capsule-close{
  color:#ef4444 !important;
}

.cclsp-support-online .cclsp-online-state .cclsp-capsule-progress,
.cclsp-support-online .cclsp-online-state .cclsp-capsule-close{
  color:#22c55e !important;
}

.cclsp-result .cclsp-capsule-progress,
.cclsp-result .cclsp-capsule-close{
  color:#22c55e !important;
}

.cclsp-result.cclsp-error .cclsp-capsule-progress,
.cclsp-result.cclsp-error .cclsp-capsule-close,
.cclsp-result.error .cclsp-capsule-progress,
.cclsp-result.error .cclsp-capsule-close{
  color:#ef4444 !important;
}

/* Voice/file preview remove button hard-fix */
.cclsp-preview-clear,
.cclsp-attach-preview button[data-clear],
.cclsp-preview-line button[data-clear]{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  border:none !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:50 !important;
  font-weight:950 !important;
  color:#ef4444 !important;
  background:rgba(239,68,68,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.cclsp-preview-clear:hover,
.cclsp-attach-preview button[data-clear]:hover{
  background:rgba(239,68,68,.16) !important;
}

@media (prefers-color-scheme:dark){
  .cclsp-capsule-close{
    background:rgba(255,255,255,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .cclsp-capsule-progress{
    background:rgba(255,255,255,.09) !important;
  }
}


/* v2.7.6 Site background based light/dark theme detection
   The widget now follows the actual website background, not OS/browser color preference.
*/

.cclsp-widget.cclsp-site-light{
  --cclsp-surface:rgba(255,255,255,.82);
  --cclsp-surface-strong:rgba(255,255,255,.94);
  --cclsp-text:#111827;
  --cclsp-muted:#64748b;
  --cclsp-border:rgba(15,23,42,.08);
  --cclsp-glass-shadow:0 24px 70px rgba(15,23,42,.14);
}

.cclsp-widget.cclsp-site-dark{
  --cclsp-surface:rgba(15,23,42,.78);
  --cclsp-surface-strong:rgba(15,23,42,.92);
  --cclsp-text:#f8fafc;
  --cclsp-muted:#cbd5e1;
  --cclsp-border:rgba(255,255,255,.12);
  --cclsp-glass-shadow:0 28px 80px rgba(0,0,0,.34);
}

/* Apply detected theme to the visible widget surfaces */
.cclsp-site-light .cclsp-panel,
.cclsp-site-light .cclsp-header,
.cclsp-site-light .cclsp-simple-hero-icon,
.cclsp-site-light .cclsp-simple-action,
.cclsp-site-light .cclsp-composer-shell,
.cclsp-site-light .cclsp-phone-verify,
.cclsp-site-light .cclsp-ticket-restore-box,
.cclsp-site-light .cclsp-chat{
  background:var(--cclsp-surface) !important;
  color:var(--cclsp-text) !important;
  border-color:var(--cclsp-border) !important;
}

.cclsp-site-dark .cclsp-panel,
.cclsp-site-dark .cclsp-header,
.cclsp-site-dark .cclsp-simple-hero-icon,
.cclsp-site-dark .cclsp-simple-action,
.cclsp-site-dark .cclsp-composer-shell,
.cclsp-site-dark .cclsp-phone-verify,
.cclsp-site-dark .cclsp-ticket-restore-box,
.cclsp-site-dark .cclsp-chat{
  background:var(--cclsp-surface) !important;
  color:var(--cclsp-text) !important;
  border-color:var(--cclsp-border) !important;
  box-shadow:var(--cclsp-glass-shadow), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cclsp-site-light .cclsp-head-text strong,
.cclsp-site-light .cclsp-simple-hero strong,
.cclsp-site-light .cclsp-simple-action b,
.cclsp-site-light .cclsp-field label,
.cclsp-site-light .cclsp-msg-admin > strong{
  color:#111827 !important;
}

.cclsp-site-dark .cclsp-head-text strong,
.cclsp-site-dark .cclsp-simple-hero strong,
.cclsp-site-dark .cclsp-simple-action b,
.cclsp-site-dark .cclsp-field label,
.cclsp-site-dark .cclsp-msg-admin > strong{
  color:#f8fafc !important;
}

.cclsp-site-light .cclsp-simple-hero span,
.cclsp-site-light .cclsp-simple-action small,
.cclsp-site-light .cclsp-phone-verify-head span,
.cclsp-site-light .cclsp-msg-admin .cclsp-msg-chip{
  color:#64748b !important;
}

.cclsp-site-dark .cclsp-simple-hero span,
.cclsp-site-dark .cclsp-simple-action small,
.cclsp-site-dark .cclsp-phone-verify-head span,
.cclsp-site-dark .cclsp-msg-admin .cclsp-msg-chip{
  color:#cbd5e1 !important;
}

/* Inputs follow detected site theme */
.cclsp-site-light .cclsp-field input,
.cclsp-site-light .cclsp-department-field select,
.cclsp-site-light .cclsp-composer-shell textarea,
.cclsp-site-light #cclspPhoneVerifyCode,
.cclsp-site-light #cclspPhoneRestoreCode,
.cclsp-site-light #cclspPhoneRestoreInput{
  background:rgba(255,255,255,.86) !important;
  color:#111827 !important;
  border-color:rgba(15,23,42,.08) !important;
}

.cclsp-site-dark .cclsp-field input,
.cclsp-site-dark .cclsp-department-field select,
.cclsp-site-dark .cclsp-composer-shell textarea,
.cclsp-site-dark #cclspPhoneVerifyCode,
.cclsp-site-dark #cclspPhoneRestoreCode,
.cclsp-site-dark #cclspPhoneRestoreInput{
  background:rgba(255,255,255,.08) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.12) !important;
}

.cclsp-site-dark .cclsp-field input::placeholder,
.cclsp-site-dark .cclsp-composer-shell textarea::placeholder{
  color:rgba(203,213,225,.72) !important;
}

/* Admin/support messages */
.cclsp-site-light .cclsp-msg-admin{
  background:rgba(255,255,255,.86) !important;
  color:#111827 !important;
}

.cclsp-site-dark .cclsp-msg-admin{
  background:rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Capsules and progress bar */
.cclsp-site-light .cclsp-resume-actions{
  background:linear-gradient(135deg, rgba(255,122,26,.10), rgba(255,255,255,.82)) !important;
}

.cclsp-site-dark .cclsp-resume-actions{
  background:linear-gradient(135deg, rgba(255,122,26,.16), rgba(255,255,255,.07)) !important;
  border-color:rgba(255,122,26,.18) !important;
}

.cclsp-site-dark .cclsp-capsule-close{
  background:rgba(255,255,255,.12) !important;
  color:currentColor !important;
}

.cclsp-site-dark .cclsp-capsule-progress{
  background:rgba(255,255,255,.10) !important;
}

.cclsp-site-light .cclsp-capsule-progress{
  background:rgba(15,23,42,.055) !important;
}

/* Blur backdrop follows detected site theme */
.cclsp-site-light.cclsp-open::before{
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 16%,transparent), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
  backdrop-filter:blur(10px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.10) !important;
}

.cclsp-site-dark.cclsp-open::before{
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 14%,transparent), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,.10), transparent 36%),
    linear-gradient(180deg, rgba(2,6,23,.42), rgba(2,6,23,.24)) !important;
  backdrop-filter:blur(11px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(11px) saturate(1.12) !important;
}

/* Quick action cards */
.cclsp-site-dark .cclsp-simple-action:not(.cclsp-simple-action-primary){
  background:rgba(255,255,255,.08) !important;
}

.cclsp-site-light .cclsp-simple-action:not(.cclsp-simple-action-primary){
  background:rgba(255,255,255,.76) !important;
}

/* Tool buttons */
.cclsp-site-dark .cclsp-tool-btn,
.cclsp-site-dark .cclsp-header-back,
.cclsp-site-dark .cclsp-header-close{
  background:rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.10) !important;
}

.cclsp-site-light .cclsp-tool-btn,
.cclsp-site-light .cclsp-header-back{
  background:rgba(15,23,42,.06) !important;
  color:#334155 !important;
}

/* In dark site backgrounds, keep footer/composer readable */
.cclsp-site-dark .cclsp-preview-line,
.cclsp-site-dark .cclsp-attach-preview{
  background:rgba(255,255,255,.08) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.10) !important;
}


/* v2.8.0 Hard class-based theme + user theme switch
   This block is intentionally at the end to override older prefers-color-scheme rules.
*/

/* Header theme switch */
.cclsp-theme-switch{
  position:absolute !important;
  top:50% !important;
  right:92px !important;
  transform:translateY(-50%) !important;
  width:36px !important;
  height:36px !important;
  border:none !important;
  border-radius:14px !important;
  cursor:pointer !important;
  font-family:inherit !important;
  font-weight:950 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 10px 22px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.70) !important;
  background:rgba(15,23,42,.06) !important;
  color:#334155 !important;
  z-index:3 !important;
  transition:transform .18s ease, background .18s ease, color .18s ease !important;
}
.cclsp-theme-switch:hover{
  transform:translateY(-50%) scale(1.04) !important;
}
.cclsp-theme-switch-icon{
  font-size:17px !important;
  line-height:1 !important;
}
.cclsp-theme-switch-dark{
  background:rgba(255,255,255,.10) !important;
  color:#facc15 !important;
}
.cclsp-theme-switch-light{
  background:rgba(15,23,42,.06) !important;
  color:#334155 !important;
}

/* Move header padding to fit close/back/theme buttons */
.cclsp-header{
  padding-right:136px !important;
}
@media (max-width:768px){
  .cclsp-theme-switch{
    right:84px !important;
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
  }
  .cclsp-header{
    padding-right:126px !important;
  }
}

/* Class-based theme variables */
.cclsp-widget.cclsp-site-light{
  --cclsp-ui-bg:rgba(255,255,255,.88);
  --cclsp-ui-bg-2:rgba(255,255,255,.74);
  --cclsp-ui-text:#111827;
  --cclsp-ui-muted:#64748b;
  --cclsp-ui-border:rgba(15,23,42,.08);
  --cclsp-ui-input:rgba(255,255,255,.88);
  --cclsp-ui-shadow:0 26px 80px rgba(15,23,42,.14);
}

.cclsp-widget.cclsp-site-dark{
  --cclsp-ui-bg:rgba(17,24,39,.90);
  --cclsp-ui-bg-2:rgba(30,41,59,.84);
  --cclsp-ui-text:#f8fafc;
  --cclsp-ui-muted:#cbd5e1;
  --cclsp-ui-border:rgba(255,255,255,.13);
  --cclsp-ui-input:rgba(15,23,42,.72);
  --cclsp-ui-shadow:0 28px 84px rgba(0,0,0,.42);
}

/* Main surfaces */
.cclsp-site-light .cclsp-panel,
.cclsp-site-light .cclsp-header,
.cclsp-site-light .cclsp-chat,
.cclsp-site-light .cclsp-composer-shell,
.cclsp-site-light .cclsp-simple-action:not(.cclsp-simple-action-primary),
.cclsp-site-light .cclsp-phone-verify,
.cclsp-site-light .cclsp-ticket-restore-box{
  background:var(--cclsp-ui-bg) !important;
  color:var(--cclsp-ui-text) !important;
  border-color:var(--cclsp-ui-border) !important;
}

.cclsp-site-dark .cclsp-panel,
.cclsp-site-dark .cclsp-header,
.cclsp-site-dark .cclsp-chat,
.cclsp-site-dark .cclsp-composer-shell,
.cclsp-site-dark .cclsp-simple-action:not(.cclsp-simple-action-primary),
.cclsp-site-dark .cclsp-phone-verify,
.cclsp-site-dark .cclsp-ticket-restore-box{
  background:var(--cclsp-ui-bg) !important;
  color:var(--cclsp-ui-text) !important;
  border-color:var(--cclsp-ui-border) !important;
  box-shadow:var(--cclsp-ui-shadow), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cclsp-site-light .cclsp-head-text strong,
.cclsp-site-light .cclsp-msg-admin > strong,
.cclsp-site-light .cclsp-simple-action b{
  color:#111827 !important;
}
.cclsp-site-dark .cclsp-head-text strong,
.cclsp-site-dark .cclsp-msg-admin > strong,
.cclsp-site-dark .cclsp-simple-action b{
  color:#f8fafc !important;
}

.cclsp-site-light .cclsp-simple-action small,
.cclsp-site-light .cclsp-msg-chip,
.cclsp-site-light .cclsp-field label{
  color:#64748b !important;
}
.cclsp-site-dark .cclsp-simple-action small,
.cclsp-site-dark .cclsp-msg-chip,
.cclsp-site-dark .cclsp-field label{
  color:#cbd5e1 !important;
}

/* Inputs */
.cclsp-site-light .cclsp-field input,
.cclsp-site-light .cclsp-department-field select,
.cclsp-site-light .cclsp-composer-shell textarea,
.cclsp-site-light #cclspPhoneVerifyCode,
.cclsp-site-light #cclspPhoneRestoreCode,
.cclsp-site-light #cclspPhoneRestoreInput{
  background:var(--cclsp-ui-input) !important;
  color:#111827 !important;
  border-color:rgba(15,23,42,.08) !important;
}

.cclsp-site-dark .cclsp-field input,
.cclsp-site-dark .cclsp-department-field select,
.cclsp-site-dark .cclsp-composer-shell textarea,
.cclsp-site-dark #cclspPhoneVerifyCode,
.cclsp-site-dark #cclspPhoneRestoreCode,
.cclsp-site-dark #cclspPhoneRestoreInput{
  background:var(--cclsp-ui-input) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.13) !important;
}
.cclsp-site-dark .cclsp-composer-shell textarea::placeholder{
  color:#cbd5e1 !important;
}

/* Readable dark capsules */
.cclsp-site-dark .cclsp-resume-actions{
  background:linear-gradient(135deg, rgba(124,45,18,.92), rgba(67,56,202,.20)) !important;
  border:1px solid rgba(251,146,60,.28) !important;
  color:#ffedd5 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cclsp-site-dark .cclsp-resume-actions strong,
.cclsp-site-dark .cclsp-resume-actions span{
  color:#ffedd5 !important;
}

.cclsp-site-dark .cclsp-online-state{
  background:linear-gradient(135deg, rgba(127,29,29,.94), rgba(76,29,149,.22)) !important;
  border:1px solid rgba(248,113,113,.30) !important;
  color:#fee2e2 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cclsp-site-dark.cclsp-support-online .cclsp-online-state{
  background:linear-gradient(135deg, rgba(20,83,45,.94), rgba(21,94,117,.22)) !important;
  border-color:rgba(74,222,128,.30) !important;
  color:#dcfce7 !important;
}

.cclsp-site-dark .cclsp-result.cclsp-success,
.cclsp-site-dark .cclsp-result.success{
  background:linear-gradient(135deg, rgba(20,83,45,.94), rgba(21,94,117,.22)) !important;
  border:1px solid rgba(74,222,128,.30) !important;
  color:#dcfce7 !important;
}
.cclsp-site-dark .cclsp-result.cclsp-error,
.cclsp-site-dark .cclsp-result.error{
  background:linear-gradient(135deg, rgba(127,29,29,.94), rgba(76,29,149,.22)) !important;
  border:1px solid rgba(248,113,113,.30) !important;
  color:#fee2e2 !important;
}

.cclsp-site-dark .cclsp-capsule-close{
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
}
.cclsp-site-dark .cclsp-capsule-progress{
  background:rgba(255,255,255,.13) !important;
}
.cclsp-site-dark .cclsp-capsule-progress::after{
  filter:saturate(1.3) brightness(1.18) !important;
}

/* Message bubbles */
.cclsp-site-dark .cclsp-msg-admin{
  background:rgba(255,255,255,.09) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.10) !important;
}
.cclsp-site-light .cclsp-msg-admin{
  background:rgba(255,255,255,.86) !important;
  color:#111827 !important;
}

/* Backdrop */
.cclsp-site-light.cclsp-open::before{
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 16%,transparent), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
}
.cclsp-site-dark.cclsp-open::before{
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 14%,transparent), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,.10), transparent 36%),
    linear-gradient(180deg, rgba(2,6,23,.48), rgba(2,6,23,.28)) !important;
}

/* Force older prefers-color-scheme blocks to lose against detected/manual classes */
.cclsp-site-light *{
  color-scheme:light;
}
.cclsp-site-dark *{
  color-scheme:dark;
}


/* v2.8.1 Header action buttons alignment fix */
.cclsp-header{
  padding-right:148px !important;
  min-height:68px !important;
}

.cclsp-header-close,
.cclsp-header-back,
.cclsp-theme-switch{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;
  text-align:center !important;
  line-height:1 !important;
  border-radius:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  box-sizing:border-box !important;
}

.cclsp-header-close{
  right:12px !important;
  font-size:20px !important;
}

.cclsp-header-back{
  right:56px !important;
  font-size:20px !important;
}

.cclsp-theme-switch{
  right:100px !important;
}

.cclsp-theme-switch-icon{
  display:block !important;
  width:18px !important;
  height:18px !important;
  line-height:18px !important;
  text-align:center !important;
  font-size:17px !important;
  transform:translateY(-.5px) !important;
}

.cclsp-header-back{
  font-family:inherit !important;
}
.cclsp-header-back::before{
  content:"›";
  display:block;
  font-size:23px;
  line-height:1;
  transform:translateY(-1px);
}
.cclsp-header-back{
  color:transparent !important;
}
.cclsp-header-back > *{
  display:none !important;
}

.cclsp-header-close::before{
  content:"×";
  display:block;
  font-size:20px;
  line-height:1;
  transform:translateY(-1px);
}
.cclsp-header-close{
  color:transparent !important;
}
.cclsp-header-close > *{
  display:none !important;
}

/* Keep hover motion without knocking icons off center */
.cclsp-header-close:hover,
.cclsp-header-back:hover,
.cclsp-theme-switch:hover{
  transform:translateY(-50%) scale(1.04) !important;
}

@media (max-width:768px){
  .cclsp-header{
    padding-right:140px !important;
    min-height:66px !important;
  }

  .cclsp-header-close,
  .cclsp-header-back,
  .cclsp-theme-switch{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    border-radius:13px !important;
  }

  .cclsp-header-close{ right:10px !important; }
  .cclsp-header-back{ right:52px !important; }
  .cclsp-theme-switch{ right:94px !important; }

  .cclsp-header-back::before{ font-size:22px !important; }
  .cclsp-header-close::before{ font-size:19px !important; }
  .cclsp-theme-switch-icon{
    width:17px !important;
    height:17px !important;
    line-height:17px !important;
    font-size:16px !important;
  }
}


/* v2.8.2 Header buttons hard reset + invisible scrollbars */

/* Kill the pseudo-icon hack from v2.8.1 completely */
.cclsp-header-close::before,
.cclsp-header-back::before{
  content:none !important;
  display:none !important;
}

/* Header actions: clean, equal, centered */
.cclsp-header{
  padding-right:148px !important;
  min-height:68px !important;
}

.cclsp-header-close,
.cclsp-header-back,
.cclsp-theme-switch{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  overflow:hidden !important;
  cursor:pointer !important;
  z-index:4 !important;
  color:inherit !important;
}

.cclsp-header-close{
  right:12px !important;
  background:rgba(249,115,22,.10) !important;
  color:#f97316 !important;
}

.cclsp-header-back{
  right:56px !important;
  background:rgba(15,23,42,.06) !important;
  color:#334155 !important;
}

.cclsp-theme-switch{
  right:100px !important;
}

.cclsp-header-btn-icon,
.cclsp-theme-switch-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
  font-family:inherit !important;
  font-weight:950 !important;
  color:currentColor !important;
  transform:none !important;
  pointer-events:none !important;
}

.cclsp-header-close .cclsp-header-btn-icon{
  font-size:20px !important;
  transform:translateY(-1px) !important;
}

.cclsp-header-back .cclsp-header-btn-icon{
  font-size:22px !important;
  transform:translateY(-1px) !important;
}

.cclsp-theme-switch .cclsp-header-btn-icon,
.cclsp-theme-switch-icon{
  font-size:17px !important;
}

.cclsp-header-close:hover,
.cclsp-header-back:hover,
.cclsp-theme-switch:hover{
  transform:translateY(-50%) scale(1.04) !important;
}

/* Dark/light button colors */
.cclsp-site-dark .cclsp-header-back,
.cclsp-site-dark .cclsp-theme-switch{
  background:rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
}

.cclsp-site-dark .cclsp-header-close{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}

.cclsp-site-light .cclsp-header-back,
.cclsp-site-light .cclsp-theme-switch{
  background:rgba(15,23,42,.06) !important;
  color:#334155 !important;
}

.cclsp-site-light .cclsp-header-close{
  background:rgba(249,115,22,.10) !important;
  color:#f97316 !important;
}

.cclsp-theme-switch-dark{
  color:#facc15 !important;
}

/* Mobile header actions */
@media (max-width:768px){
  .cclsp-header{
    padding-right:140px !important;
    min-height:66px !important;
  }

  .cclsp-header-close,
  .cclsp-header-back,
  .cclsp-theme-switch{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    border-radius:13px !important;
  }

  .cclsp-header-close{ right:10px !important; }
  .cclsp-header-back{ right:52px !important; }
  .cclsp-theme-switch{ right:94px !important; }

  .cclsp-header-close .cclsp-header-btn-icon{ font-size:19px !important; }
  .cclsp-header-back .cclsp-header-btn-icon{ font-size:21px !important; }
  .cclsp-theme-switch .cclsp-header-btn-icon,
  .cclsp-theme-switch-icon{ font-size:16px !important; }
}

/* Hide all visible scrollbars inside the widget, but keep wheel/touch scrolling */
.cclsp-window,
.cclsp-panel,
.cclsp-body,
.cclsp-chat,
.cclsp-ticket-restore-box,
.cclsp-phone-restore-list,
.cclsp-view-restore .cclsp-body,
.cclsp-emoji-panel,
.cclsp-admin-mobile-panel,
.cclsp-admin-inbox,
.cclsp-admin-thread{
  scrollbar-width:none !important;        /* Firefox */
  -ms-overflow-style:none !important;     /* IE/Edge legacy */
}

.cclsp-window::-webkit-scrollbar,
.cclsp-panel::-webkit-scrollbar,
.cclsp-body::-webkit-scrollbar,
.cclsp-chat::-webkit-scrollbar,
.cclsp-ticket-restore-box::-webkit-scrollbar,
.cclsp-phone-restore-list::-webkit-scrollbar,
.cclsp-view-restore .cclsp-body::-webkit-scrollbar,
.cclsp-emoji-panel::-webkit-scrollbar,
.cclsp-admin-mobile-panel::-webkit-scrollbar,
.cclsp-admin-inbox::-webkit-scrollbar,
.cclsp-admin-thread::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* Keep scrolling natural without showing the line */
.cclsp-body,
.cclsp-chat,
.cclsp-view-restore .cclsp-body,
.cclsp-ticket-restore-box,
.cclsp-phone-restore-list{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
}

/* Prevent any accidental horizontal scrollbar */
.cclsp-window,
.cclsp-panel,
.cclsp-body,
.cclsp-chat{
  overflow-x:hidden !important;
}


/* v2.8.3 Timed capsule close button cleanup */
.cclsp-timed-capsule{
  position:relative !important;
  overflow:hidden !important;
  padding:12px 16px 16px 44px !important;
  min-height:58px !important;
}

.cclsp-resume-actions,
.cclsp-online-state,
.cclsp-result{
  position:relative !important;
}

.cclsp-capsule-close{
  position:absolute !important;
  left:10px !important;
  right:auto !important;
  top:10px !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:13px !important;
  font-weight:900 !important;
  padding:0 !important;
  margin:0 !important;
  z-index:12 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  box-shadow:0 4px 12px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.cclsp-capsule-close:hover{
  transform:none !important;
  opacity:.92 !important;
}

.cclsp-capsule-close::before,
.cclsp-capsule-close::after{
  content:none !important;
}

.cclsp-capsule-progress{
  left:44px !important;
  right:14px !important;
  bottom:8px !important;
}

/* Give more breathing room for RTL text */
.cclsp-resume-actions,
.cclsp-online-state,
.cclsp-result{
  padding-left:44px !important;
}

/* Dark mode visibility */
.cclsp-site-dark .cclsp-capsule-close{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.cclsp-site-light .cclsp-capsule-close{
  background:rgba(255,255,255,.78) !important;
}

@media (max-width:768px){
  .cclsp-timed-capsule{
    padding:11px 14px 15px 42px !important;
    min-height:54px !important;
  }

  .cclsp-capsule-close{
    left:9px !important;
    top:9px !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    font-size:12px !important;
  }

  .cclsp-capsule-progress{
    left:42px !important;
    right:12px !important;
    bottom:7px !important;
  }

  .cclsp-resume-actions,
  .cclsp-online-state,
  .cclsp-result{
    padding-left:42px !important;
  }
}


/* v2.8.4 Desktop voice recording fix UI */
#cclspVoiceBtn.cclsp-recording,
.cclsp-tool-btn.cclsp-recording{
  background:linear-gradient(135deg,#ef4444,#f97316) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(239,68,68,.22) !important;
  animation:cclspMicPulse 1.15s ease-in-out infinite !important;
}

@keyframes cclspMicPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(.94); }
}

.cclsp-attach-preview audio{
  width:100% !important;
  max-width:100% !important;
  margin-top:8px !important;
  border-radius:14px !important;
}


/* v2.8.5 Desktop WAV fallback recorder UI */
#cclspVoiceBtn.cclsp-recording,
.cclsp-tool-btn.cclsp-recording{
  background:linear-gradient(135deg,#ef4444,#f97316) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(239,68,68,.22) !important;
  animation:cclspMicPulse 1.15s ease-in-out infinite !important;
}

@keyframes cclspMicPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(.94); }
}

.cclsp-attach-preview audio{
  width:100% !important;
  max-width:100% !important;
  margin-top:8px !important;
  border-radius:14px !important;
}


/* v2.8.6 Microphone permission diagnostics */
.cclsp-result.cclsp-error,
.cclsp-result.error{
  line-height:1.85 !important;
}


/* v2.9 Admin SMS/Login settings help */
.cclsp-admin-helpbox{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:14px;
  padding:12px 14px;
  margin:10px 0 16px;
  color:#7c2d12;
}
.cclsp-admin-helpbox strong{
  display:block;
  margin-bottom:8px;
  color:#9a3412;
}
.cclsp-admin-helpbox ul{
  margin:8px 18px 8px 0;
}
.cclsp-admin-helpbox li{
  margin-bottom:6px;
  line-height:1.8;
}
.cclsp-admin-helpbox code{
  background:rgba(255,255,255,.7);
  padding:2px 6px;
  border-radius:8px;
}


/* v2.9.1 Premium Admin + Agent UI */

/* Global admin polish */
.cclsp-admin-wrap,
.cclsp-admin-v291{
  direction:rtl;
  font-family:inherit;
  color:#172033;
}

.cclsp-admin-wrap *{
  box-sizing:border-box;
}

.cclsp-admin-hero{
  margin:18px 0 18px;
  padding:22px 24px;
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,122,26,.20), transparent 34%),
    radial-gradient(circle at 84% 28%, rgba(59,130,246,.13), transparent 36%),
    linear-gradient(135deg, #111827, #1e293b);
  color:#fff;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  overflow:hidden;
  position:relative;
}

.cclsp-admin-hero::after{
  content:"";
  position:absolute;
  inset:-60px auto auto -60px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  filter:blur(2px);
}

.cclsp-admin-kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fed7aa;
  font-size:12px;
  font-weight:900;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.12);
}

.cclsp-admin-hero h1{
  color:#fff;
  margin:0 0 8px;
  font-size:26px;
  line-height:1.5;
  font-weight:950;
}

.cclsp-admin-hero p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
}

.cclsp-admin-hero-badges{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  max-width:340px;
  position:relative;
  z-index:2;
}

.cclsp-admin-hero-badges span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(12px);
}

/* Settings form becomes card-based and easier to scan */
.cclsp-settings-form,
.cclsp-admin-wrap form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  align-items:start;
  max-width:1280px;
}

.cclsp-admin-wrap form > h2,
.cclsp-admin-wrap form > h3,
.cclsp-admin-wrap form > p.description,
.cclsp-admin-wrap form > .cclsp-admin-helpbox,
.cclsp-admin-wrap form > .cclsp-mini-debug,
.cclsp-admin-wrap form > .submit,
.cclsp-admin-wrap form > table,
.cclsp-admin-wrap form > .notice{
  grid-column:1 / -1;
}

.cclsp-admin-wrap form > h2,
.cclsp-section-title{
  margin:18px 0 0 !important;
  padding:15px 16px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg, rgba(255,122,26,.12), rgba(255,255,255,.88)) !important;
  border:1px solid rgba(255,122,26,.18) !important;
  color:#9a3412 !important;
  font-size:16px !important;
  font-weight:950 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.cclsp-admin-wrap form > h3{
  margin:12px 0 0 !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  color:#334155 !important;
  border:1px solid #e2e8f0 !important;
  font-size:14px !important;
  font-weight:950 !important;
}

.cclsp-admin-wrap form > label{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  min-height:76px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.07);
  box-shadow:0 10px 26px rgba(15,23,42,.035);
  color:#334155;
  font-weight:900;
  line-height:1.8;
}

.cclsp-admin-wrap form > label:has(input[type="checkbox"]){
  flex-direction:row;
  align-items:center;
  min-height:54px;
}

.cclsp-admin-wrap input[type="text"],
.cclsp-admin-wrap input[type="password"],
.cclsp-admin-wrap input[type="url"],
.cclsp-admin-wrap input[type="number"],
.cclsp-admin-wrap input[type="email"],
.cclsp-admin-wrap select,
.cclsp-admin-wrap textarea{
  width:100%;
  max-width:100%;
  border-radius:14px !important;
  min-height:42px !important;
  border:1px solid #dbe3ef !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70) !important;
  padding:9px 12px !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.cclsp-admin-wrap textarea{
  min-height:110px !important;
  line-height:1.8 !important;
  direction:ltr;
  text-align:left;
}

.cclsp-admin-wrap input:focus,
.cclsp-admin-wrap select:focus,
.cclsp-admin-wrap textarea:focus{
  border-color:#fb923c !important;
  box-shadow:0 0 0 4px rgba(251,146,60,.14) !important;
  background:#fff !important;
  outline:none !important;
}

.cclsp-admin-wrap .description{
  color:#64748b !important;
  line-height:1.9 !important;
  font-size:12.5px !important;
}

.cclsp-admin-wrap .button-primary,
.cclsp-admin-wrap .submit .button-primary{
  min-height:44px;
  padding:0 22px !important;
  border-radius:14px !important;
  border:none !important;
  background:linear-gradient(135deg,#ff8a3d,#ff6a00) !important;
  box-shadow:0 12px 24px rgba(255,106,0,.22) !important;
  font-weight:950 !important;
  transition:transform .18s ease, box-shadow .18s ease;
}

.cclsp-admin-wrap .button-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(255,106,0,.26) !important;
}

/* Help boxes and debug */
.cclsp-admin-helpbox{
  background:linear-gradient(135deg,#fff7ed,#fff) !important;
  border:1px solid #fed7aa !important;
  border-radius:22px !important;
  padding:16px 18px !important;
  margin:6px 0 10px !important;
  color:#7c2d12 !important;
  box-shadow:0 12px 30px rgba(251,146,60,.08);
}

.cclsp-admin-helpbox strong{
  display:block;
  margin-bottom:8px;
  color:#9a3412;
  font-weight:950;
}

.cclsp-admin-helpbox ul{
  margin:8px 18px 8px 0;
}

.cclsp-admin-helpbox li{
  margin-bottom:7px;
  line-height:1.9;
}

.cclsp-admin-helpbox code,
.cclsp-admin-wrap code{
  background:rgba(255,255,255,.82);
  padding:3px 7px;
  border-radius:8px;
  color:#9a3412;
  border:1px solid rgba(251,146,60,.16);
}

.cclsp-mini-debug{
  border-radius:20px;
  padding:14px;
  background:#0f172a;
  color:#e2e8f0;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}

.cclsp-mini-debug pre{
  max-height:260px;
  overflow:auto;
  padding:12px;
  border-radius:14px;
  background:#020617;
  color:#dbeafe;
  direction:ltr;
  text-align:left;
}

/* Agent / Inbox UI polish */
.cclsp-admin-inbox,
.cclsp-agent-inbox,
.cclsp-dashboard,
.cclsp-inbox-wrap{
  border-radius:26px !important;
  overflow:hidden !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 18px 45px rgba(15,23,42,.08) !important;
}

.cclsp-admin-sidebar,
.cclsp-inbox-sidebar,
.cclsp-conversation-list{
  background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
  border-left:1px solid #e2e8f0 !important;
}

.cclsp-admin-thread,
.cclsp-thread-panel,
.cclsp-conversation-panel{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,122,26,.06), transparent 30%),
    #fff !important;
}

.cclsp-admin-inbox button,
.cclsp-agent-inbox button,
.cclsp-dashboard button{
  border-radius:13px !important;
  font-weight:900 !important;
}

.cclsp-admin-inbox input,
.cclsp-admin-inbox textarea,
.cclsp-agent-inbox input,
.cclsp-agent-inbox textarea{
  border-radius:14px !important;
  border:1px solid #dbe3ef !important;
  background:#f8fafc !important;
}

.cclsp-admin-message,
.cclsp-agent-message,
.cclsp-thread-message{
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(15,23,42,.045) !important;
  border:1px solid rgba(15,23,42,.06) !important;
}

.cclsp-admin-message-user,
.cclsp-thread-message-user{
  background:linear-gradient(135deg,#ff8a3d,#ff6a00) !important;
  color:#fff !important;
}

.cclsp-admin-message-admin,
.cclsp-thread-message-admin{
  background:#fff !important;
  color:#0f172a !important;
}

.cclsp-status-badge,
.cclsp-badge,
.cclsp-ticket-status{
  border-radius:999px !important;
  padding:5px 9px !important;
  font-size:11px !important;
  font-weight:950 !important;
}

/* Better table/list style in support admin */
.cclsp-admin-wrap table.wp-list-table,
.cclsp-admin-wrap .widefat{
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
}

.cclsp-admin-wrap table.wp-list-table th,
.cclsp-admin-wrap .widefat th{
  background:#f8fafc !important;
  color:#475569 !important;
  font-weight:950 !important;
}

.cclsp-admin-wrap table.wp-list-table td,
.cclsp-admin-wrap .widefat td{
  vertical-align:middle !important;
}

/* Responsive admin */
@media (max-width:1100px){
  .cclsp-settings-form,
  .cclsp-admin-wrap form{
    grid-template-columns:1fr;
  }

  .cclsp-admin-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .cclsp-admin-hero-badges{
    justify-content:flex-start;
  }
}

@media (max-width:782px){
  .cclsp-admin-hero{
    border-radius:22px;
    padding:18px;
  }

  .cclsp-admin-hero h1{
    font-size:21px;
  }

  .cclsp-admin-wrap form > label{
    padding:12px;
  }
}


/* v2.9.3 Professional settings tabs + SMS providers */
.cclsp-settings-tabs{
  grid-column:1 / -1;
  position:sticky;
  top:32px;
  z-index:10;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  margin:10px 0 8px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid #e2e8f0;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  backdrop-filter:blur(16px);
}

.cclsp-tab-btn{
  border:none;
  border-radius:16px;
  min-height:40px;
  padding:0 14px;
  font-weight:950;
  color:#475569;
  background:#f8fafc;
  cursor:pointer;
  transition:.18s ease;
}

.cclsp-tab-btn:hover,
.cclsp-tab-btn.cclsp-active{
  color:#fff;
  background:linear-gradient(135deg,#ff9b4a,#ff6a00);
  box-shadow:0 10px 22px rgba(255,106,0,.18);
}

.cclsp-settings-super-card{
  grid-column:1 / -1;
  border:1px solid #e2e8f0;
  border-radius:26px;
  padding:18px;
  background:linear-gradient(135deg,#fff,#f8fafc);
  box-shadow:0 18px 44px rgba(15,23,42,.06);
  margin:8px 0;
}

.cclsp-super-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.cclsp-super-card-head > span{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff7ed;
  color:#f97316;
  font-size:22px;
  box-shadow:inset 0 0 0 1px #fed7aa;
}

.cclsp-super-card-head h2{
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:#0f172a !important;
  font-size:18px !important;
}

.cclsp-super-card-head p{
  margin:4px 0 0;
  color:#64748b;
  font-weight:750;
}

.cclsp-settings-super-card label{
  display:block;
  font-weight:950;
  margin:12px 0 6px;
  color:#334155;
}

.cclsp-settings-super-card input,
.cclsp-settings-super-card select,
.cclsp-settings-super-card textarea{
  width:100%;
  max-width:100%;
  border-radius:15px !important;
  border:1px solid #dbe3ef !important;
  background:#fff !important;
  min-height:44px !important;
  padding:10px 12px !important;
}

.cclsp-admin-guide-grid,
.cclsp-sms-provider-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.cclsp-admin-guide-grid > div,
.cclsp-sms-provider-grid > div{
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:12px;
  background:#fff;
}

.cclsp-admin-guide-grid strong,
.cclsp-sms-provider-grid b{
  display:block;
  color:#0f172a;
  font-weight:950;
  margin-bottom:4px;
}

.cclsp-admin-guide-grid p,
.cclsp-sms-provider-grid span{
  display:block;
  margin:0;
  color:#64748b;
  line-height:1.8;
  font-weight:750;
  font-size:12px;
}

.cclsp-chat-link,
.cclsp-admin-chat-link{
  color:#2563eb !important;
  background:rgba(37,99,235,.08);
  border-radius:8px;
  padding:1px 5px;
  text-decoration:none !important;
  font-weight:900;
  word-break:break-all;
}

.cclsp-chat-link:hover,
.cclsp-admin-chat-link:hover{
  background:rgba(37,99,235,.16);
}

.cclsp-msg-user .cclsp-chat-link{
  color:#fff !important;
  background:rgba(255,255,255,.18);
}

@media (max-width:900px){
  .cclsp-admin-guide-grid,
  .cclsp-sms-provider-grid{
    grid-template-columns:1fr;
  }
  .cclsp-settings-tabs{
    position:relative;
    top:auto;
  }
}


/* v2.9.4 Colorful tabbed settings + loading */
.cclsp-settings-tabs-pro,
.cclsp-settings-tabs{
  grid-column:1 / -1 !important;
  position:sticky !important;
  top:32px !important;
  z-index:50 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  padding:12px !important;
  margin:14px 0 12px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,122,26,.18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88)) !important;
  border:1px solid rgba(226,232,240,.95) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.11) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

.cclsp-tab-btn{
  border:none !important;
  min-height:46px !important;
  padding:0 15px !important;
  border-radius:18px !important;
  font-weight:950 !important;
  color:#475569 !important;
  background:#fff !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  box-shadow:0 8px 20px rgba(15,23,42,.045), inset 0 0 0 1px rgba(226,232,240,.9) !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

.cclsp-tab-btn span{
  width:25px;
  height:25px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  font-size:14px;
}

.cclsp-tab-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.08), inset 0 0 0 1px rgba(251,146,60,.24) !important;
}

.cclsp-tab-btn.cclsp-active{
  color:#fff !important;
  background:linear-gradient(135deg,#ff9b4a,#ff6a00) !important;
  box-shadow:0 16px 34px rgba(255,106,0,.25) !important;
}

.cclsp-tab-btn.cclsp-active span{
  background:rgba(255,255,255,.20);
}

/* colorful panels */
.cclsp-settings-super-card,
.cclsp-tab-panel{
  position:relative !important;
  overflow:hidden !important;
  animation:cclspPanelIn .28s cubic-bezier(.2,.8,.2,1) both;
}

.cclsp-tab-panel[data-panel="login"]{
  background:linear-gradient(135deg,#fff7ed,#fff) !important;
  border-color:#fed7aa !important;
}

.cclsp-tab-panel[data-panel="sms"]{
  background:linear-gradient(135deg,#eff6ff,#fff) !important;
  border-color:#bfdbfe !important;
}

.cclsp-tab-panel[data-panel="patterns"]{
  background:linear-gradient(135deg,#f5f3ff,#fff) !important;
  border-color:#ddd6fe !important;
}

.cclsp-tab-panel[data-panel="custom"]{
  background:linear-gradient(135deg,#ecfdf5,#fff) !important;
  border-color:#bbf7d0 !important;
}

.cclsp-tab-panel[data-panel="advanced"]{
  background:linear-gradient(135deg,#f8fafc,#fff) !important;
  border-color:#e2e8f0 !important;
}

.cclsp-panel-color-dot{
  position:absolute;
  left:18px;
  top:18px;
  width:11px;
  height:11px;
  border-radius:999px;
  background:#ff7a1a;
  box-shadow:0 0 0 6px rgba(255,122,26,.10);
}

.cclsp-tab-panel[data-panel="sms"] .cclsp-panel-color-dot{background:#3b82f6; box-shadow:0 0 0 6px rgba(59,130,246,.10);}
.cclsp-tab-panel[data-panel="patterns"] .cclsp-panel-color-dot{background:#8b5cf6; box-shadow:0 0 0 6px rgba(139,92,246,.10);}
.cclsp-tab-panel[data-panel="custom"] .cclsp-panel-color-dot{background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.10);}
.cclsp-tab-panel[data-panel="advanced"] .cclsp-panel-color-dot{background:#64748b; box-shadow:0 0 0 6px rgba(100,116,139,.10);}

@keyframes cclspPanelIn{
  from{opacity:0; transform:translateY(8px) scale(.992);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* Loading overlay for settings */
.cclsp-settings-form,
.cclsp-admin-wrap form{
  position:relative !important;
}

.cclsp-settings-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.cclsp-settings-loader.cclsp-show{
  display:flex;
}

.cclsp-loader-card{
  min-width:260px;
  padding:22px 24px;
  border-radius:26px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 28px 80px rgba(15,23,42,.20);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  color:#0f172a;
  font-weight:950;
}

.cclsp-loader-spinner{
  width:42px;
  height:42px;
  border-radius:999px;
  background:conic-gradient(from 0deg,#ff6a00,#ffb36b,#3b82f6,#ff6a00);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation:cclspSettingsSpin .75s linear infinite;
}

@keyframes cclspSettingsSpin{
  to{transform:rotate(360deg);}
}

.cclsp-settings-is-loading{
  pointer-events:none;
}

@media (max-width:782px){
  .cclsp-settings-tabs-pro,
  .cclsp-settings-tabs{
    position:relative !important;
    top:auto !important;
    border-radius:22px !important;
  }

  .cclsp-tab-btn{
    flex:1 1 calc(50% - 8px);
    min-height:44px !important;
  }
}


/* v2.9.8 Popup corner cleanup */
.cclsp-window{
  border-radius:32px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  clip-path:inset(0 round 32px) !important;
  -webkit-clip-path:inset(0 round 32px) !important;
  transform:translateZ(0) !important;
  -webkit-mask-image:-webkit-radial-gradient(white, black) !important;
  background:transparent !important;
}

.cclsp-panel{
  position:relative !important;
  border-radius:32px !important;
  overflow:hidden !important;
  clip-path:inset(0 round 32px) !important;
  -webkit-clip-path:inset(0 round 32px) !important;
  background-clip:padding-box !important;
  transform:translateZ(0) !important;
  -webkit-mask-image:-webkit-radial-gradient(white, black) !important;
}

.cclsp-panel::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb,var(--cclsp-primary) 14%,transparent), transparent 38%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.08), transparent 35%),
    rgba(255,255,255,.82) !important;
  z-index:0 !important;
}

.cclsp-header,
.cclsp-body,
.cclsp-footer,
.cclsp-home-view,
.cclsp-chat-view,
.cclsp-track-view,
.cclsp-quick-view{
  position:relative !important;
  z-index:1 !important;
}

.cclsp-header{
  border-top-left-radius:32px !important;
  border-top-right-radius:32px !important;
  overflow:hidden !important;
}

.cclsp-body{
  border-bottom-left-radius:32px !important;
  border-bottom-right-radius:32px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

.cclsp-home-cards,
.cclsp-home-actions,
.cclsp-quick-links{
  overflow:hidden !important;
}

@media (max-width:768px){
  .cclsp-window,
  .cclsp-panel{
    border-radius:28px !important;
    clip-path:inset(0 round 28px) !important;
    -webkit-clip-path:inset(0 round 28px) !important;
  }

  .cclsp-header{
    border-top-left-radius:28px !important;
    border-top-right-radius:28px !important;
  }

  .cclsp-body{
    border-bottom-left-radius:28px !important;
    border-bottom-right-radius:28px !important;
  }
}


/* ===== Shared phone-login identity (v2.9.12) ===== */
.cclsp-identity-bar,.cclsp-restore-identity{display:none}
.cclsp-verified .cclsp-identity-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:9px 12px;border-radius:14px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);margin-bottom:9px}
.cclsp-verified .cclsp-restore-identity{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;border-radius:14px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);margin-bottom:10px}
.cclsp-identity-phone,.cclsp-restore-identity-line{color:#15803d;font-size:11.6px;font-weight:900;line-height:1.6}
.cclsp-identity-phone b,.cclsp-restore-identity-line b{direction:ltr;display:inline-block;font-weight:950}
.cclsp-restore-identity-actions{display:flex;gap:7px;margin-top:4px}
.cclsp-identity-load{flex:1;border:none;cursor:pointer;border-radius:11px;height:36px;background:linear-gradient(135deg,var(--cclsp-primary),#b43b00);color:#fff;font-family:inherit;font-weight:900;font-size:11.8px}
.cclsp-identity-load:hover{filter:brightness(1.05)}
.cclsp-change-number{border:none;cursor:pointer;background:rgba(17,24,39,.07);color:#374151;font-family:inherit;font-weight:850;font-size:10.8px;padding:7px 12px;border-radius:999px;white-space:nowrap}
.cclsp-change-number:hover{background:rgba(17,24,39,.12)}
.cclsp-verified .cclsp-phone-field{display:none!important}
.cclsp-verified #cclspPhoneVerify{display:none!important}
.cclsp-verified .cclsp-contact-grid{grid-template-columns:1fr}
.cclsp-verified #cclspPhoneRestorePhone,.cclsp-verified .cclsp-phone-restore-row,.cclsp-verified #cclspPhoneRestoreLoad,.cclsp-verified #cclspAccountRestoreLoad,.cclsp-verified .cclsp-phone-restore-help{display:none!important}
@media (prefers-color-scheme:dark){
.cclsp-verified .cclsp-identity-bar,.cclsp-verified .cclsp-restore-identity{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.26)}
.cclsp-identity-phone,.cclsp-restore-identity-line{color:#86efac}
.cclsp-change-number{background:rgba(255,255,255,.08);color:#e5e7eb}
.cclsp-change-number:hover{background:rgba(255,255,255,.14)}
}


/* ===== v2.9.14 fixes ===== */
/* #4 verified visitor: hide all contact fields (identity bar shows instead) */
.cclsp-verified .cclsp-contact-grid{display:none !important}
.cclsp-verified .cclsp-subject-field{display:none !important}
/* #3 restore send-code button must not overflow while counting */
.cclsp-phone-restore-row{grid-template-columns:minmax(0,1fr) 104px}
#cclspPhoneRestoreSend{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cclspPhoneRestoreSend.cclsp-counting .cclsp-resend-text{display:none}
#cclspPhoneRestoreSend .cclsp-resend-timer{min-width:0 !important;padding:0 6px !important}
/* #1 restore-area feedback + reveal manual entry when re-verification is needed */
.cclsp-restore-msg{padding:9px 11px;border-radius:12px;font-size:11.5px;font-weight:850;line-height:1.7}
.cclsp-restore-msg-ok{color:#166534;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.18)}
.cclsp-restore-msg-error{color:#991b1b;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.18)}
.cclsp-reverify #cclspPhoneRestorePhone{display:block !important}
.cclsp-reverify .cclsp-phone-restore-row{display:grid !important}
.cclsp-reverify #cclspPhoneRestoreLoad{display:block !important}
.cclsp-reverify .cclsp-phone-restore-help{display:block !important}
/* #2 prevent iOS zoom-on-focus (inputs >=16px on small screens) */
@media (max-width:820px){
  #cclspWidget input,#cclspWidget textarea,#cclspWidget select{font-size:16px !important}
}


/* ================================================================
   v2.9.17 — Fluid experience layer (smooth screen transitions + polish)
   Solid colors only (no color-mix). Respects reduced motion.
   ================================================================ */
@keyframes cclspFluidIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cclspFluidPop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Smooth, app-like entrance when switching between screens */
.cclsp-widget.cclsp-open .cclsp-view-home .cclsp-ux-home,
.cclsp-widget.cclsp-open .cclsp-view-chat .cclsp-chat,
.cclsp-widget.cclsp-open .cclsp-view-restore .cclsp-ticket-restore,
.cclsp-widget.cclsp-open .cclsp-view-quick .cclsp-form {
  animation: cclspFluidIn .34s cubic-bezier(.2,.8,.2,1) both;
}
.cclsp-widget.cclsp-open .cclsp-view-chat .cclsp-composer-shell {
  animation: cclspFluidIn .42s cubic-bezier(.2,.8,.2,1) both .05s;
}
.cclsp-widget.cclsp-open .cclsp-phone-verify {
  animation: cclspFluidIn .34s cubic-bezier(.2,.8,.2,1) both;
}
/* Gentle stagger for the quick-contact links */
.cclsp-widget.cclsp-open .cclsp-view-quick .cclsp-links .cclsp-link {
  animation: cclspFluidPop .4s cubic-bezier(.2,.8,.2,1) both;
}
.cclsp-widget.cclsp-open .cclsp-view-quick .cclsp-links .cclsp-link:nth-child(1){ animation-delay:.05s }
.cclsp-widget.cclsp-open .cclsp-view-quick .cclsp-links .cclsp-link:nth-child(2){ animation-delay:.11s }
.cclsp-widget.cclsp-open .cclsp-view-quick .cclsp-links .cclsp-link:nth-child(3){ animation-delay:.17s }
/* Tactile press feedback */
.cclsp-widget .cclsp-send:active,
.cclsp-widget .cclsp-tool-btn:active,
.cclsp-widget .cclsp-link:active,
.cclsp-widget .cclsp-phone-verify-row button:active,
.cclsp-widget .cclsp-phone-restore-load:active,
.cclsp-widget .cclsp-phone-restore-account:active,
.cclsp-widget #cclspRestoreShowMine:active { transform: scale(.95); }
.cclsp-widget .cclsp-toggle:active { transform: translateY(-1px) scale(.99); }
/* Smoothness: no scroll-chaining jank + iOS momentum scroll */
.cclsp-widget .cclsp-body,
.cclsp-widget .cclsp-chat,
.cclsp-widget .cclsp-phone-restore-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Keyboard focus ring (quality floor) */
.cclsp-widget button:focus-visible,
.cclsp-widget a:focus-visible,
.cclsp-widget input:focus-visible,
.cclsp-widget textarea:focus-visible {
  outline: 2px solid var(--cclsp-primary, #ff7a1a);
  outline-offset: 2px;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cclsp-widget *, .cclsp-widget *::before, .cclsp-widget *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   v2.9.33 — User login UI polish
   ================================================================ */
.cclsp-login-card{
  order:0;
  display:block;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,250,252,.88));
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 16px 34px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.78);
  color:#0f172a;
}
.cclsp-login-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.cclsp-login-kicker span,
.cclsp-login-kicker b{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:950;
  line-height:1;
}
.cclsp-login-kicker span{
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
}
.cclsp-login-kicker b{
  background:#ecfdf5;
  color:#047857;
  border:1px solid #bbf7d0;
}
.cclsp-login-card > strong{
  display:block;
  color:#111827;
  font-size:15px;
  font-weight:950;
  line-height:1.65;
}
.cclsp-login-card > p{
  margin:4px 0 12px;
  color:#64748b;
  font-size:11.8px;
  font-weight:800;
  line-height:1.8;
}
.cclsp-login-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.cclsp-login-step{
  min-width:0;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  color:#475569;
}
.cclsp-login-step i{
  width:26px;
  height:26px;
  min-width:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#0ea5e9;
  color:#fff;
  font-style:normal;
  font-size:12px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}
.cclsp-login-step b{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;
  font-weight:950;
  line-height:1.4;
}
.cclsp-step-verify i{
  background:#94a3b8;
}
.cclsp-form.cclsp-login-code-sent .cclsp-step-identity{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#047857;
}
.cclsp-form.cclsp-login-code-sent .cclsp-step-identity i{
  background:#16a34a;
}
.cclsp-form.cclsp-login-code-sent .cclsp-step-verify{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}
.cclsp-form.cclsp-login-code-sent .cclsp-step-verify i{
  background:#2563eb;
}
.cclsp-view-quick .cclsp-login-card,
.cclsp-verified .cclsp-login-card,
.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-login-card{
  display:none !important;
}
.cclsp-phone-locked .cclsp-login-card{
  display:block !important;
}
.cclsp-phone-locked .cclsp-contact-grid{
  order:1 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 14px 30px rgba(15,23,42,.06) !important;
}
.cclsp-phone-locked .cclsp-field{
  gap:6px !important;
}
.cclsp-phone-locked .cclsp-field label{
  color:#334155 !important;
  font-size:11.5px !important;
  font-weight:950 !important;
}
.cclsp-phone-locked .cclsp-field input,
.cclsp-phone-locked .cclsp-department-field select{
  height:46px !important;
  border-radius:16px !important;
  border-color:rgba(148,163,184,.30) !important;
  background:#fff !important;
  color:#0f172a !important;
  font-size:16px !important;
  font-weight:850 !important;
  padding:0 14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.cclsp-phone-locked .cclsp-field input:focus{
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.18),inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.cclsp-phone-locked .cclsp-phone-verify{
  order:2 !important;
  padding:13px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(59,130,246,.20) !important;
  box-shadow:0 16px 34px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.76) !important;
}
.cclsp-phone-verify-head strong{
  color:#0f172a !important;
  font-size:13.5px !important;
  font-weight:950 !important;
}
.cclsp-phone-verify-head span{
  color:#64748b !important;
  font-size:11.7px !important;
  font-weight:800 !important;
  line-height:1.8 !important;
}
.cclsp-phone-verify-row{
  grid-template-columns:minmax(0,1fr) 96px !important;
  gap:8px !important;
}
#cclspPhoneVerifyCode,
#cclspPhoneRestoreCode{
  height:46px !important;
  text-align:center !important;
  direction:ltr !important;
  border-radius:16px !important;
  font-size:16px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums;
}
.cclsp-phone-verify-row button,
.cclsp-phone-verify-resend{
  min-height:46px !important;
  border-radius:16px !important;
  font-size:12px !important;
  font-weight:950 !important;
}
.cclsp-phone-verify-resend{
  width:100%;
  border:1px solid rgba(37,99,235,.14) !important;
}
.cclsp-form.cclsp-login-code-sent .cclsp-phone-verify{
  border-color:rgba(37,99,235,.28) !important;
  background:#f8fbff !important;
}
.cclsp-view-restore .cclsp-ticket-restore-box{
  border-radius:22px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(248,250,252,.86)) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 16px 34px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.cclsp-view-restore .cclsp-phone-restore-help{
  padding:10px 12px !important;
  border-radius:16px !important;
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  color:#1e40af !important;
  font-size:11.7px !important;
  font-weight:850 !important;
  line-height:1.8 !important;
}
#cclspPhoneRestorePhone{
  height:46px !important;
  border-radius:16px !important;
  font-size:16px !important;
  font-weight:850 !important;
}
.cclsp-phone-restore-load,
.cclsp-phone-restore-account,
#cclspPhoneRestoreSend{
  min-height:44px !important;
  border-radius:16px !important;
  font-size:12px !important;
  font-weight:950 !important;
}
.cclsp-site-dark .cclsp-login-card,
.cclsp-site-dark .cclsp-phone-locked .cclsp-contact-grid,
.cclsp-site-dark .cclsp-phone-locked .cclsp-phone-verify,
.cclsp-site-dark .cclsp-view-restore .cclsp-ticket-restore-box{
  background:rgba(15,23,42,.82) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#f8fafc !important;
}
.cclsp-site-dark .cclsp-login-card > strong,
.cclsp-site-dark .cclsp-phone-verify-head strong,
.cclsp-site-dark .cclsp-phone-locked .cclsp-field label{
  color:#f8fafc !important;
}
.cclsp-site-dark .cclsp-login-card > p,
.cclsp-site-dark .cclsp-phone-verify-head span{
  color:#cbd5e1 !important;
}
.cclsp-site-dark .cclsp-login-step{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:#e2e8f0;
}
.cclsp-site-dark .cclsp-phone-locked .cclsp-field input,
.cclsp-site-dark #cclspPhoneVerifyCode,
.cclsp-site-dark #cclspPhoneRestorePhone,
.cclsp-site-dark #cclspPhoneRestoreCode{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
@media (max-width:520px){
  .cclsp-login-card{
    padding:12px;
    border-radius:20px;
  }
  .cclsp-login-steps,
  .cclsp-phone-locked .cclsp-contact-grid,
  .cclsp-phone-verify-row{
    grid-template-columns:1fr !important;
  }
  .cclsp-login-step{
    min-height:40px;
  }
}

/* ================================================================
   v2.9.34 — Mobile app-like widget polish
   ================================================================ */
@media (max-width:768px){
  .cclsp-widget.cclsp-open{
    inset:0 !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100dvh !important;
    pointer-events:none;
  }

  .cclsp-widget.cclsp-open .cclsp-toggle{
    display:none !important;
  }

  .cclsp-widget.cclsp-open .cclsp-window{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .cclsp-widget.cclsp-open .cclsp-panel{
    width:100vw !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    display:flex !important;
    background:#f8fafc !important;
  }

  .cclsp-widget.cclsp-open .cclsp-header{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    min-height:68px !important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px !important;
    background:rgba(255,255,255,.94) !important;
    border-bottom:1px solid rgba(148,163,184,.22) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  }

  .cclsp-widget.cclsp-open .cclsp-avatar{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:16px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-head-text strong{
    font-size:14px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-head-text small{
    font-size:11px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-header-close,
  .cclsp-widget.cclsp-open .cclsp-header-back,
  .cclsp-widget.cclsp-open .cclsp-theme-switch{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:14px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    padding:10px 10px calc(12px + env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .cclsp-widget.cclsp-open .cclsp-ux-tabs{
    position:sticky !important;
    top:0 !important;
    z-index:12 !important;
    margin:0 0 10px !important;
    padding:6px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(148,163,184,.22) !important;
    box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  .cclsp-widget.cclsp-open .cclsp-ux-tabs button{
    min-height:38px !important;
    border-radius:14px !important;
    font-size:11.5px !important;
    font-weight:950 !important;
    white-space:nowrap !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat .cclsp-body{
    display:flex !important;
    flex-direction:column !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat .cclsp-chat{
    flex:1 1 auto !important;
    min-height:180px !important;
    max-height:none !important;
    margin:0 0 10px !important;
    border-radius:22px !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-chat{
    min-height:0 !important;
    height:auto !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat .cclsp-form{
    flex:0 0 auto !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-form{
    position:sticky !important;
    bottom:0 !important;
    z-index:14 !important;
    margin:0 -2px !important;
    padding:8px 2px 0 !important;
    background:linear-gradient(180deg,rgba(248,250,252,0),#f8fafc 26%,#f8fafc 100%) !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell{
    grid-template-columns:42px 42px 42px minmax(0,1fr) 48px !important;
    gap:6px !important;
    padding:7px !important;
    border-radius:20px !important;
    background:#fff !important;
    border:1px solid rgba(148,163,184,.24) !important;
    box-shadow:0 14px 34px rgba(15,23,42,.10) !important;
  }

  .cclsp-widget.cclsp-open .cclsp-tool-btn{
    width:42px !important;
    height:42px !important;
    border-radius:15px !important;
    font-size:17px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell textarea{
    min-height:42px !important;
    height:42px !important;
    max-height:118px !important;
    font-size:16px !important;
    line-height:1.65 !important;
    padding:7px 3px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-send{
    width:48px !important;
    height:42px !important;
    border-radius:15px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-msg{
    max-width:90% !important;
    font-size:13px !important;
    line-height:1.8 !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-home .cclsp-simple-actions,
  .cclsp-widget.cclsp-open.cclsp-view-quick .cclsp-links{
    gap:10px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-simple-action,
  .cclsp-widget.cclsp-open .cclsp-brand-link,
  .cclsp-widget.cclsp-open .cclsp-link{
    min-height:58px !important;
    border-radius:18px !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-restore .cclsp-ticket-restore{
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-restore .cclsp-ticket-restore-box{
    max-height:none !important;
    overflow:visible !important;
  }
}

@media (max-width:420px){
  .cclsp-widget.cclsp-open .cclsp-composer-shell{
    grid-template-columns:38px 38px 38px minmax(0,1fr) 44px !important;
    gap:5px !important;
  }
  .cclsp-widget.cclsp-open .cclsp-tool-btn{
    width:38px !important;
    height:38px !important;
  }
  .cclsp-widget.cclsp-open .cclsp-send{
    width:44px !important;
    height:40px !important;
  }
}

/* ================================================================
   v2.9.35 - Mobile screenshot fixes
   ================================================================ */
@media (max-width:768px){
  .cclsp-view-chat:not(.cclsp-phone-locked) .cclsp-login-card{
    display:none !important;
  }

  .cclsp-phone-locked .cclsp-login-card{
    display:block !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat:not(.cclsp-chat-entered):not(.cclsp-phone-locked) .cclsp-chat{
    display:none !important;
  }

  .cclsp-widget.cclsp-open .cclsp-header{
    position:relative !important;
    top:auto !important;
    z-index:5 !important;
  }

  .cclsp-widget.cclsp-open .cclsp-ux-tabs{
    position:relative !important;
    top:auto !important;
    z-index:4 !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat:not(.cclsp-chat-entered):not(.cclsp-phone-locked) .cclsp-form{
    gap:9px !important;
  }

  .cclsp-widget.cclsp-open #cclspEmojiBtn{
    display:none !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell{
    grid-template-columns:42px 42px minmax(0,1fr) 48px !important;
    gap:6px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell textarea{
    min-width:0 !important;
    padding-right:6px !important;
    padding-left:6px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-result,
  .cclsp-widget.cclsp-open .cclsp-online-state{
    font-size:11px !important;
    padding:9px 10px !important;
    border-radius:16px !important;
    line-height:1.65 !important;
  }
}

@media (max-width:420px){
  .cclsp-widget.cclsp-open .cclsp-composer-shell{
    grid-template-columns:38px 38px minmax(0,1fr) 44px !important;
    gap:5px !important;
  }
}

/* ================================================================
   v2.9.36 - mobile header, login, restore, and composer fixes
   ================================================================ */
.cclsp-widget.cclsp-user-logged-in .cclsp-login-card,
.cclsp-widget.cclsp-user-logged-in .cclsp-contact-grid,
.cclsp-widget.cclsp-user-logged-in .cclsp-phone-verify,
.cclsp-widget.cclsp-user-logged-in .cclsp-identity-bar{
  display:none !important;
}

.cclsp-widget.cclsp-user-logged-in:not(.cclsp-reverify) #cclspPhoneRestorePhone,
.cclsp-widget.cclsp-user-logged-in:not(.cclsp-reverify) .cclsp-phone-restore-row,
.cclsp-widget.cclsp-user-logged-in:not(.cclsp-reverify) #cclspPhoneRestoreLoad,
.cclsp-widget.cclsp-user-logged-in:not(.cclsp-reverify) .cclsp-phone-restore-help{
  display:none !important;
}

.cclsp-widget.cclsp-user-logged-in:not(.cclsp-reverify) #cclspAccountRestoreLoad{
  display:block !important;
}

.cclsp-widget.cclsp-reverify #cclspPhoneRestorePhone{
  display:block !important;
}

.cclsp-widget.cclsp-reverify .cclsp-phone-restore-row{
  display:grid !important;
}

.cclsp-widget.cclsp-reverify #cclspPhoneRestoreLoad,
.cclsp-widget.cclsp-reverify .cclsp-phone-restore-help{
  display:block !important;
}

@media (max-width:768px){
  .cclsp-widget.cclsp-open .cclsp-header{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px !important;
    min-height:66px !important;
    overflow:visible !important;
  }

  .cclsp-widget.cclsp-open .cclsp-avatar{
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:14px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-head-text{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding:0 !important;
  }

  .cclsp-widget.cclsp-open .cclsp-head-text strong,
  .cclsp-widget.cclsp-open .cclsp-head-text small{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .cclsp-widget.cclsp-open .cclsp-header-close,
  .cclsp-widget.cclsp-open .cclsp-header-back,
  .cclsp-widget.cclsp-open .cclsp-theme-switch{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    transform:none !important;
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
    border:1px solid rgba(255,255,255,.72) !important;
    background:rgba(255,255,255,.76) !important;
    color:#1f2937 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 22px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  }

  .cclsp-widget.cclsp-open .cclsp-header-close:hover,
  .cclsp-widget.cclsp-open .cclsp-header-back:hover,
  .cclsp-widget.cclsp-open .cclsp-theme-switch:hover{
    transform:translateY(-1px) !important;
    background:rgba(255,255,255,.92) !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-home .cclsp-header-back{
    display:none !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-quick .cclsp-body{
    padding-bottom:34px !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-quick .cclsp-links,
  .cclsp-widget.cclsp-open .cclsp-brand-quick,
  .cclsp-widget.cclsp-open .cclsp-brand-quick > div{
    overflow:visible !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-quick .cclsp-links{
    padding-bottom:18px !important;
    margin-bottom:10px !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-quick .cclsp-link,
  .cclsp-widget.cclsp-open .cclsp-brand-link{
    margin-bottom:10px !important;
    isolation:isolate !important;
  }

  .cclsp-widget.cclsp-open.cclsp-view-chat:not(.cclsp-chat-entered) .cclsp-contact-grid,
  .cclsp-widget.cclsp-open.cclsp-phone-locked .cclsp-contact-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }

  .cclsp-widget.cclsp-open.cclsp-phone-locked .cclsp-phone-verify{
    display:flex !important;
  }

  .cclsp-widget.cclsp-open.cclsp-phone-locked .cclsp-phone-verify:not(.cclsp-code-sent) .cclsp-phone-verify-row{
    display:grid !important;
  }

  .cclsp-widget.cclsp-open .cclsp-phone-verify-row{
    grid-template-columns:minmax(0,1fr) 82px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-field label{
    font-size:10.5px !important;
    line-height:1.35 !important;
  }

  .cclsp-widget.cclsp-open .cclsp-field input,
  .cclsp-widget.cclsp-open .cclsp-department-field select{
    min-width:0 !important;
    height:44px !important;
    padding-right:10px !important;
    padding-left:10px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell{
    grid-template-columns:44px 44px minmax(0,1fr) 52px !important;
    align-items:stretch !important;
    gap:7px !important;
    padding:8px !important;
    border-radius:22px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-tool-btn{
    width:44px !important;
    height:52px !important;
    border-radius:16px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell textarea{
    height:52px !important;
    min-height:52px !important;
    max-height:128px !important;
    padding:10px 8px !important;
    line-height:1.75 !important;
  }

  .cclsp-widget.cclsp-open .cclsp-send{
    width:52px !important;
    height:52px !important;
    border-radius:16px !important;
  }
}

@media (max-width:380px){
  .cclsp-widget.cclsp-open .cclsp-header{
    gap:6px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-header-close,
  .cclsp-widget.cclsp-open .cclsp-header-back,
  .cclsp-widget.cclsp-open .cclsp-theme-switch{
    flex-basis:34px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-composer-shell{
    grid-template-columns:40px 40px minmax(0,1fr) 48px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-tool-btn{
    width:40px !important;
  }

  .cclsp-widget.cclsp-open .cclsp-send{
    width:48px !important;
  }
}

/* ================================================================
   v2.9.37 - always show OTP request on new chat
   ================================================================ */
.cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}

.cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify-head{
  order:0 !important;
}

.cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify-resend{
  order:1 !important;
  display:flex !important;
  width:100% !important;
  min-height:46px !important;
  height:auto !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, color-mix(in srgb,var(--cclsp-primary) 68%,#fff), var(--cclsp-primary)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--cclsp-primary) 18%,transparent) !important;
}

.cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify-row,
.cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify:not(.cclsp-code-sent) .cclsp-phone-verify-row{
  order:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 92px !important;
  gap:8px !important;
}

.cclsp-widget.cclsp-view-chat.cclsp-phone-locked #cclspPhoneVerifyCode{
  min-height:44px !important;
}

@media (max-width:420px){
  .cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify-row,
  .cclsp-widget.cclsp-view-chat.cclsp-phone-locked .cclsp-phone-verify:not(.cclsp-code-sent) .cclsp-phone-verify-row{
    grid-template-columns:minmax(0,1fr) 82px !important;
  }
}

/* ===== v2.9.41 site-theme dark compatibility + configurable floating offset ===== */
.cclsp-widget:not(.cclsp-open){
  bottom:var(--cclsp-bottom-offset,22px) !important;
}

@media (min-width:769px){
  .cclsp-widget.cclsp-open{
    bottom:var(--cclsp-bottom-offset,22px) !important;
  }
}

@media (max-width:768px){
  .cclsp-widget:not(.cclsp-open){
    bottom:var(--cclsp-bottom-offset,14px) !important;
  }

  .cclsp-widget:not(.cclsp-open) .cclsp-window{
    bottom:calc(var(--cclsp-bottom-offset,14px) + 66px) !important;
  }
}

.cclsp-widget.cclsp-site-light{
  --cclsp-glass:rgba(255,255,255,.88);
  --cclsp-border:rgba(255,255,255,.72);
  --cclsp-dark:#111827;
  --cclsp-muted:#64748b;
  --cclsp-ui-bg:rgba(255,255,255,.90);
  --cclsp-ui-bg-2:rgba(248,250,252,.86);
  --cclsp-ui-text:#111827;
  --cclsp-ui-muted:#64748b;
  --cclsp-ui-border:rgba(15,23,42,.10);
  --cclsp-ui-input:rgba(255,255,255,.94);
  --cclsp-ui-shadow:0 26px 80px rgba(15,23,42,.14);
  color-scheme:light;
}

.cclsp-widget.cclsp-site-dark{
  --cclsp-glass:rgba(15,23,42,.92);
  --cclsp-border:rgba(255,255,255,.13);
  --cclsp-dark:#f8fafc;
  --cclsp-muted:#cbd5e1;
  --cclsp-ui-bg:rgba(15,23,42,.92);
  --cclsp-ui-bg-2:rgba(30,41,59,.86);
  --cclsp-ui-text:#f8fafc;
  --cclsp-ui-muted:#cbd5e1;
  --cclsp-ui-border:rgba(255,255,255,.14);
  --cclsp-ui-input:rgba(2,6,23,.55);
  --cclsp-ui-shadow:0 30px 90px rgba(0,0,0,.46);
  color-scheme:dark;
}

.cclsp-site-dark .cclsp-hint,
.cclsp-site-dark .cclsp-panel,
.cclsp-site-dark .cclsp-header,
.cclsp-site-dark .cclsp-chat,
.cclsp-site-dark .cclsp-login-card,
.cclsp-site-dark .cclsp-contact-grid,
.cclsp-site-dark .cclsp-phone-verify,
.cclsp-site-dark .cclsp-ticket-restore-box,
.cclsp-site-dark .cclsp-composer-shell,
.cclsp-site-dark .cclsp-emoji-panel,
.cclsp-site-dark .cclsp-attach-preview,
.cclsp-site-dark .cclsp-rating-box,
.cclsp-site-dark .cclsp-typing,
.cclsp-site-dark .cclsp-identity-bar,
.cclsp-site-dark .cclsp-restore-identity,
.cclsp-site-dark .cclsp-simple-action:not(.cclsp-simple-action-primary),
.cclsp-site-dark .cclsp-brand-quick{
  background:var(--cclsp-ui-bg) !important;
  border-color:var(--cclsp-ui-border) !important;
  color:var(--cclsp-ui-text) !important;
  box-shadow:var(--cclsp-ui-shadow), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.cclsp-site-dark .cclsp-chat{
  background-color:rgba(15,23,42,.70) !important;
  background-image:linear-gradient(rgba(15,23,42,.62),rgba(15,23,42,.62)),var(--cclsp-chat-bg) !important;
}

.cclsp-site-dark .cclsp-footer,
.cclsp-site-dark .cclsp-ux-tabs,
.cclsp-site-dark .cclsp-phone-restore-list{
  background:rgba(2,6,23,.40) !important;
  border-color:var(--cclsp-ui-border) !important;
  color:var(--cclsp-ui-muted) !important;
}

.cclsp-site-dark .cclsp-head-text strong,
.cclsp-site-dark .cclsp-empty,
.cclsp-site-dark .cclsp-login-card > strong,
.cclsp-site-dark .cclsp-phone-verify-head strong,
.cclsp-site-dark .cclsp-simple-action b,
.cclsp-site-dark .cclsp-msg-admin > strong,
.cclsp-site-dark .cclsp-restore-identity-line,
.cclsp-site-dark .cclsp-identity-phone{
  color:var(--cclsp-ui-text) !important;
}

.cclsp-site-dark .cclsp-head-text small,
.cclsp-site-dark .cclsp-login-card > p,
.cclsp-site-dark .cclsp-phone-verify-head span,
.cclsp-site-dark .cclsp-simple-action small,
.cclsp-site-dark .cclsp-field label,
.cclsp-site-dark .cclsp-divider,
.cclsp-site-dark .cclsp-msg-chip{
  color:var(--cclsp-ui-muted) !important;
}

.cclsp-site-dark .cclsp-field input,
.cclsp-site-dark .cclsp-department-field select,
.cclsp-site-dark .cclsp-composer-shell textarea,
.cclsp-site-dark #cclspPhoneVerifyCode,
.cclsp-site-dark #cclspPhoneRestorePhone,
.cclsp-site-dark #cclspPhoneRestoreCode{
  background:var(--cclsp-ui-input) !important;
  border-color:var(--cclsp-ui-border) !important;
  color:var(--cclsp-ui-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.cclsp-site-dark .cclsp-field input::placeholder,
.cclsp-site-dark .cclsp-composer-shell textarea::placeholder,
.cclsp-site-dark #cclspPhoneVerifyCode::placeholder,
.cclsp-site-dark #cclspPhoneRestorePhone::placeholder,
.cclsp-site-dark #cclspPhoneRestoreCode::placeholder{
  color:rgba(203,213,225,.76) !important;
}

.cclsp-site-dark .cclsp-tool-btn,
.cclsp-site-dark .cclsp-header-close,
.cclsp-site-dark .cclsp-header-back,
.cclsp-site-dark .cclsp-theme-switch,
.cclsp-site-dark .cclsp-change-number,
.cclsp-site-dark .cclsp-ticket-restore-toggle,
.cclsp-site-dark .cclsp-emoji-panel button,
.cclsp-site-dark .cclsp-login-step{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.13) !important;
  color:#e2e8f0 !important;
}

.cclsp-site-dark .cclsp-msg-admin{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#f8fafc !important;
}

.cclsp-site-dark .cclsp-result.cclsp-success,
.cclsp-site-dark .cclsp-restore-msg-ok{
  background:rgba(20,83,45,.88) !important;
  border-color:rgba(74,222,128,.30) !important;
  color:#dcfce7 !important;
}

.cclsp-site-dark .cclsp-result.cclsp-error,
.cclsp-site-dark .cclsp-restore-msg-error{
  background:rgba(127,29,29,.88) !important;
  border-color:rgba(248,113,113,.30) !important;
  color:#fee2e2 !important;
}

.cclsp-site-light .cclsp-hint,
.cclsp-site-light .cclsp-panel,
.cclsp-site-light .cclsp-header,
.cclsp-site-light .cclsp-chat,
.cclsp-site-light .cclsp-login-card,
.cclsp-site-light .cclsp-phone-verify,
.cclsp-site-light .cclsp-ticket-restore-box,
.cclsp-site-light .cclsp-composer-shell,
.cclsp-site-light .cclsp-emoji-panel,
.cclsp-site-light .cclsp-attach-preview,
.cclsp-site-light .cclsp-rating-box,
.cclsp-site-light .cclsp-typing{
  background:var(--cclsp-ui-bg) !important;
  border-color:var(--cclsp-ui-border) !important;
  color:var(--cclsp-ui-text) !important;
}

.cclsp-site-light .cclsp-msg-admin{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(15,23,42,.08) !important;
  color:#111827 !important;
}

.cclsp-site-light .cclsp-chat{
  background-color:rgba(255,255,255,.58) !important;
  background-image:linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38)),var(--cclsp-chat-bg) !important;
}

.cclsp-site-light .cclsp-field input,
.cclsp-site-light .cclsp-department-field select,
.cclsp-site-light .cclsp-composer-shell textarea,
.cclsp-site-light #cclspPhoneVerifyCode,
.cclsp-site-light #cclspPhoneRestorePhone,
.cclsp-site-light #cclspPhoneRestoreCode{
  background:var(--cclsp-ui-input) !important;
  border-color:var(--cclsp-ui-border) !important;
  color:#111827 !important;
}

/* ===== v2.9.42 force the popup shell itself to become dark on dark websites ===== */
.cclsp-widget.cclsp-site-dark.cclsp-open::before{
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb,var(--cclsp-primary) 12%,transparent), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,.08), transparent 36%),
    linear-gradient(180deg, rgba(2,6,23,.70), rgba(2,6,23,.50)) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-window{
  background:#020617 !important;
  box-shadow:0 30px 92px rgba(0,0,0,.54) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-panel{
  background:
    radial-gradient(circle at top right, color-mix(in srgb,var(--cclsp-primary) 10%,transparent), transparent 40%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.07), transparent 36%),
    linear-gradient(145deg, rgba(2,6,23,.98), rgba(15,23,42,.96)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-panel::before{
  background:
    radial-gradient(circle at top right, color-mix(in srgb,var(--cclsp-primary) 9%,transparent), transparent 38%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.06), transparent 35%),
    rgba(2,6,23,.94) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-body{
  background:linear-gradient(180deg, rgba(15,23,42,.82), rgba(2,6,23,.92)) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-header,
.cclsp-widget.cclsp-site-dark .cclsp-footer{
  background:rgba(2,6,23,.78) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* ===== v2.9.43 dark composer/message send area ===== */
.cclsp-widget.cclsp-site-dark.cclsp-open.cclsp-view-chat .cclsp-form,
.cclsp-widget.cclsp-site-dark.cclsp-open.cclsp-view-chat.cclsp-chat-entered:not(.cclsp-phone-locked) .cclsp-form,
.cclsp-widget.cclsp-site-dark.cclsp-open.cclsp-view-chat:not(.cclsp-chat-entered):not(.cclsp-phone-locked) .cclsp-form{
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(2,6,23,.94) 24%, rgba(2,6,23,.98) 100%) !important;
  border-color:rgba(255,255,255,.10) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-composer-shell,
.cclsp-widget.cclsp-site-dark.cclsp-open .cclsp-composer-shell{
  background:linear-gradient(135deg, rgba(15,23,42,.98), rgba(2,6,23,.92)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-composer-shell textarea,
.cclsp-widget.cclsp-site-dark.cclsp-open .cclsp-composer-shell textarea{
  background:rgba(255,255,255,.045) !important;
  color:#f8fafc !important;
  border-radius:14px !important;
  padding-right:10px !important;
  padding-left:10px !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-composer-shell textarea::placeholder{
  color:rgba(203,213,225,.72) !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-tool-btn,
.cclsp-widget.cclsp-site-dark.cclsp-open .cclsp-tool-btn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#e2e8f0 !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-tool-btn:hover,
.cclsp-widget.cclsp-site-dark .cclsp-tool-btn.cclsp-active{
  background:rgba(255,255,255,.13) !important;
  color:#fff !important;
}

.cclsp-widget.cclsp-site-dark .cclsp-attach-preview,
.cclsp-widget.cclsp-site-dark .cclsp-recording-row,
.cclsp-widget.cclsp-site-dark .cclsp-emoji-panel{
  background:rgba(2,6,23,.86) !important;
  border-color:rgba(255,255,255,.13) !important;
  color:#e2e8f0 !important;
}