/* ===== DEEPAM INFOTECH CHATBOT: CSS (v3) =====
   Uses your brand variables with fallbacks. All classes are prefixed dc-. */

.dc-widget, .dc-toggle, .dc-promo {
  --dc-green: var(--brand-green, #1a7f37);
  --dc-green-dark: var(--brand-green-dark, #125826);
  --dc-green-bright: var(--brand-green-bright, #4ade80);
  --dc-subtle: var(--brand-green-subtle, #f0f7f2);
  --dc-border: var(--border-light, #e8ede9);
  --dc-dark: var(--dark-bg, #0f1712);
  --dc-text: var(--text-primary, #19201d);
  --dc-text2: var(--text-secondary, #57655c);
  --dc-light: var(--text-light, #89978e);
  --dc-head: var(--font-heading, "Space Grotesk", sans-serif);
  --dc-body: var(--font-body, "Outfit", sans-serif);
}

/* =========================================================
   LAUNCHER: pill with chat icon + spinning gradient border
   ========================================================= */
@property --dc-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.dc-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 1050;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 7px 20px 7px 7px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--dc-text); isolation: isolate;
  font: 600 .92rem/1 var(--dc-head);
  box-shadow: 0 14px 34px rgba(15,23,18,.22);
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.dc-toggle::before {            /* spinning gradient border */
  content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--dc-a), var(--dc-green) 0%, var(--dc-green-bright) 25%, transparent 45%, transparent 70%, var(--dc-green) 100%);
  animation: dcSpin 3.2s linear infinite;
}
.dc-toggle::after {             /* white face over the border */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff;
}
@keyframes dcSpin { to { --dc-a: 360deg; } }

.dc-t-logo {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--dc-green), var(--dc-green-dark));
  animation: dcBeat 3s ease-in-out infinite;
}
.dc-t-logo svg { width: 22px; height: 22px; fill: #fff; display: block; }
@keyframes dcBeat { 0%,86%,100% { transform: scale(1); } 91% { transform: scale(1.14); } 96% { transform: scale(.96); } }

.dc-t-label { white-space: nowrap; }
.dc-t-close { display: none; width: 100%; height: 100%; place-items: center; }
.dc-t-close svg { width: 22px; height: 22px; fill: #fff; }

/* OPEN STATE: solid green circle, no white ring */
.dc-toggle.dc-open {
  width: 58px; height: 58px; padding: 0; gap: 0;
  background: linear-gradient(135deg, var(--dc-green), var(--dc-green-dark));
  box-shadow: 0 10px 26px rgba(26,127,55,.4);
}
.dc-toggle.dc-open::before,
.dc-toggle.dc-open::after { display: none; }
.dc-toggle.dc-open .dc-t-logo, .dc-toggle.dc-open .dc-t-label { display: none; }
.dc-toggle.dc-open .dc-t-close { display: grid; animation: dcPop .35s cubic-bezier(.16,1,.3,1); }
@keyframes dcPop { from { transform: scale(.4) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }

@media (hover: hover) and (pointer: fine) {
  .dc-toggle:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(26,127,55,.35); }
}
.dc-toggle:focus-visible { outline: 3px solid var(--dc-green-bright); outline-offset: 4px; }

.dc-badge {
  position: absolute; top: -6px; left: -2px; z-index: 3;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #ef4444; color: #fff; font: 700 11px/20px var(--dc-body); text-align: center;
  border: 2px solid #fff; animation: dcBadge 2s ease-in-out infinite;
}
.dc-badge.dc-hidden { display: none; }
@keyframes dcBadge { 50% { transform: scale(1.18); } }

/* ---------- Promo bubble ---------- */
.dc-promo {
  position: fixed; right: 20px; bottom: 90px; z-index: 1049; max-width: 270px;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
  border-radius: 14px 14px 4px 14px; background: var(--dc-dark); color: rgba(255,255,255,.88);
  font: 400 .86rem/1.4 var(--dc-body); box-shadow: 0 14px 35px rgba(15,23,18,.3);
  animation: dcSlideUp .7s cubic-bezier(.16,1,.3,1) both .6s;
  transition: opacity .3s ease, transform .3s ease;
}
.dc-promo i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--dc-green-bright); box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: dcRipple 1.8s infinite; }
.dc-promo span { color: #fff; font-weight: 600; }
.dc-promo.dc-gone { opacity: 0; transform: translateY(10px); pointer-events: none; }
@keyframes dcSlideUp { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes dcRipple { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* =========================================================
   WIDGET: circular reveal from the launcher
   ========================================================= */
.dc-widget {
  position: fixed; right: 20px; bottom: 94px; z-index: 1060;
  width: 390px; max-width: calc(100vw - 24px); height: min(650px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 24px; border: 1px solid var(--dc-border);
  box-shadow: 0 30px 80px rgba(15,23,18,.3);
  font-family: var(--dc-body); color: var(--dc-text);
  visibility: hidden; opacity: 0;
  clip-path: circle(0 at calc(100% - 44px) calc(100% + 48px));
  transition: clip-path .65s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility 0s linear .65s;
}
.dc-widget.dc-open {
  visibility: visible; opacity: 1;
  clip-path: circle(230% at calc(100% - 44px) calc(100% + 48px));
  transition: clip-path .75s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility 0s;
}

/* ---------- Header (light, with logo) ---------- */
.dc-header { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; background: #fff; }
.dc-header::after {                     /* animated accent line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--dc-green), var(--dc-green-bright), var(--dc-green-dark), var(--dc-green));
  background-size: 300% 100%; animation: dcFlow 5s linear infinite;
}
@keyframes dcFlow { to { background-position: 300% 0; } }
.dc-logo-pill {
  flex: 0 0 auto; display: flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  background: var(--dc-subtle); border: 1px solid rgba(26,127,55,.16);
}
.dc-logo-pill img { display: block; height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.dc-info { flex: 1; min-width: 0; text-align: right; }
.dc-name { font: 600 .9rem/1.2 var(--dc-head); color: var(--dc-text); }
.dc-sub { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 3px; font-size: .76rem; color: var(--dc-text2); }
.dc-live { width: 8px; height: 8px; border-radius: 50%; background: var(--dc-green); animation: dcRipple 1.8s infinite; }
.dc-close {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--dc-subtle); color: var(--dc-green);
  transition: background .2s ease, color .2s ease, transform .25s ease;
}
.dc-close svg { width: 20px; height: 20px; }
.dc-close:hover { background: var(--dc-green); color: #fff; transform: translateY(2px); }

/* ---------- Numbered stepper ---------- */
.dc-steps { display: flex; padding: 14px 18px 10px; background: #fff; border-bottom: 1px solid var(--dc-border); }
.dc-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600; color: var(--dc-light); }
.dc-step i {
  position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .7rem/1 var(--dc-body); font-style: normal; background: #fff; color: var(--dc-light);
  border: 2px solid var(--dc-border); transition: all .35s ease;
}
.dc-step:not(:last-child)::after {
  content: ""; position: absolute; top: 11px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: var(--dc-border);
  transition: background .4s ease;
}
.dc-step.dc-active { color: var(--dc-green); }
.dc-step.dc-active i { border-color: var(--dc-green); color: var(--dc-green); box-shadow: 0 0 0 4px rgba(26,127,55,.14); animation: dcBeat 2.4s ease-in-out infinite; }
.dc-step.dc-done { color: var(--dc-text2); }
.dc-step.dc-done i { background: var(--dc-green); border-color: var(--dc-green); font-size: 0; }
.dc-step.dc-done i::before { content: "✓"; color: #fff; font-size: .72rem; }
.dc-step.dc-done::after { background: var(--dc-green); }

/* ---------- Messages ---------- */
.dc-messages {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px;
  background: #f7faf8 radial-gradient(rgba(26,127,55,.07) 1px, transparent 1.4px) 0 0 / 18px 18px;
  scroll-behavior: smooth; scrollbar-width: thin;
}
.dc-msg { display: flex; flex-direction: column; max-width: 90%; }
.dc-msg.dc-bot { align-self: flex-start; align-items: flex-start; animation: dcInLeft .5s cubic-bezier(.16,1,.3,1) both; }
.dc-msg.dc-user { align-self: flex-end; align-items: flex-end; animation: dcInRight .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes dcInLeft { from { opacity: 0; transform: translateX(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dcInRight { from { opacity: 0; transform: translateX(18px) scale(.96); } to { opacity: 1; transform: none; } }

.dc-meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 5px 2px; font-size: .72rem; color: var(--dc-light); }
.dc-meta b { color: var(--dc-text2); font-weight: 600; }
/* Bot avatar: wide logo shown in a small pill so it never looks squashed */
.dc-av {
  height: 24px; width: auto; max-width: 72px; padding: 3px 8px; border-radius: 999px; object-fit: contain;
  background: #fff; border: 1px solid rgba(26,127,55,.2);
}

.dc-bubble {
  position: relative; padding: 12px 15px; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere;
}
.dc-bot .dc-bubble {
  background: #fff; color: var(--dc-text); border: 1px solid var(--dc-border); border-left: 4px solid var(--dc-green);
  border-radius: 6px 18px 18px 18px; box-shadow: 0 6px 18px rgba(15,23,18,.05);
}
.dc-user .dc-bubble {
  background: var(--dc-dark); color: #fff; border-radius: 18px 6px 18px 18px;
  box-shadow: 0 8px 20px rgba(15,23,18,.2);
}
.dc-bubble a { color: var(--dc-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dc-time { font-size: .68rem; color: var(--dc-light); padding: 3px 4px 0; }

/* Typing: wave bars */
.dc-typing { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 2px; }
.dc-typing span { width: 4px; height: 100%; border-radius: 4px; background: var(--dc-green); transform: scaleY(.3); animation: dcWave 1s ease-in-out infinite; }
.dc-typing span:nth-child(2) { animation-delay: .12s; }
.dc-typing span:nth-child(3) { animation-delay: .24s; }
.dc-typing span:nth-child(4) { animation-delay: .36s; }
@keyframes dcWave { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- Service tiles (2 columns) ---------- */
.dc-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dc-svc-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--dc-border); border-radius: 16px; background: #fff;
  opacity: 0; animation: dcTile .5s cubic-bezier(.16,1,.3,1) forwards;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.dc-svc-card:nth-child(1) { animation-delay: .05s; } .dc-svc-card:nth-child(2) { animation-delay: .1s; }
.dc-svc-card:nth-child(3) { animation-delay: .15s; } .dc-svc-card:nth-child(4) { animation-delay: .2s; }
.dc-svc-card:nth-child(5) { animation-delay: .25s; } .dc-svc-card:nth-child(6) { animation-delay: .3s; }
.dc-svc-card:nth-child(7) { animation-delay: .35s; } .dc-svc-card:nth-child(8) { animation-delay: .4s; }
.dc-svc-card:nth-child(9) { animation-delay: .45s; }
.dc-svc-card:last-child { grid-column: 1 / -1; }
@keyframes dcTile { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.dc-svc-icon { width: 36px; height: 36px; border-radius: 12px 12px 0 12px; display: grid; place-items: center; font-size: 18px; background: var(--dc-subtle); transition: border-radius .35s ease, background .25s ease; }
.dc-svc-name { font: 600 .84rem/1.25 var(--dc-head); color: var(--dc-text); }
.dc-svc-desc { margin-top: 3px; font-size: .72rem; line-height: 1.35; color: var(--dc-text2); }
.dc-svc-arrow { position: absolute; top: 10px; right: 12px; color: var(--dc-green); font-size: 1.1rem; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.dc-svc-card:hover, .dc-svc-card:focus-visible { transform: translateY(-4px); border-color: var(--dc-green); box-shadow: 0 14px 28px rgba(26,127,55,.16); outline: none; }
.dc-svc-card:hover .dc-svc-arrow, .dc-svc-card:focus-visible .dc-svc-arrow { opacity: 1; transform: none; }
.dc-svc-card:hover .dc-svc-icon { border-radius: 12px 0 12px 12px; background: rgba(26,127,55,.14); }

/* ---------- Option chips ---------- */
.dc-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dc-opt {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; text-align: center;
  border: 1.5px solid rgba(26,127,55,.3); background: #fff; color: var(--dc-green-dark);
  font: 500 .83rem/1.3 var(--dc-body); opacity: 0; animation: dcTile .45s cubic-bezier(.16,1,.3,1) forwards;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.dc-opt:nth-child(2) { animation-delay: .06s; } .dc-opt:nth-child(3) { animation-delay: .12s; }
.dc-opt:nth-child(4) { animation-delay: .18s; } .dc-opt:nth-child(5) { animation-delay: .24s; }
.dc-opt:nth-child(6) { animation-delay: .3s; } .dc-opt:nth-child(7) { animation-delay: .36s; }
.dc-opt:hover:not(:disabled) { background: var(--dc-green); border-color: var(--dc-green); color: #fff; transform: translateY(-2px); }
.dc-opt:disabled { opacity: .45 !important; cursor: default; }

/* ---------- Contact action buttons ---------- */
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dc-action {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px;
  font: 600 .82rem/1 var(--dc-head); color: #fff !important; text-decoration: none !important;
  background: var(--dc-green); box-shadow: 0 8px 20px rgba(26,127,55,.28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.dc-action:hover { transform: translateY(-2px); background: var(--dc-green-dark); }
.dc-action.dc-wa { background: #25d366; box-shadow: 0 8px 20px rgba(37,211,102,.3); }
.dc-action.dc-wa:hover { background: #1ebe5b; }
.dc-action.dc-alt { background: #fff; color: var(--dc-green) !important; border: 1.5px solid rgba(26,127,55,.3); box-shadow: none; }
.dc-action.dc-alt:hover { background: var(--dc-subtle); }

/* ---------- Quick replies ---------- */
.dc-qr-row { display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; background: #f7faf8; }
.dc-qr-row:not(:empty) { padding-top: 8px; padding-bottom: 12px; border-top: 1px dashed var(--dc-border); }
.dc-qr-row::-webkit-scrollbar { display: none; }
.dc-qr {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--dc-dark); background: transparent; color: var(--dc-dark);
  font: 600 .78rem/1 var(--dc-body); animation: dcTile .4s both;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.dc-qr:hover { background: var(--dc-dark); color: #fff; transform: translateY(-2px); }

/* ---------- Hint + input ---------- */
.dc-hint { display: none; padding: 8px 18px 0; font-size: .78rem; color: #dc2626; background: #fff; }
.dc-inputwrap { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px 8px; background: #fff; border-top: 1px solid var(--dc-border); }
#dc-input {
  flex: 1; resize: none; max-height: 96px; padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid var(--dc-border); background: #f7faf8; color: var(--dc-text);
  font: 400 .92rem/1.4 var(--dc-body); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#dc-input:focus { outline: none; border-color: var(--dc-green); background: #fff; box-shadow: 0 0 0 4px rgba(26,127,55,.12); }
#dc-send {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--dc-dark); box-shadow: 0 8px 20px rgba(15,23,18,.25);
  transition: background .25s ease, transform .25s ease, opacity .2s ease;
}
#dc-send svg { width: 20px; height: 20px; fill: #fff; transition: transform .3s ease; }
#dc-send:hover:not(:disabled) { background: var(--dc-green); }
#dc-send:hover:not(:disabled) svg { transform: translateX(3px) rotate(-12deg); }
#dc-send:disabled { opacity: .45; cursor: not-allowed; }
.dc-privacy { padding: 0 14px 10px; background: #fff; text-align: center; font-size: .68rem; color: var(--dc-light); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .dc-toggle { right: 14px; bottom: 14px; height: 54px; }
  .dc-toggle.dc-open { width: 54px; height: 54px; }
  .dc-promo { right: 14px; bottom: 80px; }
  .dc-widget {
    right: 10px; left: 10px; width: auto; max-width: none; bottom: 80px; height: calc(100vh - 100px); border-radius: 22px;
    clip-path: circle(0 at calc(100% - 40px) calc(100% + 44px));
  }
  .dc-widget.dc-open { clip-path: circle(230% at calc(100% - 40px) calc(100% + 44px)); }
}
@media (max-width: 575px) {
  .dc-t-label { display: none; }
  .dc-toggle { padding: 7px; }
  .dc-logo-pill img { height: 26px; max-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-toggle::before, .dc-t-logo, .dc-badge, .dc-promo, .dc-promo i, .dc-live, .dc-header::after,
  .dc-step.dc-active i, .dc-typing span { animation: none !important; }
  .dc-widget, .dc-widget.dc-open { transition: opacity .2s ease, visibility 0s; clip-path: none; }
  .dc-msg, .dc-svc-card, .dc-opt, .dc-qr { animation: none !important; opacity: 1; }
}