/* ------------------------------------------------------------
   Ask Dr. Z Now Chatbot v6.0 front-end styles
   Layout, chat window, buttons, landing page, and responsive rules - edited for buttons alignment and new gateway class
   ------------------------------------------------------------ */

.askdrz-app,
/* Landing card and starter-topic container */
.askdrz-card,
.askdrz-landing-wrap,
.askdrz_clinical_gateway {
  box-sizing: border-box;
}

/* Main chat application wrapper */
.askdrz-app {
  max-width: 980px;
  margin: 24px auto;
  padding: 16px;
}

/* Clinical gateway wrapper */
.askdrz_clinical_gateway {
  max-width: 760px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #d7dbe0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.askdrz_clinical_gateway h1,
.askdrz_clinical_gateway h2,
.askdrz_clinical_gateway h3 {
  margin-top: 0;
}

.askdrz_clinical_gateway p {
  color: #4b5563;
}

/* Clinical gateway button stack */
.askdrz_clinical_gateway .askdrz-gateway-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 260px;
}

.askdrz_clinical_gateway .askdrz-gateway-buttons a,
.askdrz_clinical_gateway .askdrz-gateway-buttons button,
.askdrz_clinical_gateway .askdrz-gateway-buttons input[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

/* Chat transcript window */
#askdrz-win {
  min-height: 420px;
  max-height: 68vh;
  overflow-y: auto;
  border: 1px solid #d7dbe0;
  border-radius: 14px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#askdrz-form {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto auto;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
}

#askdrz-input {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid #cbd2d9;
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
  line-height: 1.45;
}

#askdrz-input:focus {
  outline: none;
  border-color: #7c8aa5;
  box-shadow: 0 0 0 3px rgba(124,138,165,0.15);
}

/* Shared action button styling */
.askdrz-send,
#askdrz-rec,
#askdrz-stop,
#askdrz-request,
.askdrz-app .button,
.askdrz-card .button,
.askdrz-landing-wrap .askdrz-starter,
.askdrz_clinical_gateway .button,
.askdrz_clinical_gateway a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #1f2937;
  border-radius: 10px;
  background: #1f2937;
  color: #ffffff;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.askdrz-send:hover,
#askdrz-rec:hover,
#askdrz-stop:hover,
#askdrz-request:hover,
.askdrz-app .button:hover,
.askdrz-card .button:hover,
.askdrz-landing-wrap .askdrz-starter:hover,
.askdrz_clinical_gateway .button:hover,
.askdrz_clinical_gateway a.button:hover {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

#askdrz-stop[disabled],
.askdrz-send[disabled],
#askdrz-rec[disabled],
#askdrz-request[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

#askdrz-upload {
  display: none;
}

/* Generic message styling for common JS render patterns */
#askdrz-win .askdrz-msg,
#askdrz-win .message,
#askdrz-win .msg,
#askdrz-win > div {
  margin-bottom: 12px;
}

#askdrz-win .askdrz-msg-user,
#askdrz-win .message.user,
#askdrz-win .msg.user,
#askdrz-win .user {
  text-align: right;
}

#askdrz-win .askdrz-msg-user .bubble,
#askdrz-win .message.user .bubble,
#askdrz-win .msg.user .bubble,
#askdrz-win .user .bubble {
  margin-left: auto;
  background: #e9f2ff;
  color: #10233b;
}

#askdrz-win .askdrz-msg-assistant,
#askdrz-win .message.assistant,
#askdrz-win .msg.assistant,
#askdrz-win .assistant {
  text-align: left;
}

#askdrz-win .askdrz-msg-assistant .bubble,
#askdrz-win .message.assistant .bubble,
#askdrz-win .msg.assistant .bubble,
#askdrz-win .assistant .bubble {
  background: #f3f4f6;
  color: #1f2937;
}

/* Message bubble styling */
#askdrz-win .bubble {
  display: inline-block;
  max-width: min(80%, 760px);
  padding: 11px 14px;
  border-radius: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.askdrz-card,
.askdrz-landing-wrap {
  max-width: 760px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #d7dbe0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.askdrz-card h2,
.askdrz-landing-wrap h2 {
  margin: 0 0 12px;
}

.askdrz-card p {
  margin: 0 0 16px;
  color: #4b5563;
}

.askdrz-card .button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.askdrz-landing-wrap ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.askdrz-landing-wrap li {
  margin: 0;
  padding: 0;
}

.askdrz-landing-wrap .askdrz-starter {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  #askdrz-form {
    grid-template-columns: 1fr 1fr;
  }

  #askdrz-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .askdrz-app,
  .askdrz-card,
  .askdrz-landing-wrap,
  .askdrz_clinical_gateway {
    padding: 14px;
  }

  #askdrz-win {
    min-height: 340px;
    padding: 14px;
  }

  #askdrz-form {
    grid-template-columns: 1fr;
  }

  .askdrz-send,
  #askdrz-rec,
  #askdrz-stop,
  #askdrz-request,
  .askdrz-app .button,
  .askdrz-card .button,
  .askdrz-landing-wrap .askdrz-starter,
  .askdrz_clinical_gateway .button,
  .askdrz_clinical_gateway a.button {
    width: 100%;
  }

  .askdrz_clinical_gateway .askdrz-gateway-buttons {
    max-width: 100%;
  }

  #askdrz-win .bubble {
    max-width: 100%;
  }
}