/* Widget */
#voicebot-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999999;
  width: 340px;
  font-family: Arial, sans-serif;
}

/* Button Row */
#voicebot-buttons-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

/* Mic + Stop buttons */
#voicebot-mic,
#voicebot-stop {
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s, transform 0.08s;
}
#voicebot-mic:active, #voicebot-stop:active { transform: translateY(1px); }

/* Chatbox */
#voicebot-chatbox {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
#voicebot-chat-header {
  background: #0073aa;
  color: #fff;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* CLOSE BUTTON */
#voicebot-close {
  float: right;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-top: -2px;
}

/* Status line */
#voicebot-output-status {
  font-size: 13px;
  margin-bottom: 6px;
  text-align: center;
  color: #666;
}

/* Chat body */
#voicebot-chat-body {
  height: 340px;
  overflow-y: auto;
  padding: 12px;
  background: #f4f4f4;
}

/* Chat bubbles */
.voicebot-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.voicebot-user {
  background: #0073aa;
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.voicebot-bot {
  background: #ffffff;
  color: #333;
  margin-right: auto;
  border: 1px solid #e6e6e6;
  border-bottom-left-radius: 4px;
}

/* Small style for inline italics */
.voicebot-msg em { color: #666; font-style: italic; }

/* Scrollbar small */
#voicebot-chat-body::-webkit-scrollbar { width: 6px; }
#voicebot-chat-body::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 10px; }