/* DR-COM chatbot: all selectors prefixed to avoid conflicts with Bootstrap/website styles. */
#drcom-chatbot, #drcom-chatbot * {
  box-sizing: border-box
}
#drcom-chatbot {
  --dc-blue: #1597cd;
  --dc-light: #eef8fc;
  --dc-border: #8dd1f2;
  --dc-ink: #172f3e;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dc-ink);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000
}
#drcom-chatbot button, #drcom-chatbot input, #drcom-chatbot select {
  font: inherit
}
#drcom-chatbot button {
  cursor: pointer
}
#drcom-chatbot button:focus-visible, #drcom-chatbot input:focus-visible, #drcom-chatbot select:focus-visible {
  outline: 3px solid #77c7f4;
  outline-offset: 2px
}
#drcom-chatbot .dc-launch {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background: var(--dc-blue);
  color: white;
  box-shadow: 0 8px 25px #174c6b46;
  font-size: 28px;
  display: grid;
  place-items: center;
  margin-left: auto
}
#drcom-chatbot .dc-panel {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: min(410px, calc(100vw - 24px));
  height: min(640px, calc(100dvh - 110px));
  border: 1px solid #d9e8ef;
  border-radius: 23px;
  background: white;
  box-shadow: 0 18px 48px #17354b40;
  overflow: hidden;
  display: flex;
  flex-direction: column
}
#drcom-chatbot .dc-panel[hidden], #drcom-chatbot .dc-launch[hidden] {
  display: none !important
}
#drcom-chatbot .dc-header {
  background: linear-gradient(100deg, #0e9dd2, #178dbb);
  color: white;
  padding: 17px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0
}
#drcom-chatbot .dc-avatar {
  display: grid;
  place-items: center;
  background: white;
  color: var(--dc-blue);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 22px
}
#drcom-chatbot .dc-heading {
  flex: 1;
  min-width: 0
}
#drcom-chatbot .dc-heading strong {
  display: block;
  font-size: 17px
}
#drcom-chatbot .dc-heading small {
  display: block;
  font-size: 12px;
  opacity: .95
}
#drcom-chatbot .dc-close {
  border: 0;
  background: transparent;
  color: white;
  font-size: 25px;
  padding: 2px 5px
}
#drcom-chatbot .dc-content {
  padding: 7px 17px;
  overflow: auto;
  flex: 1;
  min-height: 0
}
#drcom-chatbot .dc-breadcrumb {
  font-size: 11px;
  background: #e8f6fb;
  border-radius: 12px;
  padding: 7px 10px;
  color: #1a394e;
  overflow-wrap: anywhere;
  margin-bottom: 10px
}
#drcom-chatbot .dc-assistant {
  background: #f3f3f3;
  border-radius: 15px;
  padding: 7px 14px;
  margin-bottom: 10px
}
#drcom-chatbot .dc-assistant small {
  display: block;
  color: #1a394e;
  margin-bottom: 5px;
  font-size: 12px
}
#drcom-chatbot .dc-assistant p {
  margin: 0;
  font-size: 13px;
  color: #19252d
}
#drcom-chatbot .dc-label {
  font-size: 12px;
  color: #60727d;
  letter-spacing: .055em;
  font-weight: 700;
  margin: 0 0 10px
}
#drcom-chatbot .dc-options {
  display: grid;
  gap: 9px
}
#drcom-chatbot .dc-option {
  width: 100%;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  color: #142c3a;
  text-align: left;
  padding: 5px 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-weight: 600
}
#drcom-chatbot .dc-option:hover {
  background: #eef9fe;
  border-color: #1399d3
}
#drcom-chatbot .dc-chevron {
  color: var(--dc-blue);
  font-size: 20px
}
#drcom-chatbot .dc-footer {
  border-top: 1px solid #eff2f5;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 7px 16px;
  background: #fff;
  flex-shrink: 0
}
#drcom-chatbot .dc-nav {
  border: 0;
  background: white;
  color: #485b66;
  padding: 7px 4px;
  font-size: 13px
}
#drcom-chatbot .dc-nav:disabled {
  opacity: .35;
  cursor: default
}
#drcom-chatbot .dc-form {
  display: grid;
  gap: 12px
}
#drcom-chatbot .dc-field label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px
}
#drcom-chatbot .dc-field input, #drcom-chatbot .dc-field select {
  border: 1px solid #d3e0e7;
  border-radius: 9px;
  padding: 11px;
  width: 100%;
  height: 43px;
  background: #fff;
  color: #193345;
  font-size: 13px
}
#drcom-chatbot .dc-phone {
  display: flex;
  gap: 6px
}
#drcom-chatbot .dc-phone input {
  min-width: 0;
  flex: 1
}
#drcom-chatbot .dc-phone button {
  white-space: nowrap;
  border: 0;
  color: white;
  background: var(--dc-blue);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 12px
}
#drcom-chatbot .dc-phone button:disabled, #drcom-chatbot .dc-submit:disabled {
  opacity: .6;
  cursor: default
}
#drcom-chatbot .dc-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #4a5f69
}
#drcom-chatbot .dc-consent input {
  margin-top: 3px;
  accent-color: var(--dc-blue)
}
#drcom-chatbot .dc-submit {
  background: var(--dc-blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: bold;
  width: 100%
}
#drcom-chatbot .dc-message {
  font-size: 12px;
  border-radius: 8px;
  padding: 9px;
  background: #e5f8ea;
  color: #14552d
}
#drcom-chatbot .dc-message.dc-error {
  background: #fff0ee;
  color: #a02a20
}
#drcom-chatbot .dc-message[hidden], #drcom-chatbot .dc-otp-wrap[hidden] {
  display: none
}
#drcom-chatbot .dc-honeypot {
  position: absolute !important;
  left: -10000px !important;
  opacity: 0
}
#drcom-chatbot .dc-muted {
  font-size: 12px;
  color: #617681
}

/* V6: floating icon replaces WATI WhatsApp. Scroll-up button is untouched. */
#drcom-chatbot {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 20px !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  width: 50px;
  height: 50px;
  isolation: isolate;
  pointer-events: none;
  z-index: 2147483000 !important;
}
#drcom-chatbot .dc-launch {
  width: 50px !important;
  height: 50px !important;
  display: grid;
  place-items: center;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  position: relative;
  pointer-events: auto;
}
#drcom-chatbot .dc-launch-icon {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.2));
}
#drcom-chatbot .dc-panel {
  pointer-events: auto;
  right: 0;
  bottom: 76px;
  width: min(410px, calc(100vw - 24px));
  height: min(640px, calc(100dvh - 115px));
  max-height: calc(100vh - 115px);
}
#drcom-chatbot .dc-avatar img { width: 28px; height: 28px; object-fit: contain; }
@media screen and (max-width: 767px) {
  #drcom-chatbot {
    right: 20px !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #drcom-chatbot .dc-panel:not([hidden]) {
    position: fixed !important;
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: min(610px, calc(100dvh - 110px - env(safe-area-inset-bottom, 0px))) !important;
    max-height: calc(100vh - 110px) !important;
    border-radius: 17px;
  }
  #drcom-chatbot .dc-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }
  #drcom-chatbot .dc-header { padding: 13px 14px; }
  #drcom-chatbot .dc-footer { padding: 9px 14px; }
}
@media screen and (max-height: 450px) and (orientation: landscape) {
  #drcom-chatbot .dc-panel:not([hidden]) {
    height: calc(100dvh - 95px) !important;
    bottom: 84px !important;
  }
}

/* V8: multiselect solution options (scoped to chatbot only). */
#drcom-chatbot .dc-multi-option {display:flex;align-items:center;gap:12px;width:100%;min-height:47px;padding:10px 13px;border:1px solid var(--dc-border);border-radius:12px;background:#fff;color:#142c3a;font-size:14px;font-weight:600;cursor:pointer;margin:0;}
#drcom-chatbot .dc-multi-option:has(input:checked){background:#eaf8fd;border-color:#1597cd;}
#drcom-chatbot .dc-multi-option input {width:18px;height:18px;flex:none;accent-color:#1597cd;margin:0;}
#drcom-chatbot .dc-multi-option:focus-within {outline:2px solid #77c7f4;outline-offset:2px;}
#drcom-chatbot .dc-multi-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:15px;}
#drcom-chatbot .dc-multi-actions .dc-continue{width:auto;min-width:135px;}
#drcom-chatbot .dc-continue:disabled{opacity:.45;cursor:not-allowed;}
