:root {
  --gcw-bg-color: #7f1fcf;
  --gcw-text-color: #ffffff;
  --gcw-text-size: 14px;
  --gcw-offset: 30px;
}
:root {
  /* Icon size & background */
  --gcw-icon-size:          80px;
  --gcw-icon-bg-color:      #ffffff;
  --gcw-icon-border-color:  var(--gcw-bg-color);
}
/* Welcome text above the icon */
#gcw-welcome-text {
  background:      purple;
  color:           var(--gcw-text-color);
  font-size:       16px;
  font-weight:     bold;
  text-align:      center;
  padding:         8px 12px;
  border-radius:   4px;
  box-shadow:      0 2px 8px rgba(0,0,0,0.3);
  margin-bottom:   8px;
  max-width:       var(--gcw-icon-size);
  margin-left:     auto;
  margin-right:    auto;
}

#gcw-state-icon {
  display: block;
}
#gcw-state-form {
  display: none;
  background: var(--gcw-bg-color) !important;
  color: var(--gcw-text-color) !important;
  font-size: var(--gcw-text-size) !important;
  padding: 10px;
  border-radius: 6px;
}

:root {
  --gcw-bg-color: #7f1fcf;
  --gcw-text-color: #ffffff;
  --gcw-text-size: 14px;
  --gcw-top-offset: 30px;
  --gcw-bottom-offset: 30px;
}
/* assets/style.css */
/* Force widget to bottom-right */
#gcw-container {
  position: fixed !important;
  bottom: var(--gcw-bottom-offset) !important;
  right:  var(--gcw-bottom-offset) !important;
  top:    auto !important;
  left:   auto !important;
  z-index: 9999;
}


#gcw-state-icon {
  display: none;
  cursor: pointer;
}
/* Make the wrapper a perfect circle with overflow hidden */
.chat-icon-wrapper {
  width:           var(--gcw-icon-size);
  height:          var(--gcw-icon-size);
  background:      var(--gcw-icon-bg-color);
  border:          2px solid var(--gcw-icon-border-color);
  border-radius:   50%;
  overflow:        hidden;
  box-shadow:      0 4px 12px rgba(0,0,0,0.25);
  transition:      transform 0.3s ease, box-shadow 0.3s ease;
  cursor:          pointer;
  display:         inline-block;
}

/* Scale-up on hover */
.chat-icon-wrapper:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Make the IMG fill the circle perfectly */
.chat-icon {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  display:       block;
}


#gcw-state-form {
  display: none;
  background: var(--gcw-bg-color);
  color: var(--gcw-text-color);
  font-size: var(--gcw-text-size);
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  position: relative;
}
#gcw-state-form input {
  width: 90%;
  margin: 5px auto;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  background: #fff;
  color: #000;
  height: 1.5em;
}
#gcw-state-form button {
  background: var(--gcw-text-color);
  color: var(--gcw-bg-color);
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#gcw-iframe-box {
  display: none;
  position: fixed;
  bottom: var(--gcw-bottom-offset);
  right: var(--gcw-bottom-offset);
  width: 350px;
  height: 450px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  overflow: auto;
  z-index: 9998;
}
#gcw-iframe-header {
  height: 40px;
  background: var(--gcw-bg-color);
  color: var(--gcw-text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
#gcw-iframe-header button {
  background: transparent;
  border: none;
  color: var(--gcw-text-color);
  cursor: pointer;
  margin-left: 8px;
}
#gcw-iframe-header button#gcw-maximize {
  font-size: 16px;
}
#gcw-iframe-header button#gcw-close {
  font-size: 20px;
}
#gcw-iframe-body {
  position: relative;
  height: calc(100% - 40px);
}
#gcw-iframe-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}
#gcw-iframe-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--gcw-bg-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
#gcw-iframe-msg {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-size: 14px;
}
#gcw-wp-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #25D366;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* assets/style.css */
#gcw-iframe-box.gcw-maximized {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
}