:root {
  --blue: #002657;
  --orange: #fa4616;
  --gradient: linear-gradient(45deg, rgba(0, 38, 87, .5) 0%, rgba(38, 0, 87, 0.5) 100%);
  --gradient-bg: linear-gradient(45deg, rgba(0, 86, 61, 0.45) 0%, rgba(0, 12, 115, 0.45) 100%);
  --gradient-light: linear-gradient(90deg, rgba(242, 169, 0, 1) 0%, rgb(250, 70, 22, 1) 100%);
  --grey: #c7c9c8;
  --dark: #343741;
}

body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background-image: var(--gradient-bg);
  /* background-color: rgb(196, 196, 196); */
  color: var(--dark);
  margin: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
  margin: 0px 1px;
}

a:hover {
  text-decoration: underline;
}

/* Custom tooltip styles */
a[title] {
  position: relative;
  /* Ensure positioning relative to the link */
  text-decoration: none;
  /* Remove default underline */
}

a[title]:hover::after {
  content: attr(title);
  /* Display the title text as content */
  position: absolute;
  /* Position the tooltip */
  background-color: var(--blue);
  /* Background color */
  color: #fff;
  /* Text color */
  padding: 4px 8px;
  /* Padding around the text */
  border-radius: 5px;
  /* Rounded corners */
  font-size: 11px;
  /* Font size */
  white-space: nowrap;
  /* Prevent line breaks */
  z-index: 999;
  /* Ensure tooltip stays on top */
  left: 50%;
  /* Position horizontally */
  transform: translateX(-50%);
  /* Center horizontally */
  bottom: 20px;
  /* Position vertically */
  opacity: 0;
  /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
  /* Smooth fade-in/out effect */
}

a[title]:hover::after {
  opacity: 1;
  /* Show tooltip on hover */
}


h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin: 0 !important;
  text-transform: uppercase;
  font-size: 25px;
  letter-spacing: 1.5px;
  color: var(--dark);
  text-align: center;
}

h4 {
  margin: 0 !important;
  color: var(--dark);
  font-size: 23px !important;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

h5 {
  margin: 0 !important;
  color: var(--dark);
  font-size: 17px !important;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

.conversation-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
}

/* @media (max-width: 768px) {
  .conversation-container  {
    margin: auto;
    margin: 16px 16px;
  }
} */

.video-show-border {
  border: rgb(0, 198, 0) solid;
  border-radius: 1vw;
  border-width: 0.25vw;
}

.participant-status {
  position: absolute;
  bottom: 20px;
  left: 30px;
  max-width: fit-content;
  display: flex;
  flex-direction: row;
  pointer-events: none; /* Prevent interference with video controls */
}

/* Ensure all containers with participant-status have relative positioning */
div:has(.participant-status) {
  position: relative !important;
}

/* User video container positioning */
.conversation-container>div:first-child>div:nth-child(2)>div {
  position: relative;
}

.meeting-paricipant-name {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 16px;
  font-family: Arial, sans-serif;
  padding: 4px 8px;
  margin: 0;
  line-height: 1;
  display: inline-block;
  vertical-align: top;
}

.microphone-off {
  margin-left: 8px;
  vertical-align: middle;
  color: red;
}

.microphone-on {
  margin-left: 8px;
  vertical-align: middle;
  color: white;
}



.alex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

/* Profile Pictures Container - Column for desktop, Row for mobile */
.profile-pictures-container {
  flex-direction: column;
}

@media (max-width: 768px) {
  .profile-pictures-container {
    flex-direction: row;
  }
}

.chat-container {
  width: 25vw;
  height: auto;
  /* max-width: 700px; */
  /* min-height: 400px; */
  background-color: white;
  padding: 16px;
  border: 0px;
  border-radius: 16px;
  margin: auto;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

@media (max-width: 768px) {
  .chat-container {
    width: 100%;
    min-width: 0px;
    height: 60vh;
    max-height: 700px;
  }
}

.chat-box {
  height: 50vh;
  overflow-y: auto;
  margin-bottom: 15px;
  /* border-bottom: 2px solid var(--grey); */
  padding: 10px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .chat-box {
    height: 500px;
  }
}

/* ── Topics Section ─────────────────────────────────────────────────── */
.topics-section {
  padding: 16px 20px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.topics-header {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.topics-left {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topics-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.topics-label {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
}

#current-topic-title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  word-break: break-word;
  min-width: 0;
}

#current-topic-description {
  font-size: 16px;
  color: #555;
  word-break: break-word;
  line-height: 1.4;
}

.topics-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.topics-stats-desktop {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.topics-stats-desktop span {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
}

/* Mobile stats row (hidden on desktop, shown on mobile) */
.topics-stats-mobile {
  display: none;
}

@media (max-width: 768px) {
  .topics-section {
    padding: 12px 16px;
  }

  .topics-label {
    font-size: 13px;
  }

  #current-topic-title {
    font-size: 13px;
  }

  #current-topic-description {
    font-size: 13px;
  }

  .topics-stats-desktop {
    display: none;
  }

  .topics-stats-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
  }

  .topics-stats-mobile span {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
  }
}
/* ─────────────────────────────────────────────────────────────────────── */

.input-area {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 24px;
}


#input-area-buttons {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

#user-message-buttons {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 11px;
}

.likert-label {
  text-align: center;
  font-size: 13px;
}

.likert-button-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 5px;
  transition: .2s ease-in-out;
}

.likert-button-item:hover {
  background-color: #b5b5b55b;
}

.likert-button-item:hover>.likert-label {
  font-weight: 700;
}

#send-btn {
  padding: 0px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  height: 32px;
  margin: auto;
  width: auto;
}

#mic-toggleButton {
  padding: 0px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  height: 48px;
  margin: auto;
  width: auto;
  margin-left: 8px;
}

#send-svg {
  /* margin-left: 5px !important; */
  width: 16px !important;
  height: 16px !important;
}

.user-input-button {
  margin: 7px;
  padding: 5px 7px;
  background-color: white;
  color: var(--blue);
  border: 3px solid var(--blue);
}

.unclickable {
  pointer-events: none;
  opacity: 50%;
}

.user-input-button:hover {
  color: white;
  background-color: var(--blue) !important;
  background-image: none;
  border: 3px solid var(--blue);
}

.selected {
  color: white;
  background-color: var(--blue) !important;
  background-image: none;
  border: 3px solid var(--blue) !important;
}

.button-resonse-area {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}

.user-input {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  border: 2px solid var(--grey);
  border-radius: 5px;
  width: 81%;
  padding: 5px;
  height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  resize: none;
  font-size: 16px;
}

button {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  border: 0px;
  border-radius: 8px;
  background-color: var(--blue);
  color: white;
  transition: .2s ease-in-out;
}

button:hover {
  background-image: var(--gradient);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: scale(1.02);
}

video {
  height: auto;
  width: 30vw !important;
  /* margin: 1vw 1vw 0px 1vw; */
  box-shadow: 0px 0.5vw 1vw rgba(0, 0, 0, 0.1);
  aspect-ratio: 16 / 9;
  border-radius: 1vw;
  border: var(--dark) solid;
  border-width: 0.25vw;
}

/* Custom Video Controls */
.video-wrapper {
  position: relative;
  width: 100%;
  display: block;
  line-height: 0;
}

.video-blur-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  border-radius: 1vw;
  z-index: 5;
}

.video-blur-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.custom-video-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 15px;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.custom-video-controls.hidden {
  opacity: 0;
  pointer-events: none;
}

.video-control-btn {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-control-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.video-control-btn:active {
  transform: scale(0.95);
}

.video-control-btn .material-symbols-outlined {
  color: white;
  font-size: 32px;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

.video-control-btn:disabled {
  background: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
  opacity: 0.5;
}

.video-control-btn:disabled:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: none;
}

.camera-off-image {
  height: fit-content;
  width: 30vw !important;
  border-radius: 1vw;
  /* margin: 1vw 1vw 0px 1vw; */
  box-shadow: 0px 0.5vw 1vw rgba(0, 0, 0, 0.1);
  aspect-ratio: 16 / 9;
  background: grey;
  border: var(--dark) solid;
  border-width: 0.25vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#user-camera {
  display: none;
}

.user-message {
  background: linear-gradient(white, white) padding-box, var(--gradient) border-box;
  border: 3px solid transparent;
  padding: 7px;
  margin: 11px 7px 11px 7px !important;
  border-radius: 11px 11px 0px 11px;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chatbot-message {
  background-color: var(--orange) !important;
  color: white;
  border: 3px solid transparent;
  padding: 7px;
  border-radius: 11px 11px 11px 0px;
  display: flex;
  flex-direction: column;
}

.alex-message-item {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin: 11px 7px 11px 7px !important;
}

.label-text {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  opacity: 75%;
}

.alex-icon {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  margin-right: 11px;
}


.alex-icon-video {
  height: 36px;
  width: 36px;
  display: none;
}

@media (max-width: 768px) {
  .alex-icon {
    height: 24px;
    width: 24px;
  }
}

.alex-profile {
  height: 75px;
  width: 75px;
  border-radius: 50%;
}

/* Load animation */

.typing-text {
  margin-top: auto;
  margin-bottom: auto;
}

.typing-indicator {
  display: flex;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: auto;
}

.lds-ellipsis div {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

@media (max-width: 768px) {
  .lds-ellipsis div {
    width: 4px;
    height: 4px;
  }

  .lds-ellipsis div:nth-child(1) {
    left: 4px;
    animation: lds-ellipsis1 0.6s infinite;
  }

  .lds-ellipsis div:nth-child(2) {
    left: 4px;
    animation: lds-ellipsis2 0.6s infinite;
  }

  .lds-ellipsis div:nth-child(3) {
    left: 16px;
    animation: lds-ellipsis2 0.6s infinite;
  }

  .lds-ellipsis div:nth-child(4) {
    left: 32px;
    animation: lds-ellipsis3 0.6s infinite;
  }

  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(0);
    }
  }

  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(18px, 0);
    }
  }
}

.start {
  width: 105px !important;
  padding: 15px;
  border-radius: 19px;
}

/* CSS for modal */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fefefe;
}

.modal-content {
  /* border-radius: 15px; */
  background-color: #fefefe;
  padding: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 75%;
  height: 100%;
}




.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.finish-button {
  width: 105px;
  padding: 11px;
  border-radius: 8px;
}

.continue-container {
  display: block;
  width: 100%;
  clear: both;
  margin: 24px auto;
  padding: 20px;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

.finish-talking-button {
  position: absolute;
  bottom: 15px;
  right: 35px;
  width: 175px;
  padding: 11px;
}

#finish-button:disabled {
  /* Your styles for disabled button */
  opacity: 0.5;
  /* Example: Reduce opacity */
  cursor: not-allowed;
  /* Example: Change cursor to not-allowed */
}

#send-btn:disabled {
  /* Your styles for disabled button */
  opacity: 0.5;
  /* Example: Reduce opacity */
  cursor: not-allowed;
  /* Example: Change cursor to not-allowed */
}

#mic-toggleButton:disabled {
  /* Your styles for disabled button */
  opacity: 0.5;
  /* Example: Reduce opacity */
  cursor: not-allowed;
  /* Example: Change cursor to not-allowed */
}

.pulse-orange {
  animation: pulse-animation-orange 1.5s infinite;
}

.pulse-green {
  animation: pulse-animation-green 1.5s infinite;
}

.pulse-blue {
  animation: pulse-animation-blue 1.5s infinite;
}

@keyframes pulse-animation-green {
  0% {
    box-shadow: 0 0 0 0px rgba(83, 250, 22, 0.5);
  }

  100% {
    box-shadow: 0 0 0 11px rgba(250, 70, 22, 0);
  }
}

@keyframes pulse-animation-orange {
  0% {
    box-shadow: 0 0 0 0px rgba(250, 70, 22, 0.5);
  }

  100% {
    box-shadow: 0 0 0 11px rgba(250, 70, 22, 0);
  }
}

@keyframes pulse-animation-blue {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 38, 87, 0.2);
  }

  100% {
    box-shadow: 0 0 0 11px rgba(0, 38, 87, 0);
  }
}

#send-btn-likert {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.progress-area {
  position: fixed;
  top: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#progress-area {
  opacity: 0;
}

#progress-bar {
  width: 35%;
  height: 9px;
  background-color: white;
  border: 0px solid #ccc;
  border-radius: 15px;
  margin: 5px;
  padding: 3px;
}

#progress {
  width: 0;
  height: 100%;
  background: var(--gradient);
  border-radius: 15px;
}

#progress-text {
  text-transform: uppercase;
  font-size: 13px !important;
}

p {
  margin: 0;
}

hr {
  border: 0;
  /* Remove the default border */
  height: 1px;
  /* Set the height of the horizontal rule */
  width: 100%;
  background-color: var(--dark);
  /* Set the color of the horizontal rule */
  margin: 15px 15px;
  /* Add some margin above and below the horizontal rule */
  margin: auto;
}

.conclude-button {
  width: 250px;
  padding: 5px;
  margin: 5px;
  animation: pulse 1s infinite;
  display: none;
}

.remove-pulse-animation {
  animation: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.topics-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.green {
  color: green;
}

#message-fc2,
#message-fc3,
#message-1,
#message-2,
#message-3,
#message-4,
#message-5,
#message-6,
#message-2-browse,
#message-3-browse {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#message-1-browse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.show {
  display: flex;
}

.prev {
  position: fixed;
  bottom: 35px;
  left: 55px;
}

.next {
  position: fixed;
  bottom: 35px;
  right: 55px;
}

.modalNavBtn {
  padding: 15px;
  border-radius: 19px;
  width: 115px;
}

#start {
  padding: 15px;
  border-radius: 19px;
  width: 105px;
  font-weight: 700 !important;
  text-transform: 1.5px;
}

.help-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  margin: 0;
  box-sizing: border-box;
}

.help-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.help-col {
  display: flex;
  flex-direction: column;
  width: 75%;
  text-align: center;
}

#help-icon {
  background-color: var(--blue);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  height: 48px;
  width: 48px;
  text-align: center;
  overflow: hidden;
}

.help-modal {
  display: none;
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.help-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 55vw;
  max-height: 90vh; /* Prevent overflow on short screens */
  overflow-y: auto; /* Allow scrolling if content is too tall */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .help-modal-content {
    max-width: 80vw;
    margin: 3% auto; /* Reduce top/bottom margin on mobile */
    padding: 16px; /* Reduce padding on mobile */
  }
}

/* Mobile landscape specific styling */
@media (orientation: landscape) and (max-height: 500px) {
  .help-modal-content {
    max-width: 85vw !important;
    max-height: 85vh !important;
    margin: 2% auto !important; /* Minimal margin for landscape */
    padding: 12px !important; /* Compact padding */
    font-size: 14px; /* Smaller text for compact view */
  }
  
  .help-modal-content .info-title.help {
    font-size: 16px !important; /* Smaller title */
    margin-bottom: 8px !important;
  }
  
  .help-modal-content .info.help {
    font-size: 13px !important; /* Smaller body text */
    line-height: 1.3 !important; /* Tighter line spacing */
    margin-bottom: 8px !important;
  }
  
  .help-close {
    padding: 8px 12px !important; /* Smaller button */
    font-size: 13px !important;
    margin-top: 8px !important;
  }
}

.help-close {
  width: 105px !important;
  padding: 15px;
  border-radius: 8px;
}

.help-close:hover,
.help-close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

#toggleButton {
  margin: 7px 0;
  font-size: 11px !important;
  color: #2971B7;
  transition: .2s ease-in-out;
  cursor: pointer;
}

#toggleButton:hover {
  color: #df4300;
}

.check-item {
  margin: 7px 0px !important;
}

/* CSS for modal */
.interaction-modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.55);
}

.interaction-modal-content {
  border-radius: 15px;
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 0px solid #888;
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 45px;
  text-align: center;
}

.info {
  font-size: 17px !important;
  margin-bottom: 7px;
  word-break: break-word;
}

.info-title {
  font-size: 25px !important;
  color: var(--dark);
  margin-bottom: 7px;
}

.info-title.help {
  font-size: 19px !important;
}

.info.help {
  font-size: 15px !important;
  margin-bottom: 7px;
}

.main-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.main-container .ct-container {
  background-color: white;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-container .ct-content-area {
  padding: 15px 25px;
}

.main-container .conversation-container {
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ct-container h1 {
  font-size: 19px;
  background-color: var(--blue);
  color: white;
  margin-top: 0;
  padding: 11px;
}

.ct-container h2 {
  font-size: 15px;
  color: var(--blue);
  text-transform: uppercase;
  margin: 5px 0;
  text-align: center;
}

.ct-container h3 {
  font-size: 13px;
  text-align: left;
  color: var(--dark);
  text-transform: uppercase;
  margin: 5px 0 !important;
}

.ct-container .scroll-area {
  height: 205px !important;
  overflow-y: scroll;
  border: 1px solid var(--orange);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 15px;
}

.ct-container .info-area {
  display: flex;
  align-items: center;
  margin: 0;
}

#criteriaList ul {
  margin-top: 0px;
}

.ct-content-area {
  overflow-y: scroll;
}

.ct-footer-area {
  /* height: 7%; */
  background-color: var(--blue);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
}

.ct-footer-area button {
  border: 1px solid white;
  padding: 9px;
}

.ct-footer-area button:hover {
  background-image: var(--gradient-light);
  border: 1px solid var(--gradient-light);
}

.ct-footer-area .selected-study {
  background-color: var(--orange) !important;
  border: 1px solid var(--orange);
  font-weight: bold;
}

.question-button {
  display: inline-block;
  max-width: 450px;
  /* Maximum width of 450px */
  width: 100%;
  /* Allows button to expand up to max-width */
  text-align: left;
  /* Left-align the text inside the button */
  white-space: normal;
  /* Allow text wrapping */
  word-wrap: break-word;
  /* Ensures long text breaks to the next line if needed */
  padding: 10px 15px;
  /* Some padding for better readability */
  margin: 5px 0;
  /* Space between buttons */
  background-color: #007bff;
  /* A background color (optional) */
  color: white;
  /* Text color */
  border: none;
  /* Remove default border */
  border-radius: 5px;
  /* Rounded corners */
  font-size: 14px;
  /* Adjust font size as needed */
  cursor: pointer;
  /* Pointer cursor on hover */
  box-sizing: border-box;
  /* Ensure padding is included in width */
}

.question-button:hover {
  background-color: #0056b3;
  /* Change color on hover */
}

.audioPlayPauseButton {
  background-color: transparent;
}

.audioPlayPauseButton:hover {
  background-color: transparent;
  /* No change on hover */
}

.question-button strong {
  color: gold;
}

.who-will-answer-indicator {
  position: relative;
  top: 16px;
  left: -2%;
  width: fit-content;
  background-color: gold;
  padding: 1px 12px;
  text-align: center;
  z-index: 2;
}

.topic-selection-container {
  margin-top: 20px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;

}

.topic-selection-container h4 {
  margin-bottom: 10px;
  color: #333;
  text-align: center;
}

.topic-instruction {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.topic-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  margin: 10px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.topics-grid>div {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0 10px;
}

.topic-item:hover {
  border-color: #4860d9;
  box-shadow: 0 2px 8px rgba(72, 96, 217, 0.1);
}

.topic-item.selected {
  border-color: #4860d9;
  background-color: #4860d9;
}

.topic-item.selected .topic-content h5 {
  color: white;
}

.topic-item.selected .topic-content p {
  color: white;
}

.topic-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.topic-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.topic-item.selected .topic-checkbox {
  background-color: white;
  border-color: white;
}

.topic-item.selected .topic-checkbox::after {
  content: '✓';
  color: #4860d9;
  font-size: 12px;
  font-weight: bold;
}

.topic-content {
  flex: 1;
}

.topic-content h5 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.topic-content p {
  margin: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.4;
}

.finish-button {
  /* padding: 12px 24px; */
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 100%;
  min-width: fit-content;
}

.finish-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

.finish-button:not(:disabled) {
  background-color: #4860d9;
  color: white;
}

.finish-button:not(:disabled):hover {
  background-color: #3a4bc7;
  transform: translateY(-1px);
}

/* Mobile-first responsive design */
.conversation-container {
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.alex-container {
  max-width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.alex-container h3 {
  max-width: 100%;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.topics-container p {
  max-width: 100%;
  text-align: center;
  padding: 0 10px;
}

.topic-selection-container {
  margin: auto !important;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
  max-width: 55%;
  box-sizing: border-box;
}

.topic-selection-container h4 {
  margin-bottom: 10px;
  color: #333;
  text-align: center;
  font-size: 1.3rem;
}

.topic-instruction {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
  padding: 0 10px;
}

/* Mobile responsive grid */
.topics-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.topics-grid>div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.topic-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  margin: 5px 0;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
}

.topic-item:hover {
  border-color: #4860d9;
  box-shadow: 0 2px 8px rgba(72, 96, 217, 0.1);
}

.topic-item.selected {
  border-color: #4860d9;
  background-color: #4860d9;
}

.topic-item.selected .topic-content h5 {
  color: white;
}

.topic-item.selected .topic-content p {
  color: white;
}

.topic-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.topic-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.topic-item.selected .topic-checkbox {
  background-color: white;
  border-color: white;
}

.topic-item.selected .topic-checkbox::after {
  content: '✓';
  color: #4860d9;
  font-size: 12px;
  font-weight: bold;
}

.topic-content {
  flex: 1;
  min-width: 0;
}

.topic-content h5 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  word-wrap: break-word;
}

.topic-content p {
  margin: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
  word-wrap: break-word;
}

.continue-container {
  display: block;
  width: 100%;
  clear: both;
  padding: 20px;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
  margin: 24px auto;
  position: relative;
}

/* Topic Selection Questionnaire Mobile Responsiveness - Enhanced with Orientation Support */
@media (max-width: 768px) {
  .topic-questionnaire-card {
    margin: clamp(10px, 3vw, 15px) clamp(5px, 2vw, 8px);
    padding: clamp(16px, 4vw, 20px) clamp(12px, 3vw, 15px);
    border-radius: clamp(8px, 2.5vw, 12px);
    max-width: clamp(85vw, 90vw, 95vw) !important;
    width: calc(100vw - clamp(10px, 4vw, 16px)) !important;
    box-sizing: border-box;
  }

  .topics-grid-CKDPilotQuestionnaire {
    grid-template-columns: 1fr; /* Single column for small screens */
    gap: clamp(6px, 2vw, 10px);
  }

  .topic-card {
    padding: clamp(10px, 3vw, 14px);
    gap: clamp(6px, 2vw, 10px);
    min-height: clamp(70px, 12vw, 90px);
  }

  .kidney-stage-option {
    padding: clamp(10px, 3vw, 14px);
    gap: clamp(6px, 2vw, 10px);
    min-height: clamp(90px, 18vw, 110px);
  }

  .diagnosis-option {
    padding: clamp(10px, 3vw, 14px);
    gap: clamp(6px, 2vw, 10px);
    min-height: clamp(70px, 12vw, 90px);
  }

  .continue-container .finish-button {
    min-height: clamp(40px, 10vw, 48px);
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }
}

@media (max-width: 480px) {
  .topic-questionnaire-card {
    margin: clamp(8px, 2.5vw, 10px) clamp(3px, 1.5vw, 5px);
    padding: clamp(12px, 3.5vw, 15px) clamp(8px, 2.5vw, 10px);
    max-width: clamp(90vw, 94vw, 96vw) !important;
    width: calc(100vw - clamp(6px, 3vw, 10px)) !important;
  }

  .topic-card {
    padding: clamp(8px, 2.5vw, 12px);
    gap: clamp(4px, 1.5vw, 8px);
    min-height: clamp(60px, 10vw, 80px);
  }

  .kidney-stage-option {
    padding: clamp(8px, 2.5vw, 12px);
    gap: clamp(4px, 1.5vw, 8px);
    min-height: clamp(80px, 16vw, 100px);
  }

  .diagnosis-option {
    padding: clamp(8px, 2.5vw, 12px);
    gap: clamp(4px, 1.5vw, 8px);
    min-height: clamp(60px, 10vw, 80px);
  }

  .continue-container .finish-button {
    min-height: clamp(36px, 9vw, 44px);
    font-size: clamp(12px, 3.2vw, 14px) !important;
    padding: clamp(8px, 2.5vw, 12px) clamp(12px, 4vw, 16px) !important;
  }

  /* Extra small screen optimizations */
  .pdf-container embed {
    height: clamp(300px, 60vw, 450px) !important;
  }

  .signature-field input {
    padding: clamp(8px, 2.5vw, 12px) !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }
}

/* Knowledge Test Styles */
.questions-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.all-questions-section {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.question-item {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.question-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.5;
}

.answer-options {
  display: flex;
  gap: 60px;
  justify-content: left;
}

.answer-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  transition: color 0.3s ease;
}

.answer-option:hover {
  color: #4860d9;
}

.answer-option input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.answer-option input[type="radio"]:checked+.radio-custom {
  border-color: #4860d9;
  background-color: #4860d9;
}

.answer-option input[type="radio"]:checked+.radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
}

/* Mobile responsiveness for questions */
@media (max-width: 768px) {
  .questions-container {
    padding: 15px;
  }

  .all-questions-section {
    padding: 15px;
  }

  .question-item {
    padding: 15px;
  }

  .answer-options {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .question-text {
    font-size: 15px;
  }

  .answer-option {
    font-size: 15px;
  }
}

/* Self-Efficacy Questionnaire Styles */
.self-efficacy-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.self-efficacy-questions {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.self-efficacy-question {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.question-header h4 {
  color: #4860d9;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.question-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20px;
}

.confidence-scale {
  margin-top: 15px;
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
  position: relative;
}

.slider-wrapper {
  flex: 1;
  position: relative;
  padding-bottom: 30px;
}

.confidence-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.confidence-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.confidence-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none;
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.confidence-slider.touched::-webkit-slider-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.confidence-slider.touched::-moz-range-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-value {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  color: white;
  border-radius: 50%;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.slider-value.touched {
  background-color: #4860d9;
}

/* Remove old scale option styles if they exist */
.scale-options {
  display: none;
}

.scale-option {
  display: none;
}

.scale-number {
  display: none;
}

/* Mobile responsiveness for sliders */
@media (max-width: 768px) {
  .self-efficacy-container {
    padding: 15px;
  }

  .self-efficacy-questions {
    padding: 15px;
  }

  .self-efficacy-question {
    padding: 20px;
  }

  .slider-container {
    gap: 10px;
  }

  .confidence-slider {
    height: 10px;
  }

  .confidence-slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 5;
    background: #ccc;
    transition: background-color 0.3s ease;
  }

  .confidence-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 5;
    background: #ccc;
    transition: background-color 0.3s ease;
  }

  .confidence-slider.touched::-webkit-slider-thumb {
    background: #4860d9;
  }

  .confidence-slider.touched::-moz-range-thumb {
    background: #4860d9;
  }
}

@media (max-width: 480px) {
  .slider-container {
    gap: 8px;
  }

  .confidence-slider {
    height: 12px;
  }

  .confidence-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .confidence-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

.slider-ticks {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
  padding: 0 12px;
}

.slider-tick {
  width: 2px;
  height: 12px;
  background-color: #999;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}

.slider-tick:first-child {
  margin-left: 0;
}

.slider-tick:last-child {
  margin-right: 0;
}

.slider-tick::after {
  content: attr(data-value);
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #666;
  font-weight: 600;
  width: 20px;
  text-align: center;
  z-index: 2;
}

@media (max-width: 768px) {
  .slider-ticks {
    padding: 0 11px;
  }
}

@media (max-width: 480px) {
  .slider-ticks {
    padding: 0 10px;
  }
}

/* Trust Assessment Styles */
.trust-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.trust-questions {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.agent-header {
  background-color: white;
  border: 2px solid #4860d9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.agent-header h3 {
  color: #4860d9;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: none;
}

.agent-header p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.dimension-header {
  background-color: #e3f2fd;
  border-left: 4px solid #4860d9;
  padding: 15px 20px;
  margin: 20px 0 15px 0;
  border-radius: 4px;
}

.dimension-header h4 {
  color: #4860d9;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  text-transform: none;
}

.trust-question {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.trust-question .question-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20px;
}

.trust-scale {
  margin-top: 15px;
}

.trust-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.trust-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.trust-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none;
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.trust-slider.touched::-webkit-slider-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.trust-slider.touched::-moz-range-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness for trust assessment */
@media (max-width: 768px) {
  .trust-container {
    padding: 15px;
  }

  .trust-questions {
    padding: 15px;
  }

  .trust-question {
    padding: 20px;
  }

  .agent-header {
    padding: 15px;
  }

  .agent-header h3 {
    font-size: 1.3rem;
  }

  .dimension-header {
    padding: 12px 15px;
  }

  .trust-slider {
    height: 10px;
  }

  .trust-slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  .trust-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .trust-slider {
    height: 12px;
  }

  .trust-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .trust-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

/* Intent Assessment Styles */
.intent-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.intent-questions {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.intent-question {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.intent-question .question-header h4 {
  color: #4860d9;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.intent-question .question-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20px;
}

.intent-scale {
  margin-top: 15px;
}

.intent-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.intent-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.intent-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none;
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.intent-slider.touched::-webkit-slider-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.intent-slider.touched::-moz-range-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness for intent assessment */
@media (max-width: 768px) {
  .intent-container {
    padding: 15px;
  }

  .intent-questions {
    padding: 15px;
  }

  .intent-question {
    padding: 20px;
  }

  .intent-slider {
    height: 10px;
  }

  .intent-slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  .intent-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .intent-slider {
    height: 12px;
  }

  .intent-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .intent-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

/* Demographic Questionnaire Styles */
.demographic-container {
  max-width: 800px;
  margin: 20px auto;
}

.demographic-question {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.demographic-question label {
  display: block;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
}

.demographic-question input[type="number"],
.demographic-question select {
  width: -webkit-fill-available;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  background: white;
  transition: border-color 0.3s ease;
}

.demographic-question input[type="number"]:focus,
.demographic-question select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-group input[type="radio"] {
  margin-right: 10px;
  transform: scale(1.2);
}

.radio-group label {
  display: flex;
  align-items: center;
  font-weight: normal;
  margin-bottom: 0;
  cursor: pointer;
  padding: 8px 0;
}

.radio-group label:hover {
  background-color: rgba(0, 123, 255, 0.05);
  border-radius: 4px;
  padding-left: 8px;
  margin-left: -8px;
}

/* Checkbox Group Styles */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-weight: normal;
  margin-bottom: 0;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.checkbox-group label:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

.checkbox-group input[type="checkbox"] {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007bff;
}

/* Kidney Stage Styles */
.kidney-stage-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.kidney-stage-option {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.kidney-stage-option:hover {
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.kidney-stage-option input[type="radio"] {
  position: absolute;
  top: 15px;
  right: 15px;
  transform: scale(1.3);
  cursor: pointer;
}

.kidney-stage-option input[type="radio"]:checked {
  accent-color: #007bff;
}

.kidney-stage-option:has(input[type="radio"]:checked) {
  border-color: #007bff;
  background-color: rgba(0, 123, 255, 0.05);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.stage-indicator {
  font-size: 32px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-content {
  flex: 1;
  padding-right: 40px;
}

.stage-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.stage-description {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.stage-example {
  margin: 0;
  font-size: 13px;
  color: #777;
  font-style: italic;
  line-height: 1.4;
}

.stage-example em {
  color: #666;
}

/* Intent slider untouched state */
.intent-slider.untouched::-webkit-slider-thumb {
  opacity: 0;
  visibility: hidden;
}

.intent-slider.untouched::-moz-range-thumb {
  opacity: 0;
  visibility: hidden;
}

.slider-value.untouched {
  background-color: #f8f9fa;
  color: #999;
  border: 2px dashed #ddd;
}

/* Trust slider untouched state */
.trust-slider.untouched::-webkit-slider-thumb {
  opacity: 0;
  visibility: hidden;
}

.trust-slider.untouched::-moz-range-thumb {
  opacity: 0;
  visibility: hidden;
}

/* Self-efficacy slider untouched state */
.confidence-slider.untouched::-webkit-slider-thumb {
  opacity: 0;
  visibility: hidden;
}

.confidence-slider.untouched::-moz-range-thumb {
  opacity: 0;
  visibility: hidden;
}

/* Knowledge Test Self-Assessment Styles */
.self-assessment-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
}

.self-assessment-section {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 30px;
}

.self-assessment-question {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.self-assessment-question .question-header h4 {
  color: #4860d9;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.self-assessment-question .question-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20px;
}

.knowledge-self-scale {
  margin-top: 15px;
}

.knowledge-self-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.knowledge-self-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.knowledge-self-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none;
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
}

.knowledge-self-slider.touched::-webkit-slider-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.knowledge-self-slider.touched::-moz-range-thumb {
  background: #4860d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.knowledge-self-slider.untouched::-webkit-slider-thumb {
  opacity: 0;
  visibility: hidden;
}

.knowledge-self-slider.untouched::-moz-range-thumb {
  opacity: 0;
  visibility: hidden;
}

/* Mobile responsiveness for knowledge self-assessment */
@media (max-width: 768px) {
  .self-assessment-container {
    padding: 15px;
  }

  .self-assessment-section {
    padding: 15px;
  }

  .self-assessment-question {
    padding: 20px;
  }

  .knowledge-self-slider {
    height: 10px;
  }

  .knowledge-self-slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  .knowledge-self-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .knowledge-self-slider {
    height: 12px;
  }

  .knowledge-self-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .knowledge-self-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}


#Nephrologist-Div {
  display: none;
}

#Ex-patient-Div {
  display: none;
}

.instructions-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.instructions-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
}

.instructions-image-column {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
  margin: auto;
}

.intervention-preview-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(115, 147, 255, 0.2);
}

.instructions-text-column {
  flex: 1;
  min-width: 300px;
  margin: auto;
}

.instructions-text {
  background: rgba(0, 0, 0, 0.05);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid rgba(115, 147, 255, 0.2);
}

.instructions-text h4 {
  color: #102757;
  margin-bottom: 20px;
  font-size: 1.5em;
}

.instructions-text p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #e0e0e0;
}

.instructions-text ul {
  margin: 15px 0;
  padding-left: 20px;
}

.instructions-text li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #e0e0e0;
}

/* ── Instruction Video Player ──────────────────────────────────────── */
.instructions-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border: 1px solid rgba(115,147,255,0.2);
}

.instructions-video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

.instr-blur-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.instr-blur-overlay.visible {
  opacity: 1;
}

.instr-video-controls {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 16px;
  z-index: 10;
  transition: opacity 0.3s;
}

.instr-video-controls.hidden {
  opacity: 0;
  pointer-events: none;
}

.instr-control-btn {
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.instr-control-btn:hover {
  background: white;
  transform: scale(1.1);
}

.instr-control-btn .material-symbols-outlined {
  font-size: 28px;
  color: #333;
}
/* ───────────────────────────────────────────────────────────────────── */

.additional-info {
  margin-top: 20px;
  padding: 15px;
  background-color: rgba(115, 147, 255, 0.1);
  border-radius: 8px;
}

/* Responsive design for instructions page */
@media (max-width: 768px) {
  .instructions-content {
    flex-direction: column;
    gap: 20px;
  }

  .instructions-image-column,
  .instructions-text-column {
    min-width: 100%;
  }

  .instructions-text {
    padding: 20px;
  }
}

#Nephrologist-Div {
  display: none;
}

#Ex-patient-Div {
  display: none;
}


/* Topic Selection Questionnaire Styles */
.topic-questionnaire-card {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 32px;
  margin: 24px 0;
  max-width: 900px;
  width: 100%;
}

.topics-grid-CKDPilotQuestionnaire {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */
  gap: 16px;
  margin-top: 24px;
}

.topic-card {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background-color: white;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.topic-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(73, 94, 255, 0.5);
}

.topic-card.selected {
  background: rgba(73, 94, 255, 0.2);
  border-color: rgb(73, 94, 255);
}

.topic-card.selected .topic-content h4 {
  color: white !important;
}

.topic-card.selected .topic-content p {
  color: white !important;
}

.topic-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.topic-content {
  flex: 1;
}

.topic-title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.topic-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}

/* Ranking Styles */
.ranking-instructions {
  text-align: center;
  margin-bottom: 24px;
}

.ranking-instructions p {
  color: #333;
  font-size: 16px;
  margin: 0;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.ranking-item:hover {
  border-color: #4860d9;
  box-shadow: 0 2px 8px rgba(72, 96, 217, 0.1);
}

.ranking-number {
  background: #4860d9;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}

.ranking-content {
  flex: 1;
}

.ranking-title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.ranking-description {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}

.ranking-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ranking-arrow {
  background: #4860d9;
  color: white;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.ranking-arrow:hover {
  background: #3a4bc7;
  transform: scale(1.05);
}

.ranking-arrow:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.ranking-arrow:disabled:hover {
  background: #ccc;
  transform: none;
}

/* Kidney Disease Stage Selection Styles */
.kidney-stage-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.kidney-stage-option {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background-color: white;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.kidney-stage-option:hover {
  border-color: #4860d9;
  box-shadow: 0 2px 8px rgba(72, 96, 217, 0.1);
  transform: translateY(-1px);
}

.kidney-stage-option.selected {
  border-color: #4860d9;
  background-color: rgba(72, 96, 217, 0.05);
  box-shadow: 0 4px 12px rgba(72, 96, 217, 0.15);
}

.kidney-stage-option input[type="radio"] {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #4860d9;
}

.stage-indicator {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f8f9fa;
  flex-shrink: 0;
  margin-top: 4px;
}

.stage-content {
  flex: 1;
  padding-right: 40px;
}


.stage-title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.stage-description {
  color: #666;
  font-size: 14px;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.stage-example {
  color: #888;
  font-size: 13px;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

.kidney-stage-option.selected .stage-title {
  color: white;
}

.kidney-stage-option.selected .stage-description {
  color: white;
}

.kidney-stage-option.selected .stage-example {
  color: white;
}


/* Stage-specific indicator colors */
.stage-1 {
  background-color: rgba(0, 123, 255, 0.1);
}

.stage-2 {
  background-color: rgba(40, 167, 69, 0.1);
}

.stage-3 {
  background-color: rgba(255, 193, 7, 0.1);
}

.stage-4 {
  background-color: rgba(253, 126, 20, 0.1);
}

.stage-5 {
  background-color: rgba(220, 53, 69, 0.1);
}

/* Mobile responsiveness for kidney stage selection */
@media (max-width: 768px) {
  .kidney-stage-option {
    padding: 16px;
    gap: 12px;
  }

  .stage-indicator {
    font-size: 20px;
    width: 32px;
    height: 32px;
  }

  .stage-content {
    padding-right: 32px;
  }

  .stage-title {
    font-size: 15px;
  }

  .stage-description {
    font-size: 13px;
  }

  .stage-example {
    font-size: 12px;
  }

  .kidney-stage-option input[type="radio"] {
    width: 18px;
    height: 18px;
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .kidney-stage-option {
    padding: 14px;
    gap: 10px;
  }

  .stage-indicator {
    font-size: 18px;
    width: 28px;
    height: 28px;
  }

  .stage-content {
    padding-right: 28px;
  }

  .stage-title {
    font-size: 14px;
  }

  .stage-description {
    font-size: 12px;
  }

  .stage-example {
    font-size: 11px;
  }
}

/* Thank You Screen Styles */
.thank-you-content {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.thank-you-icon {
  width: 80px;
  height: 80px;
  background-color: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  animation: checkmark-bounce 0.6s ease-out;
}

.thank-you-title {
  color: #4caf50;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.thank-you-message {
  color: #333;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 15px 0;
  max-width: 600px;
}

.thank-you-submessage {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  max-width: 500px;
}

@keyframes checkmark-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile responsiveness for thank you screen */
@media (max-width: 768px) {
  .thank-you-content {
    padding: 30px 15px;
    min-height: 250px;
  }

  .thank-you-icon {
    width: 60px;
    height: 60px;
    font-size: 30px;
    margin-bottom: 20px;
  }

  .thank-you-title {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .thank-you-message {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .thank-you-submessage {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .thank-you-content {
    padding: 20px 10px;
    min-height: 200px;
  }

  .thank-you-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .thank-you-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }

  .thank-you-message {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .thank-you-submessage {
    font-size: 13px;
  }
}

/* CKD Diagnosis Screening Styles */
.diagnosis-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.diagnosis-option {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background-color: white;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  min-height: 80px;
}

.diagnosis-option:hover {
  border-color: #4860d9;
  box-shadow: 0 2px 8px rgba(72, 96, 217, 0.1);
  transform: translateY(-1px);
}

.diagnosis-option.selected {
  border-color: #4860d9;
  background-color: rgba(72, 96, 217, 0.05);
  box-shadow: 0 4px 12px rgba(72, 96, 217, 0.15);
}

.diagnosis-option.selected .diagnosis-content p {
  color: white
}

.diagnosis-option.selected .diagnosis-content h4 {
  color: white
}

.diagnosis-option input[type="radio"] {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #4860d9;
}

.diagnosis-indicator {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
}

.yes-indicator {
  background-color: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  border: 2px solid #4caf50;
}

.no-indicator {
  background-color: rgba(244, 67, 54, 0.1);
  color: #f44336;
  border: 2px solid #f44336;
}

.diagnosis-content {
  flex: 1;
  padding-right: 40px;
}

.diagnosis-title {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.diagnosis-description {
  color: #666;
  font-size: 16px;
  margin: 0;
  line-height: 1.4;
}

.diagnosis-option.selected .diagnosis-title {
  color: #4860d9;
}

.diagnosis-option.selected .diagnosis-description {
  color: #333;
}

.diagnosis-option.selected .yes-indicator {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}

.diagnosis-option.selected .no-indicator {
  background-color: #f44336;
  color: white;
  border-color: #f44336;
}

/* Mobile responsiveness for diagnosis screening */
@media (max-width: 768px) {
  .diagnosis-options {
    gap: 16px;
  }

  .diagnosis-option {
    padding: 20px;
    gap: 16px;
    min-height: 70px;
  }

  .diagnosis-indicator {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .diagnosis-content {
    padding-right: 32px;
  }

  .diagnosis-title {
    font-size: 18px;
  }

  .diagnosis-description {
    font-size: 14px;
  }

  .diagnosis-option input[type="radio"] {
    width: 18px;
    height: 18px;
    top: 20px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  .diagnosis-option {
    padding: 16px;
    gap: 12px;
    min-height: 60px;
    flex-direction: column;
    text-align: center;
  }

  .diagnosis-indicator {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .diagnosis-content {
    padding-right: 0;
  }

  .diagnosis-title {
    font-size: 16px;
  }

  .diagnosis-description {
    font-size: 13px;
  }

  .diagnosis-option input[type="radio"] {
    width: 16px;
    height: 16px;
    top: 16px;
    right: 16px;
  }
}

/* Consent Form Styles */
.consent-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pdf-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pdf-container embed {
  max-width: 100%;
  height: 600px; /* Increased base height */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.consent-statement {
  background-color: rgba(72, 96, 217, 0.05);
  border: 2px solid rgba(72, 96, 217, 0.2);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.consent-statement p {
  margin: 0;
  color: #333;
  font-weight: 500;
}

.signature-field {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  /* margin: 0 auto; */
}

.signature-field label {
  color: #333;
  font-size: 16px;
  margin-bottom: 8px;
}

.signature-field input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.signature-field input:focus {
  outline: none;
  border-color: #4860d9;
  box-shadow: 0 0 0 3px rgba(72, 96, 217, 0.1);
}

/* Consent button styles */
.continue-container>div {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.finish-button {
  min-width: max-content;
}

/* Mobile responsiveness for consent form */
@media (max-width: 768px) {
  .pdf-container embed {
    height: 400px;
  }

  .consent-statement {
    padding: 15px;
  }

  .consent-statement p {
    font-size: 15px;
  }

  .signature-field {
    max-width: 100%;
  }

  .continue-container>div {
    flex-direction: column;
    gap: 12px;
  }

  /* .finish-button {
    width: 100%;
    max-width: 300px;
  } */
}

@media (max-width: 480px) {
  .pdf-container embed {
    height: 300px;
  }

  .consent-statement p {
    font-size: 14px;
  }

  .signature-field input {
    font-size: 16px;
    padding: 14px;
  }
}

.consent-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  text-align: left;
}

.consent-checkbox-container input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #4860d9;
  margin-top: auto;
  margin-bottom: auto;
}

.consent-checkbox-container label {
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.consent-checkbox-container label:hover {
  color: #4860d9;
}

/* Bottom Button Bar - Always stick to bottom */
.bottom-button-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 3 !important;
  box-sizing: border-box;
}

/* Mobile Video Chat Responsive Styles */

/* New Mobile Chat Header Styles */
.mobile-chat-header {
  display: none;
  padding: 8px 16px;
  /* Reduced from 12px */
  background-color: white;
  border-top: 1px solid #e0e0e0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
  position: relative;
  touch-action: manipulation;
  /* Improve touch precision */
  z-index: 999;
  /* Below mic button but above chat content */
}

.mobile-chat-header:hover {
  background-color: #f8f8f8;
  /* Lighter hover effect */
}

.mobile-chat-header:active {
  background-color: #f0f0f0;
  /* Lighter active effect */
}

.chat-expand-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  /* Reduced from 4px */
}

.swipe-handle {
  width: 32px;
  /* Reduced from 40px */
  height: 3px;
  /* Reduced from 4px */
  background-color: #ccc;
  /* Lighter color */
  border-radius: 2px;
  margin-bottom: 2px;
  /* Reduced from 4px */
}

.expand-text {
  font-size: 10px;
  /* Reduced from 12px */
  color: var(--dark);
  opacity: 0.6;
  /* More subtle */
  font-weight: 400;
  /* Reduced from 500 */
}

.expand-arrow {
  font-size: 16px;
  /* Reduced from 20px */
  color: var(--dark);
  opacity: 0.5;
  /* More subtle */
}

.chat-notification-badge {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #ff4444;
  border-radius: 50%;
  display: none;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.chat-content {
  background-color: white;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Portrait Responsive Styles */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    justify-content: flex-start; /* Start from top instead of center */
    align-items: stretch; /* Use full width */
  }

  .conversation-container {
    flex-direction: column;
    gap: 8px;
    margin: 0px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    align-self: stretch; /* Ensure it uses full width */
  }

  /* Video Container Styles for Mobile */
  .conversation-container>div:first-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  /* Video row container */
  .conversation-container>div:first-child>div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  /* Individual video containers */
  #Nephrologist-Div,
  #Ex-patient-Div {
    flex: 1;
    height: fit-content;
    position: relative; /* Establish positioning context for participant-status */
  }

  /* User video container */
  .conversation-container>div:first-child>div:nth-child(2) {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
  }

  .conversation-container>div:first-child>div:nth-child(2)>div {
    width: 50%;
  }

  /* Make user video same size as agent videos in dual agent scenarios */
  .conversation-container.dual-agents .conversation-container>div:first-child>div:nth-child(2)>div {
    width: 50% !important; /* Same proportion as each agent video */
  }

  /* Video styles for mobile - portrait aspect ratio like FaceTime */
  video {
    width: 100% !important;
    height: auto;
    aspect-ratio: 3 / 4;
    /* Portrait orientation for FaceTime-like appearance */
    margin: 0;
    border-radius: 12px;
    border-width: 2px;
    object-fit: cover;
    /* Crop to fill the container */
    object-position: center;
    /* Center the crop */
  }

  /* Mobile responsive video wrapper and blur overlay */
  .video-wrapper {
    display: block;
    line-height: 0;
  }

  .video-blur-overlay {
    border-radius: 12px;
  }

  /* Mobile responsive video controls */
  .custom-video-controls {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 10px;
  }

  .video-control-btn {
    width: 48px;
    height: 48px;
  }

  .video-control-btn .material-symbols-outlined {
    font-size: 26px;
  }

  #user-camera {
    width: 100% !important;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    border: var(--dark) solid;
    border-width: 2px;
  }

  .camera-off-image {
    width: 100% !important;
    aspect-ratio: 3 / 4;
    margin: 0;
    border-radius: 12px;
    border-width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile layout adjustments for single agent scenarios */
  .conversation-container.single-agent-nephrologist #Nephrologist-Div,
  .conversation-container.single-agent-patient #Ex-patient-Div {
    max-width: 50% !important; /* Limit agent video width when alone */
    margin: 0 auto !important; /* Center the single agent video */
  }

  /* Adjust user video size when there's only one agent */
  .conversation-container.single-agent-nephrologist .conversation-container>div:first-child>div:nth-child(2)>div,
  .conversation-container.single-agent-patient .conversation-container>div:first-child>div:nth-child(2)>div {
    width: 60% !important; /* Match agent video width for better balance */
  }

  /* Ensure top row container centers single agent video properly */
  .conversation-container.single-agent-nephrologist .conversation-container>div:first-child>div:first-child,
  .conversation-container.single-agent-patient .conversation-container>div:first-child>div:first-child {
    justify-content: center !important; /* Center single agent video */
  }

  /* Participant status adjustments for mobile */
  .participant-status {
    bottom: 5px;
    left: 8px;
  }

  .meeting-paricipant-name {
    font-size: 12px;
    padding: 2px 6px;
    margin: auto;
    line-height: 1;
    display: inline-block;
    vertical-align: top;
  }

  /* Mobile Chat Styles */
  .chat-container {
    position: fixed;
    bottom: 75px;
    /* Position above the bottom button bar with small gap */
    left: 0;
    right: 0;
    width: 95%;
    height: auto;
    /* Let content determine height instead of fixed height */
    min-height: 90px;
    /* Just enough for header + input area */
    max-height: 60vh;
    background-color: white;
    border-radius: 16px 16px 0 0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 2;
    /* Below bottom buttons but above content */
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .chat-container.mobile-chat-expanded {
    height: 60vh;
    /* Keep expanded height the same */
  }

  .mobile-chat-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 35px;
    padding: 0 16px;
    /* Reduced from 50px for more minimal design */
  }

  .chat-content {
    flex: 1;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: auto;
    /* Remove fixed min-height, let content determine size */
  }

  .chat-container:not(.mobile-chat-expanded) .chat-content {
    /* Keep input area visible but hide chat box */
    min-height: auto;
    /* Remove fixed min-height */
  }

  .chat-container.mobile-chat-expanded .chat-content {
    opacity: 1;
  }

  .chat-box {
    flex: 1;
    min-height: 0px;
    margin-bottom: 0;
    /* Remove bottom margin since input area is now sticky */
    overflow-y: auto;
    padding: 0 16px;
    opacity: 1;
    max-height: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    border-bottom: 2px solid var(--grey);
  }

  .chat-container.mobile-chat-expanded .chat-box {
    opacity: 1;
    max-height: 400px;
  }

  /* Add blur effect to background when chat is expanded */
  .mobile-chat-expanded-body .conversation-container {
    filter: blur(3px);
    pointer-events: none;
  }

  /* Keep the old selector as fallback but it won't work due to DOM order */
  .chat-container.mobile-chat-expanded~.conversation-container {
    filter: blur(3px);
    pointer-events: none;
  }

  /* Don't blur the bottom button bar - remove this rule */

  .input-area {
    flex-shrink: 0;
    margin-top: auto;
    /* This pushes the input area to the bottom */
    /* padding: 0 16px 16px 16px; */
    /* Reduced bottom padding from 20px to 16px */
    opacity: 1;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
  }

  /* Make input area elements responsive */
  .input-area textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    resize: none;
    min-height: 40px;
    max-height: 80px;
  }

  /* Mobile input wrapper with send button inside */
  .mobile-input-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 0;
    /* Remove bottom margin since we're using margin-top: auto on input-area */
    margin-top: auto;
    /* Ensure it sticks to the bottom */
  }

  .textarea-container {
    position: relative;
    flex: 1;
  }

  .mobile-input-wrapper textarea {
    width: 100%;
    padding-right: 60px !important;
    /* Increased space for send button (18px + 6px position + 16px margin) */
    border-radius: 20px;
    border: 1px solid #ddd;
    padding: 12px 40px 12px 16px;
    font-family: inherit;
    min-height: 40px;
    max-height: 100px;
    box-sizing: border-box;
  }

  .mobile-send-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    right: 10px !important;
  }

  .mobile-send-btn svg {
    width: 10px !important;
    height: 10px !important;
  }

  .mobile-mic-btn {
    background-color: var(--blue);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    /* Higher than chat container to prevent overlap */
    touch-action: manipulation;
    /* Improve touch handling */
  }

  .mobile-mic-btn:hover {
    background-color: var(--orange);
    transform: scale(1.05);
  }

  .mobile-mic-btn .material-symbols-outlined {
    font-size: 24px;
  }

  .mobile-help-btn {
    background-color: rgb(73, 94, 255);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    touch-action: manipulation;
    font-size: 18px;
    font-weight: bold;
  }

  .mobile-help-btn:hover {
    background-color: rgb(50, 70, 200);
    transform: scale(1.05);
  }

  .mobile-button-row {
    display: none;
  }

  /* Hide desktop buttons on mobile */
  .desktop-buttons {
    display: none !important;
  }

  .input-area>div {
    flex-wrap: wrap !important;
    gap: 8px !important;
    /* Reduced gap for better mobile fit */
    margin-top: 8px;
  }

  .input-area button {
    font-size: 14px !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Proper bottom spacing for mobile using modern CSS */
  .conversation-container {
    scroll-padding-bottom: 300px; /* Native CSS for scroll area bottom padding */
    padding-bottom: 120px; /* Visual spacing for last elements */
    box-sizing: border-box;
  }
  
  /* Ensure last child has proper spacing */
  .conversation-container > *:last-child {
    margin-bottom: 180px; /* Additional space for the last element */
  }

  /* Help button adjustments */
  .help-container {
    position: static;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    margin: 0;
    z-index: auto;
  }
}

/* Tablet Portrait Responsive Styles - Same as Mobile Portrait */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    justify-content: flex-start; /* Start from top instead of center */
    align-items: stretch; /* Use full width */
  }

  .conversation-container {
    flex-direction: column;
    gap: 8px;
    margin: 0px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    align-self: stretch; /* Ensure it uses full width */
  }

  /* Video Container Styles for Tablet Portrait - Same as Mobile */
  .conversation-container>div:first-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  /* Video row container */
  .conversation-container>div:first-child>div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  /* Individual video containers - Portrait aspect ratio like mobile */
  .conversation-container>div:first-child>div:first-child>div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* User video container - Same as mobile */
  .conversation-container>div:first-child>div:nth-child(2) {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
  }

  .conversation-container>div:first-child>div:nth-child(2)>div {
    width: 50%; /* Same size relationship as mobile */
    position: relative; /* Establish positioning context for participant-status */
  }

  video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: 3 / 4; /* Portrait aspect ratio like mobile */
    border-radius: 12px;
    border: var(--dark) solid;
    border-width: 2px;
  }

  .camera-off-image {
    width: 100% !important;
    aspect-ratio: 3 / 4; /* Portrait aspect ratio like mobile */
    margin: 0;
    border-radius: 12px;
    border-width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Participant status adjustments */
  .participant-status {
    bottom: 5px;
    left: 8px;
  }

  .meeting-paricipant-name {
    font-size: 12px;
    padding: 2px 6px;
    margin: auto;
    line-height: 1;
    display: inline-block;
    vertical-align: top;
  }

  /* Mobile Chat Styles for Tablet Portrait */
  .chat-container {
    position: fixed;
    bottom: 75px; /* Position above the bottom button bar with small gap */
    left: 0;
    right: 0;
    width: 95%;
    margin: 0 auto;
    height: auto;
    min-height: 90px; /* Enough for header + input area */
    max-height: 60vh;
    background-color: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .chat-container.mobile-chat-expanded {
    height: 60vh;
  }

  .mobile-chat-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 35px;
    padding: 8px 16px;
    background-color: white;
    border-top: 1px solid #e0e0e0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    position: relative;
  }

  .chat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Remove opacity: 0 - content should always be visible, only chat-box should hide */
    transition: all 0.3s ease;
    min-height: 0;
  }

  /* Only hide the chat-box (message history) when collapsed, not the entire content */
  .chat-box {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    opacity: 0; /* Hide chat history when collapsed */
    max-height: 0; /* Collapse chat history */
    transition: all 0.3s ease;
  }

  .chat-container.mobile-chat-expanded .chat-box {
    opacity: 1; /* Show chat history when expanded */
    max-height: 400px; /* Expand chat history */
  }

  /* Input area - Always visible since chat-content is always visible */
  .input-area {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 8px 12px 16px 12px; /* Reduced horizontal padding to prevent overflow */
    margin-top: auto; /* Keep it at bottom */
    box-sizing: border-box;
    width: 100%; /* Ensure it doesn't exceed container width */
  }

  /* Use mobile-style bottom spacing */
  .conversation-container {
    scroll-padding-bottom: 300px;
    padding-bottom: 120px;
    box-sizing: border-box;
  }
  
  .conversation-container > *:last-child {
    margin-bottom: 180px;
  }

  /* Tablet Portrait Input Styles - Optimized to prevent overflow */
  .mobile-input-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px; /* Reduced gap to prevent overflow */
    margin-bottom: 0;
    margin-top: auto;
    padding: 4px 0;
    width: 100%;
    box-sizing: border-box;
  }

  .textarea-container {
    position: relative;
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
    max-width: calc(100% - 60px); /* Reserve space for mic button */
  }

  .mobile-input-wrapper textarea {
    width: 100%;
    padding: 14px 60px 14px 16px !important; /* Reduced padding to prevent overflow */
    border-radius: 20px; /* Reduced border radius for better fit */
    border: 2px solid #ddd;
    font-family: inherit;
    font-size: 15px; /* Slightly smaller font to fit better */
    min-height: 44px; /* Reduced height to fit better */
    max-height: 100px; /* Reduced max height */
    box-sizing: border-box;
    resize: none;
    line-height: 1.4;
    transition: border-color 0.2s ease;
  }

  .mobile-input-wrapper textarea:focus {
    border-color: var(--blue);
    outline: none;
  }

  .mobile-send-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }

  .mobile-send-btn:not(:disabled):hover {
    transform: translateY(50%) scale(1.1) !important;
  }

  .mobile-mic-btn {
    background-color: var(--blue);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px; /* Reduced back to original size to prevent overflow */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    touch-action: manipulation;
    font-size: 18px; /* Reduced icon size */
    font-weight: bold;
  }

  .mobile-mic-btn:hover {
    background-color: var(--orange);
    transform: scale(1.05);
  }

  .mobile-help-btn {
    background-color: rgb(73, 94, 255);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px; /* Reduced back to original size */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    touch-action: manipulation;
    font-size: 18px; /* Reduced text size */
    font-weight: bold;
  }

  .mobile-help-btn:hover {
    background-color: rgb(50, 70, 200);
    transform: scale(1.05);
  }

  /* Hide desktop buttons */
  .desktop-buttons {
    display: none !important;
  }

  /* Help button adjustments */
  .help-container {
    position: static;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    margin: 0;
    z-index: auto;
  }
}

/* Universal Landscape Layout - Side-by-Side for ALL devices in landscape */
@media (orientation: landscape) {
  /* Set up body for side-by-side layout with main content area */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 8px;
    margin: 0;
    overflow: auto !important;
    box-sizing: border-box;
    position: relative;
  }

  /* Create a main content row that contains conversation and chat */
  body > .conversation-container,
  body > .chat-container {
    display: flex;
  }

  /* Main content wrapper - make it a row container */
  body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 100vh;
    padding: 8px;
    margin: 0;
    overflow: scroll;
    box-sizing: border-box;
  }

  /* Conversation container takes remaining space */
  .conversation-container {
    flex: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  /* Conversation content */
  .conversation-container > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
    margin: 0px !important;
  }

  /* Video layout for landscape - rows of videos */
  .conversation-container > div:first-child > div:first-child {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    justify-content: center;
  }

  .conversation-container > div:first-child > div:first-child > div {
    flex: 1;
    min-width: 0;
    max-width: calc(50% - 6px);
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
  }

  /* User video row */
  .conversation-container > div:first-child > div:nth-child(2) {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
  }

  .conversation-container > div:first-child > div:nth-child(2) > div {
    width: calc(50% - 6px); /* Same width as the other videos */
    max-width: calc(50% - 6px);
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
  }

  /* Simplified video sizing for landscape - let JavaScript handle optimization */
  .conversation-container video {
    /* Default reasonable size - JavaScript will override with optimal dimensions */
    width: 25vw;
    height: 18.75vh; /* 4:3 ratio as fallback */
    object-fit: cover !important;
    border-radius: clamp(4px, 0.8vw, 10px);
    box-sizing: border-box;
    /* Remove complex constraints - JavaScript handles sizing */
  }

  .conversation-container .camera-off-image {
    /* Match video sizing - JavaScript will optimize */
    width: 25vw;
    height: 18.75vh;
    border-radius: clamp(4px, 0.8vw, 10px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Landscape layout adjustments for single agent scenarios */
  .conversation-container.single-agent-nephrologist > div:first-child > div:first-child > div,
  .conversation-container.single-agent-patient > div:first-child > div:first-child > div {
    flex: none !important; /* Remove flex-grow for single agent */
    max-width: none !important; /* Remove max-width constraint */
    width: auto !important; /* Let content determine width */
  }

  /* Center single agent in landscape */
  .conversation-container.single-agent-nephrologist > div:first-child > div:first-child,
  .conversation-container.single-agent-patient > div:first-child > div:first-child {
    justify-content: center !important; /* Center single agent video */
  }

  /* Adjust user video to be smaller when there's only one agent in landscape */
  .conversation-container.single-agent-nephrologist > div:first-child > div:nth-child(2) > div,
  .conversation-container.single-agent-patient > div:first-child > div:nth-child(2) > div {
    width: auto !important; /* Let JavaScript determine width */
    max-width: none !important; /* Remove width constraints completely */
    min-width: 0 !important; /* Allow any size */
    flex: none !important; /* Remove flex constraints */
  }

  .mobile-chat-header {
    display: none !important;
  }

  /* Hide mobile push-to-talk elements in landscape */
  #mic-toggleButton,
  .finish-talking-button,
  .mobile-mic-btn {
    display: none !important;
  }

  /* Chat container as flex child - match inner-conversation-container height */
  .chat-container {
    position: static !important;
    width: clamp(240px, 30vw, 350px); /* Better responsive sizing */
    max-width: 350px;
    min-width: 240px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin: auto !important;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: white;
    flex-shrink: 0;
    transform: none !important;
    align-self: flex-start; /* Align to start to match inner container */
    /* Smooth height transitions */
    transition: height 0.3s ease-in-out;
    /* Height will be set to match inner-conversation-container via CSS custom property */
  }

  .chat-content {
    height: 100%;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    flex: 1; /* Take available space */
  }

  .chat-box {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 12px;
    font-size: 14px;
  }

  /* Input area for landscape - responsive layout */
  .input-area {
    flex-shrink: 0;
    padding: 8px 0px;
    background-color: white;
    border-top: 1px solid #eee;
  }

  /* Mobile input wrapper - show textarea container with inline button */
  .mobile-input-wrapper {
    display: flex;
    gap: 0;
    align-items: flex-end;
  }

  .textarea-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }

  .mobile-input-wrapper textarea {
    flex: 1;
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    min-height: 40px !important;
    max-height: 100px !important;
    padding: 10px 45px 10px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd;
    resize: none;
    box-sizing: border-box;
  }

  /* Override user-input width constraints in landscape */
  .user-input {
    width: 100% !important;
    flex: 1 !important;
    max-width: none !important;
  }

  /* Show mobile send button in landscape/desktop */
  .mobile-send-btn {
    display: flex !important;
  }

  /* Hide mobile mic button in landscape - override any previous rules */
  .mobile-mic-btn {
    display: none !important;
  }

  /* Desktop buttons - keep hidden since we're using mobile-style inline button */
  .desktop-buttons {
    display: none !important;
  }

  .desktop-buttons button {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Desktop send button SVG styling */
  .desktop-buttons button svg {
    width: 16px !important;
    height: 16px !important;
    margin-left: 4px;
  }

  /* Desktop send button specific styling */
  #send-btn-desktop {
    background-color: var(--blue) !important;
    color: white !important;
  }

  #send-btn-desktop:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    cursor: not-allowed;
  }

  #mic-toggleButton-desktop:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
  }

  /* Hide mobile button row completely */
  .mobile-button-row {
    display: none !important;
  }

  /* Bottom button bar positioning for landscape - responsive and optimized */
  .bottom-button-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: clamp(6px, 1.5vh, 12px) clamp(8px, 2vw, 16px) !important;
    background-color: rgb(12, 12, 12);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Responsive button sizing for landscape - Same height, min-width equals height */
  .bottom-button-bar .finish-button {
    padding: clamp(6px, 1.2vh, 12px) clamp(8px, 2vw, 16px) !important;
    font-size: clamp(11px, 2vh, 14px) !important;
    height: clamp(32px, 6vh, 48px) !important; /* Fixed height for all buttons */
    min-height: clamp(32px, 6vh, 48px) !important;
    max-height: clamp(32px, 6vh, 48px) !important;
    width: fit-content !important; /* Let width fit the content */
    min-width: clamp(32px, 6vh, 48px) !important; /* Min-width equals height */
    max-width: none !important;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* Icon buttons - same height and min-width as text buttons */
  .bottom-button-bar .finish-button:has(.material-symbols-outlined) {
    width: fit-content !important;
    min-width: clamp(32px, 6vh, 48px) !important; /* Min-width equals height */
    max-width: none !important;
    aspect-ratio: unset !important; /* Remove square constraint */
    padding: clamp(6px, 1.2vh, 12px) !important; /* Square padding for icons */
  }

  /* Help button - same height and min-width as others */
  .bottom-button-bar .finish-button[id="help-icon"] {
    width: fit-content !important;
    min-width: clamp(32px, 6vh, 48px) !important; /* Min-width equals height */
    max-width: none !important;
    aspect-ratio: unset !important;
  }

  /* End Meeting button - same height and min-width as others */
  .bottom-button-bar .finish-button[id="finish-button"] {
    width: fit-content !important;
    min-width: clamp(32px, 6vh, 48px) !important; /* Min-width equals height */
    max-width: none !important;
    font-weight: 600;
  }

  /* Responsive gap and flex behavior for button container */
  .bottom-button-bar > div {
    gap: clamp(6px, 1.5vw, 12px) !important;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Questionnaire responsive styles for landscape */
  .topic-questionnaire-card {
    margin: clamp(12px, 2vh, 20px) clamp(8px, 2vw, 16px) !important;
    padding: clamp(16px, 3vh, 24px) clamp(12px, 3vw, 20px) !important;
    max-width: 65vw !important; /* Optimize for landscape width */
    border-radius: clamp(8px, 2vw, 12px);
  }

  .topics-grid-CKDPilotQuestionnaire {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 45vw, 350px), 1fr));
    gap: clamp(8px, 2vw, 12px);
    margin-top: clamp(12px, 2vh, 16px);
  }

  .topic-card {
    padding: clamp(12px, 2vh, 16px) clamp(10px, 2vw, 14px);
    gap: clamp(8px, 1.5vw, 12px);
    border-radius: clamp(4px, 1vw, 6px);
  }

  .kidney-stage-option {
    padding: clamp(12px, 2vh, 16px) clamp(10px, 2vw, 14px);
    gap: clamp(8px, 1.5vw, 12px);
    border-radius: clamp(4px, 1vw, 6px);
  }

  .kidney-stage-option .stage-title {
    font-size: clamp(13px, 2.2vh, 16px) !important;
    line-height: 1.3;
  }

  .kidney-stage-option .stage-description {
    font-size: clamp(11px, 1.8vh, 14px) !important;
    line-height: 1.4;
  }

  .kidney-stage-option .stage-example {
    font-size: clamp(10px, 1.6vh, 12px) !important;
    line-height: 1.3;
  }

  .diagnosis-option {
    padding: clamp(12px, 2vh, 16px) clamp(10px, 2vw, 14px);
    gap: clamp(8px, 1.5vw, 12px);
    border-radius: clamp(4px, 1vw, 6px);
  }

  .diagnosis-option .diagnosis-title {
    font-size: clamp(14px, 2.5vh, 18px) !important;
  }

  .diagnosis-option .diagnosis-description {
    font-size: clamp(11px, 1.8vh, 14px) !important;
  }

  .continue-container {
    padding: clamp(12px, 2vh, 16px) clamp(8px, 2vw, 12px) !important;
    margin-bottom: clamp(60px, 12vh, 80px) !important; /* Account for bottom bar */
  }

  .continue-container .finish-button {
    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 3vw, 16px) !important;
    font-size: clamp(12px, 2vh, 14px) !important;
    border-radius: clamp(4px, 1vw, 6px);
    min-height: clamp(36px, 6vh, 44px);
  }

  /* PDF container for consent form */
  .pdf-container embed {
    height: clamp(500px, 70vh, 800px) !important; /* Much taller for landscape/desktop */
    border-radius: clamp(4px, 1vw, 6px);
  }

  /* Consent form elements */
  .consent-statement {
    margin: clamp(16px, 3vh, 20px) 0;
  }

  .consent-statement label {
    font-size: clamp(12px, 2vh, 14px) !important;
  }

  .signature-field {
    margin: clamp(16px, 3vh, 20px) 0;
  }

  .signature-field input {
    padding: clamp(8px, 1.5vh, 10px) !important;
    font-size: clamp(12px, 2vh, 14px) !important;
    border-radius: clamp(4px, 1vw, 6px) !important;
  }

  /* Thank you content */
  .thank-you-content {
    padding: clamp(20px, 4vh, 30px) clamp(12px, 3vw, 16px);
  }

  .thank-you-title {
    font-size: clamp(1.5rem, 4vh, 2rem) !important;
  }

  .thank-you-message {
    font-size: clamp(14px, 2.2vh, 16px) !important;
  }
}

/* Universal Portrait Orientation Styles - Enhanced Responsiveness */
@media (orientation: portrait) {
  /* Questionnaire responsive styles for portrait */
  .topic-questionnaire-card {
    margin: auto !important;
    padding: clamp(16px, 5vw, 24px) clamp(12px, 4vw, 16px) !important;
    max-width: 90vw !important; /* Optimize for portrait width */
    width: calc(100vw - clamp(16px, 8vw, 24px)) !important;
    border-radius: clamp(8px, 3vw, 12px);
    box-sizing: border-box;
  }

  .topics-grid-CKDPilotQuestionnaire {
    display: grid;
    grid-template-columns: 1fr; /* Single column for portrait */
    gap: clamp(8px, 2.5vw, 12px);
    margin-top: clamp(12px, 3vw, 16px);
  }

  .topic-card {
    padding: clamp(12px, 4vw, 16px) clamp(10px, 3vw, 14px);
    gap: clamp(8px, 2.5vw, 12px);
    border-radius: clamp(6px, 2vw, 8px);
    min-height: clamp(80px, 15vw, 100px);
  }

  .topic-card .topic-content h4 {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.3;
  }

  .topic-card .topic-content p {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.4;
  }

  .kidney-stage-option {
    padding: clamp(12px, 4vw, 16px) clamp(10px, 3vw, 14px);
    gap: clamp(8px, 2.5vw, 12px);
    border-radius: clamp(6px, 2vw, 8px);
    min-height: clamp(100px, 20vw, 120px);
  }

  .kidney-stage-option .stage-title {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.3;
  }

  .kidney-stage-option .stage-description {
    font-size: clamp(11px, 3.2vw, 13px) !important;
    line-height: 1.4;
  }

  .kidney-stage-option .stage-example {
    font-size: clamp(10px, 3vw, 12px) !important;
    line-height: 1.3;
    font-style: italic;
  }

  .kidney-stage-option .stage-indicator {
    font-size: clamp(16px, 5vw, 20px) !important;
    width: clamp(28px, 7vw, 32px);
    height: clamp(28px, 7vw, 32px);
  }

  .diagnosis-option {
    padding: clamp(12px, 4vw, 16px) clamp(10px, 3vw, 14px);
    gap: clamp(8px, 2.5vw, 12px);
    border-radius: clamp(6px, 2vw, 8px);
    min-height: clamp(80px, 15vw, 100px);
  }

  .diagnosis-option .diagnosis-title {
    font-size: clamp(16px, 4.5vw, 18px) !important;
  }

  .diagnosis-option .diagnosis-description {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.4;
  }

  .diagnosis-option .diagnosis-indicator {
    font-size: clamp(18px, 5vw, 22px) !important;
    width: clamp(32px, 8vw, 36px);
    height: clamp(32px, 8vw, 36px);
  }

  .continue-container {
    padding: clamp(12px, 4vw, 16px) clamp(8px, 3vw, 12px) !important;
    margin-bottom: clamp(80px, 20vw, 100px) !important; /* Account for mobile keyboards */
  }

  .continue-container .finish-button {
    padding: clamp(10px, 3vw, 14px) clamp(16px, 5vw, 20px) !important;
    font-size: clamp(14px, 4vw, 16px) !important;
    border-radius: clamp(6px, 2vw, 8px);
    min-height: clamp(44px, 12vw, 52px);
    width: 100%;
    max-width: clamp(200px, 60vw, 300px);
    margin: clamp(4px, 2vw, 8px) auto;
    display: block;
  }

  /* Multiple buttons in portrait - side by side with responsive sizing */
  .continue-container div[style*="display: flex"] {
    flex-direction: column !important;
    gap: clamp(8px, 3vw, 12px) !important;
    align-items: center !important;
  }

  .continue-container div[style*="display: flex"] .finish-button {
    width: 100% !important;
    max-width: clamp(200px, 70vw, 320px) !important;
  }

  /* PDF container for consent form - optimized for portrait */
  .pdf-container embed {
    height: clamp(400px, 70vw, 600px) !important; /* Taller for portrait */
    border-radius: clamp(6px, 2vw, 8px);
    width: 100% !important;
  }

  /* Consent form elements */
  .consent-statement {
    margin: clamp(16px, 4vw, 20px) 0;
  }

  .consent-statement .consent-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 3vw, 12px);
  }

  .consent-statement label {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.5;
  }

  .consent-statement input[type="checkbox"] {
    transform: scale(clamp(1.2, 0.3vw, 1.5)) !important;
    margin-top: clamp(2px, 1vw, 4px) !important;
    flex-shrink: 0;
  }

  .signature-field {
    margin: clamp(16px, 4vw, 20px) 0;
  }

  .signature-field label {
    font-size: clamp(14px, 4vw, 16px) !important;
    margin-bottom: clamp(6px, 2vw, 8px) !important;
  }

  .signature-field input {
    padding: clamp(10px, 3vw, 14px) !important;
    font-size: clamp(14px, 4vw, 16px) !important;
    border-radius: clamp(6px, 2vw, 8px) !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Thank you content - optimized for portrait */
  .thank-you-content {
    padding: clamp(24px, 6vw, 32px) clamp(16px, 4vw, 20px);
    text-align: center;
  }

  .thank-you-title {
    font-size: clamp(1.8rem, 8vw, 2.2rem) !important;
    margin-bottom: clamp(16px, 4vw, 20px);
  }

  .thank-you-message {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.5;
    margin-bottom: clamp(12px, 3vw, 16px);
  }

  .thank-you-submessage {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.4;
  }

  /* Ranking styles for portrait */
  .ranking-list {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.5vw, 12px);
  }

  .ranking-item {
    padding: clamp(10px, 3vw, 14px);
    border-radius: clamp(6px, 2vw, 8px);
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  /* Form titles and instructions */
  #questionnaire-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    margin-bottom: clamp(12px, 3vw, 16px);
    text-align: center;
  }

  #questionnaire-instructions {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.5;
    margin-bottom: clamp(16px, 4vw, 20px);
    text-align: center;
  }

  .alex-container {
    padding: clamp(12px, 4vw, 16px) !important;
  }

  .topics-container {
    padding: clamp(8px, 3vw, 12px) !important;
  }
}

/* CKD Questionnaire Landscape Enhancements */
@media (orientation: landscape) {
  .ckd-topic-select-questionnaire-div .alex-container {
    margin-bottom: clamp(32px, 5vh, 48px) !important;
  }
  
  /* Button Right Alignment in Landscape */
  .continue-container {
    display: flex !important;
    justify-content: flex-end !important;
  }
  
  #diagnosis-continue-button,
  #stage-continue-button,
  #continue-button,
  #finish-button {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Portrait Button Centering */
@media (orientation: portrait) {
  .continue-container {
    display: flex !important;
    justify-content: center !important;
  }
  
  #diagnosis-continue-button,
  #stage-continue-button,
  #continue-button,
  #finish-button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Specific Card Margin Overrides - Both Orientations */
/* Force finish-button margin-right to 0 */
#finish-button {
  margin-right: 0px !important;
}

/* CKD Topics Questionnaire Submit Button - Copy of finish-button without margin-right override */
#ckd-topics-questionnaire-submit-button {
  width: 105px;
  padding: 11px;
  border-radius: 8px;
}

#ckd-topics-questionnaire-submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#kidney-stage-card {
  margin: auto !important;
}

#topic-selection-card {
  margin: auto !important;
}

#ranking-card {
  margin: auto !important;
}

/* Topic of Interest Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .topic-of-interest-container {
    flex-direction: column !important;
    padding: clamp(12px, 4vw, 20px) !important;
    gap: clamp(16px, 5vw, 24px) !important;
    margin: clamp(8px, 3vw, 16px) auto !important;
  }

  .topic-of-interest-container .alex-container {
    max-width: 100% !important;
    width: 100% !important;
    order: 1;
    margin: 0 auto clamp(16px, 4vw, 24px) auto !important;
    padding: clamp(12px, 4vw, 20px);
  }

  .topic-of-interest-container .alex-container h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: clamp(12px, 3vw, 16px);
  }

  .topic-of-interest-container .alex-container h5 {
    font-size: clamp(14px, 4vw, 16px) !important;
    margin-bottom: clamp(8px, 2vw, 12px);
  }

  .topic-of-interest-container .topics-container {
    padding: clamp(8px, 3vw, 12px);
  }

  .topic-of-interest-container .topics-container p {
    font-size: clamp(14px, 4vw, 16px) !important;
    max-width: 100% !important;
    text-align: center;
    line-height: 1.5;
  }

  /* Topic Selection Section Mobile Styles */
  .topic-of-interest-container #topic-selection {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(16px, 5vw, 24px);
    margin: 0 !important;
    background-color: #f8f9fa;
    border-radius: clamp(8px, 2vw, 12px);
  }

  .topic-of-interest-container .topic-selection-container h4 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    text-align: center;
    margin-bottom: clamp(12px, 3vw, 16px);
    color: #333;
  }

  .topic-of-interest-container .topic-instruction {
    font-size: clamp(14px, 4vw, 16px) !important;
    text-align: center;
    margin-bottom: clamp(16px, 4vw, 20px);
    color: #666;
    line-height: 1.5;
  }

  .topic-of-interest-container .topics-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(12px, 3vw, 16px) !important;
    margin: clamp(16px, 4vw, 20px) 0 !important;
  }

  .topic-of-interest-container .topics-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }

  .topic-of-interest-container .topic-item {
    padding: clamp(12px, 4vw, 16px) !important;
    margin: clamp(6px, 2vw, 10px) 0 !important;
    border-radius: clamp(6px, 2vw, 8px);
    background-color: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }

  .topic-of-interest-container .topic-item:hover {
    border-color: #4860d9;
    box-shadow: 0 4px 12px rgba(72, 96, 217, 0.15);
  }

  .topic-of-interest-container .topic-item.selected {
    background-color: rgba(73, 94, 255, 0.1);
    border-color: rgb(73, 94, 255);
  }
}

/* Extra Small Mobile Screens */
@media (max-width: 480px) {
  .topic-of-interest-container {
    padding: clamp(8px, 3vw, 16px) !important;
    gap: clamp(12px, 4vw, 20px) !important;
    margin: clamp(6px, 2vw, 12px) auto !important;
  }

  .topic-of-interest-container .alex-container {
    padding: clamp(8px, 3vw, 16px);
    margin: 0 auto clamp(12px, 3vw, 20px) auto !important;
  }

  .topic-of-interest-container .alex-container h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  .topic-of-interest-container #topic-selection {
    padding: clamp(12px, 4vw, 20px);
    border-radius: clamp(6px, 1.5vw, 10px);
  }

  .topic-of-interest-container .topic-selection-container h4 {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  .topic-of-interest-container .topic-instruction {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  .topic-of-interest-container .topics-grid {
    gap: clamp(8px, 2.5vw, 12px) !important;
    margin: clamp(12px, 3vw, 16px) 0 !important;
  }

  .topic-of-interest-container .topic-item {
    padding: clamp(10px, 3vw, 14px) !important;
    margin: clamp(4px, 1.5vw, 8px) 0 !important;
    border-radius: clamp(4px, 1.5vw, 6px);
  }
}

/* Knowledge Test Container - Copied from conversation-container with responsive enhancements */
.knowledge-test-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Knowledge Test Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .knowledge-test-container {
    flex-direction: column !important;
    gap: clamp(12px, 4vw, 20px) !important;
    margin: clamp(8px, 3vw, 16px) auto !important;
    padding: clamp(12px, 4vw, 20px) !important;
    max-width: 95vw !important;
    align-items: stretch !important;
  }

  .knowledge-test-container .alex-container {
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: 0 auto clamp(16px, 4vw, 24px) auto;
    text-align: center;
  }

  .knowledge-test-container .alex-container h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: clamp(12px, 3vw, 16px);
  }

  .knowledge-test-container .topics-container {
    padding: clamp(8px, 3vw, 12px);
    text-align: center;
  }

  .knowledge-test-container .topics-container p {
    font-size: clamp(14px, 4vw, 16px) !important;
    max-width: 100% !important;
    text-align: center;
    line-height: 1.5;
    margin: clamp(8px, 2vw, 12px) auto;
  }

  /* Self Assessment Container Mobile */
  .knowledge-test-container .self-assessment-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: clamp(8px, 2vw, 16px) 0;
    background-color: #f8f9fa;
    border-radius: clamp(8px, 2vw, 12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* Questions Container Mobile */
  .knowledge-test-container .questions-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: clamp(8px, 2vw, 16px) 0;
  }

  .knowledge-test-container .question-item {
    padding: clamp(12px, 4vw, 18px) !important;
    margin: clamp(8px, 2vw, 12px) 0 !important;
    border-radius: clamp(6px, 2vw, 10px);
    background-color: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .knowledge-test-container .question-text {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.5;
    margin-bottom: clamp(12px, 3vw, 16px);
    text-align: left;
  }

  .knowledge-test-container .answer-options {
    display: flex;
    flex-direction: column !important;
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 2.5vw, 15px);
  }

  .knowledge-test-container .answer-option {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    padding: clamp(8px, 2vw, 12px) !important;
    border-radius: clamp(4px, 1vw, 6px);
    min-height: clamp(40px, 10vw, 48px);
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
  }

  .knowledge-test-container .radio-custom {
    width: clamp(16px, 4vw, 20px) !important;
    height: clamp(16px, 4vw, 20px) !important;
    margin-right: clamp(8px, 2vw, 12px) !important;
  }
}

/* Extra Small Mobile Screens for Knowledge Test */
@media (max-width: 480px) {
  .knowledge-test-container {
    margin: clamp(6px, 2vw, 12px) auto !important;
    padding: clamp(8px, 3vw, 16px) !important;
    max-width: 98vw !important;
  }

  .knowledge-test-container .alex-container {
    padding: clamp(8px, 3vw, 16px);
    margin: 0 auto clamp(12px, 3vw, 20px) auto;
  }

  .knowledge-test-container .alex-container h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  .knowledge-test-container .self-assessment-container,
  .knowledge-test-container .questions-container {
    padding: clamp(8px, 3vw, 16px);
    margin: clamp(6px, 1.5vw, 12px) 0;
    border-radius: clamp(6px, 1.5vw, 10px);
  }

  .knowledge-test-container .question-item {
    padding: clamp(8px, 3vw, 14px) !important;
    margin: clamp(6px, 1.5vw, 10px) 0 !important;
  }

  .knowledge-test-container .question-text {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  .knowledge-test-container .answer-option {
    font-size: clamp(11px, 3vw, 13px) !important;
    padding: clamp(6px, 1.5vw, 10px) !important;
    min-height: clamp(36px, 9vw, 44px);
  }
}

/* Self-Efficacy Test Container - Copied from conversation-container with responsive enhancements */
.self-efficacy-test-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Self-Efficacy Test Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .self-efficacy-test-container {
    flex-direction: column !important;
    gap: clamp(12px, 4vw, 20px) !important;
    margin: clamp(8px, 3vw, 16px) auto !important;
    padding: clamp(12px, 4vw, 20px) !important;
    max-width: 95vw !important;
    align-items: stretch !important;
  }

  .self-efficacy-test-container .alex-container {
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: 0 auto clamp(16px, 4vw, 24px) auto;
    text-align: center;
  }

  .self-efficacy-test-container .alex-container h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: clamp(12px, 3vw, 16px);
  }

  .self-efficacy-test-container .topics-container {
    padding: clamp(8px, 3vw, 12px);
    text-align: center;
  }

  .self-efficacy-test-container .topics-container p {
    font-size: clamp(14px, 4vw, 16px) !important;
    max-width: 100% !important;
    text-align: center;
    line-height: 1.5;
    margin: clamp(8px, 2vw, 12px) auto;
  }

  /* Self-Efficacy Questions Container Mobile */
  .self-efficacy-test-container .self-efficacy-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: clamp(8px, 2vw, 16px) 0;
  }

  .self-efficacy-test-container .efficacy-question {
    padding: clamp(12px, 4vw, 18px) !important;
    margin: clamp(8px, 2vw, 12px) 0 !important;
    border-radius: clamp(6px, 2vw, 10px);
    background-color: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .self-efficacy-test-container .efficacy-question-text {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.5;
    margin-bottom: clamp(12px, 3vw, 16px);
    text-align: left;
  }

  .self-efficacy-test-container .scale-container {
    display: flex;
    flex-direction: column !important;
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 2.5vw, 15px);
  }

  .self-efficacy-test-container .scale-option {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    padding: clamp(8px, 2vw, 12px) !important;
    border-radius: clamp(4px, 1vw, 6px);
    min-height: clamp(40px, 10vw, 48px);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
  }

  .self-efficacy-test-container .scale-option:hover {
    background-color: #e9ecef;
  }

  .self-efficacy-test-container .scale-value {
    font-weight: bold;
    margin-left: clamp(8px, 2vw, 12px) !important;
    color: #007bff;
  }

  .self-efficacy-test-container .radio-custom {
    width: clamp(16px, 4vw, 20px) !important;
    height: clamp(16px, 4vw, 20px) !important;
    margin-right: clamp(8px, 2vw, 12px) !important;
  }
}

/* Extra Small Mobile Screens for Self-Efficacy Test */
@media (max-width: 480px) {
  .self-efficacy-test-container {
    margin: clamp(6px, 2vw, 12px) auto !important;
    padding: clamp(8px, 3vw, 16px) !important;
    max-width: 98vw !important;
  }

  .self-efficacy-test-container .alex-container {
    padding: clamp(8px, 3vw, 16px);
    margin: 0 auto clamp(12px, 3vw, 20px) auto;
  }

  .self-efficacy-test-container .alex-container h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  .self-efficacy-test-container .self-efficacy-container {
    padding: clamp(8px, 3vw, 16px);
    margin: clamp(6px, 1.5vw, 12px) 0;
  }

  .self-efficacy-test-container .efficacy-question {
    padding: clamp(8px, 3vw, 14px) !important;
    margin: clamp(6px, 1.5vw, 10px) 0 !important;
    border-radius: clamp(6px, 1.5vw, 10px);
  }

  .self-efficacy-test-container .efficacy-question-text {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  .self-efficacy-test-container .scale-option {
    font-size: clamp(11px, 3vw, 13px) !important;
    padding: clamp(6px, 1.5vw, 10px) !important;
    min-height: clamp(36px, 9vw, 44px);
  }

  .self-efficacy-test-container .scale-value {
    margin-left: clamp(6px, 1.5vw, 10px) !important;
  }
}

/* Intent Questions Container - Copied from conversation-container with responsive enhancements */
.intent-questions-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Intent Questions Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .intent-questions-container {
    flex-direction: column !important;
    gap: clamp(12px, 4vw, 20px) !important;
    margin: clamp(8px, 3vw, 16px) auto !important;
    padding: clamp(12px, 4vw, 20px) !important;
    max-width: 95vw !important;
    align-items: stretch !important;
  }

  .intent-questions-container .alex-container {
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: 0 auto clamp(16px, 4vw, 24px) auto;
    text-align: center;
  }

  .intent-questions-container .alex-container h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: clamp(12px, 3vw, 16px);
  }

  .intent-questions-container .topics-container {
    padding: clamp(8px, 3vw, 12px);
    text-align: center;
  }

  .intent-questions-container .topics-container p {
    font-size: clamp(14px, 4vw, 16px) !important;
    max-width: 100% !important;
    text-align: center;
    line-height: 1.5;
    margin: clamp(8px, 2vw, 12px) auto;
  }

  /* Intent Questions Container Mobile */
  .intent-questions-container .intent-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(12px, 4vw, 20px);
    margin: clamp(8px, 2vw, 16px) 0;
  }

  .intent-questions-container .intent-question {
    padding: clamp(12px, 4vw, 18px) !important;
    margin: clamp(8px, 2vw, 12px) 0 !important;
    border-radius: clamp(6px, 2vw, 10px);
    background-color: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .intent-questions-container .intent-question-text {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.5;
    margin-bottom: clamp(12px, 3vw, 16px);
    text-align: left;
  }

  .intent-questions-container .likert-scale {
    display: flex;
    flex-direction: column !important;
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 2.5vw, 15px);
  }

  .intent-questions-container .likert-option {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    padding: clamp(8px, 2vw, 12px) !important;
    border-radius: clamp(4px, 1vw, 6px);
    min-height: clamp(40px, 10vw, 48px);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
  }

  .intent-questions-container .likert-option:hover {
    background-color: #e9ecef;
  }

  .intent-questions-container .likelihood-value {
    font-weight: bold;
    margin-left: clamp(8px, 2vw, 12px) !important;
    color: #28a745;
  }

  .intent-questions-container .radio-custom {
    width: clamp(16px, 4vw, 20px) !important;
    height: clamp(16px, 4vw, 20px) !important;
    margin-right: clamp(8px, 2vw, 12px) !important;
  }
}

/* Extra Small Mobile Screens for Intent Questions */
@media (max-width: 480px) {
  .intent-questions-container {
    margin: clamp(6px, 2vw, 12px) auto !important;
    padding: clamp(8px, 3vw, 16px) !important;
    max-width: 98vw !important;
  }

  .intent-questions-container .alex-container {
    padding: clamp(8px, 3vw, 16px);
    margin: 0 auto clamp(12px, 3vw, 20px) auto;
  }

  .intent-questions-container .alex-container h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  .intent-questions-container .intent-container {
    padding: clamp(8px, 3vw, 16px);
    margin: clamp(6px, 1.5vw, 12px) 0;
  }

  .intent-questions-container .intent-question {
    padding: clamp(8px, 3vw, 14px) !important;
    margin: clamp(6px, 1.5vw, 10px) 0 !important;
    border-radius: clamp(6px, 1.5vw, 10px);
  }

  .intent-questions-container .intent-question-text {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  .intent-questions-container .likert-option {
    font-size: clamp(11px, 3vw, 13px) !important;
    padding: clamp(6px, 1.5vw, 10px) !important;
    min-height: clamp(36px, 9vw, 44px);
  }

  .intent-questions-container .likelihood-value {
    margin-left: clamp(6px, 1.5vw, 10px) !important;
  }
}

/* Intervention Instructions Container - Copied from conversation-container with responsive enhancements */
.intervention-instructions-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Intervention Instructions Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .intervention-instructions-container {
    margin: clamp(8px, 3vw, 16px) auto !important;
    padding: clamp(12px, 4vw, 20px) !important;
    max-width: 95vw !important;
  }
}

/* Extra Small Mobile Screens for Intervention Instructions */
@media (max-width: 480px) {
  .intervention-instructions-container {
    margin: clamp(6px, 2vw, 12px) auto !important;
    padding: clamp(8px, 3vw, 16px) !important;
    max-width: 98vw !important;
  }
}

/* Trust Container - Copied from conversation-container with responsive enhancements */
.trust-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Trust Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .trust-container {
    margin: clamp(8px, 3vw, 16px) auto !important;
    padding: clamp(12px, 4vw, 20px) !important;
    max-width: 95vw !important;
  }
}

/* Extra Small Mobile Screens for Trust Container */
@media (max-width: 480px) {
  .trust-container {
    margin: clamp(6px, 2vw, 12px) auto !important;
    padding: clamp(8px, 3vw, 16px) !important;
    max-width: 98vw !important;
  }
}

/* Demographics Container - Copied from conversation-container with responsive enhancements */
.demographics-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 16px 16px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Demographics Container - Mobile Responsive Styles */
@media (max-width: 768px) {
  .demographics-container {
    margin: clamp(8px, 3vw, 16px) auto !important;
    padding: clamp(12px, 4vw, 20px) !important;
    max-width: 95vw !important;
  }
}

/* Extra Small Mobile Screens for Demographics Container */
@media (max-width: 480px) {
  .demographics-container {
    margin: clamp(6px, 2vw, 12px) auto !important;
    padding: clamp(8px, 3vw, 16px) !important;
    max-width: 98vw !important;
  }
}

/* Ensure desktop styles remain unchanged */
@media (min-width: 1025px) {
  /* Create a flex container for side-by-side layout */
  body {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    /* padding-bottom: 96px; Extra space for bottom bar */
  }
  
  /* Main content area with side-by-side layout */
  .conversation-container {
    flex: 1;
    margin: 0;
    max-width: none; /* Let flex handle the sizing */
    min-width: 0; /* Allow flex item to shrink */
  }

  .mobile-chat-header {
    display: none !important;
  }

  .chat-container {
    position: static; /* Change from fixed to static for flex layout */
    width: 400px; /* Fixed width for consistent layout */
    max-width: 400px;
    min-width: 300px;
    border-radius: 16px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    margin: 0;
    z-index: 2;
    flex-shrink: 0; /* Prevent chat from shrinking */
  }

  .chat-content {
    height: 100%;
    opacity: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
  }

  .chat-box {
    flex: 1;
    max-height: 40vh; /* Remove mobile height restrictions */
    overflow-y: auto;
    min-height: 40vh; /* Allow flex item to shrink */
  }

  /* Reset bottom button bar for desktop */
  .bottom-button-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  /* Hide desktop buttons since we're using inline mobile-style button */
  .desktop-buttons {
    display: none !important;
  }

  .desktop-buttons button {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    height: auto;
    margin: 0;
    width: auto;
    font-size: 14px;
  }

  .desktop-help-btn {
    background-color: rgb(73, 94, 255) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 0 !important;
  }

  .desktop-help-btn:hover {
    background-color: rgb(50, 70, 200) !important;
    transform: scale(1.05) !important;
  }

  .mobile-input-wrapper {
    position: static;
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
  }

  .textarea-container {
    position: relative;
    flex: 1;
  }

  .mobile-input-wrapper textarea {
    padding-right: 50px !important;
    border-radius: 20px;
    border: 2px solid var(--grey);
  }

  /* Ensure input area in chat doesn't overflow */
  .input-area {
    flex-shrink: 0; /* Prevent input area from shrinking */
    min-height: fit-content;
  }

  .mobile-send-btn {
    display: flex !important;
  }

  .mobile-send-btn:disabled {
    background-color: #ccc !important;
    cursor: not-allowed !important;
  }

  .mobile-send-btn:not(:disabled):hover {
    background-color: var(--blue) !important;
    transform: translateY(50%) scale(1.05) !important;
  }

  .mobile-send-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  .mobile-button-row {
    display: none !important;
  }

  .mobile-mic-btn {
    display: none !important;
  }

  /* PDF container optimized for desktop */
  .pdf-container embed {
    height: 750px !important; /* Large height for desktop screens */
    max-height: 80vh !important;
    min-height: 600px !important;
  }
}

/* Kidney Topic Container - Enhanced Responsive Styles */
.kidney-topic-container {
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 3vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  min-height: 100vh;
  align-items: flex-start;
}

.kidney-topic-container .alex-container {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.kidney-topic-container .topic-selection-container {
  flex: 2;
  min-width: 400px;
  background-color: #f8f9fa;
  border-radius: clamp(12px, 3vw, 16px);
  padding: clamp(20px, 5vw, 32px);
  margin: clamp(8px, 2vw, 16px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kidney-topic-container .topic-selection-container h4 {
  font-size: clamp(16px, 3.5vw, 20px) !important;
  margin-bottom: clamp(12px, 3vw, 16px);
  text-align: center;
  color: #333;
}

.kidney-topic-container .topic-instruction {
  font-size: clamp(14px, 3vw, 16px) !important;
  margin-bottom: clamp(16px, 4vw, 24px);
  text-align: center;
  color: #666;
  line-height: 1.5;
}

.kidney-topic-container .topics-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 20px);
  justify-content: flex-start;
  margin: clamp(16px, 4vw, 24px) 0;
}

.kidney-topic-container .topics-grid > div {
  flex: 1;
  min-width: clamp(180px, 40vw, 280px);
  max-width: 300px;
  margin: 0;
}

.kidney-topic-container .topic-item {
  padding: clamp(12px, 3vw, 18px);
  margin: clamp(6px, 1.5vw, 10px);
  border-radius: clamp(6px, 1.5vw, 10px);
  background-color: white;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.kidney-topic-container .topic-item:hover {
  border-color: #4860d9;
  box-shadow: 0 4px 12px rgba(72, 96, 217, 0.15);
  transform: translateY(-2px);
}

/* Enhanced Landscape Orientation Styles */
@media (orientation: landscape) and (min-width: 768px) {
  .kidney-topic-container {
    gap: clamp(20px, 4vw, 40px);
    padding: clamp(20px, 5vw, 40px);
  }

  .kidney-topic-container .topic-selection-container {
    padding: clamp(24px, 6vw, 40px);
    margin: clamp(10px, 2.5vw, 20px);
  }

  .kidney-topic-container .topics-grid {
    gap: clamp(16px, 4vw, 24px);
    margin: clamp(20px, 5vw, 32px) 0;
  }

  .kidney-topic-container .topic-item {
    padding: clamp(14px, 3.5vw, 20px);
    margin: clamp(8px, 2vw, 12px);
  }
}

/* Enhanced Portrait Orientation Styles */
@media (orientation: portrait) {
  .kidney-topic-container {
    flex-direction: column !important;
    gap: clamp(12px, 4vw, 20px);
    padding: clamp(12px, 4vw, 24px);
  }

  .kidney-topic-container .alex-container {
    max-width: 100%;
    order: 1;
  }

  .kidney-topic-container .topic-selection-container {
    min-width: 100%;
    order: 2;
    padding: clamp(16px, 5vw, 24px);
    margin: clamp(6px, 2vw, 12px) 0;
  }

  .kidney-topic-container .topic-selection-container h4 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  .kidney-topic-container .topic-instruction {
    font-size: clamp(14px, 4vw, 16px) !important;
    margin-bottom: clamp(16px, 5vw, 24px);
  }

  .kidney-topic-container .topics-grid {
    flex-direction: column;
    gap: clamp(10px, 3vw, 16px);
    margin: clamp(16px, 5vw, 24px) 0;
  }

  .kidney-topic-container .topics-grid > div {
    max-width: 100%;
    min-width: 100%;
  }

  .kidney-topic-container .topic-item {
    margin: clamp(6px, 2vw, 10px) 0;
    padding: clamp(12px, 4vw, 18px);
  }
}

/* Mobile-specific Enhancements */
@media (max-width: 768px) {
  .kidney-topic-container {
    flex-direction: column !important;
    gap: clamp(10px, 3vw, 16px);
    padding: clamp(10px, 3vw, 20px);
  }

  .kidney-topic-container .alex-container {
    max-width: 100%;
  }

  .kidney-topic-container .topic-selection-container {
    min-width: 100%;
    padding: clamp(12px, 4vw, 20px);
    margin: clamp(4px, 1.5vw, 8px) 0;
  }

  .kidney-topic-container .topics-grid {
    flex-direction: column;
    gap: clamp(8px, 2.5vw, 12px);
    margin: clamp(12px, 4vw, 20px) 0;
  }

  .kidney-topic-container .topics-grid > div {
    max-width: 100%;
    min-width: 100%;
  }

  .kidney-topic-container .topic-item {
    padding: clamp(10px, 3vw, 14px);
    margin: clamp(4px, 1.5vw, 8px) 0;
  }
}

/* Extra Small Mobile Screens */
@media (max-width: 480px) {
  .kidney-topic-container {
    padding: clamp(8px, 2.5vw, 16px);
    gap: clamp(8px, 2.5vw, 12px);
  }

  .kidney-topic-container .topic-selection-container {
    padding: clamp(10px, 3vw, 16px);
    margin: clamp(3px, 1vw, 6px) 0;
    border-radius: clamp(6px, 1.5vw, 8px);
  }

  .kidney-topic-container .topic-item {
    padding: clamp(8px, 2.5vw, 12px);
    margin: clamp(3px, 1vw, 6px) 0;
    border-radius: clamp(4px, 1vw, 6px);
  }

  .kidney-topic-container .topic-selection-container h4 {
    font-size: clamp(14px, 4.5vw, 18px) !important;
  }

  .kidney-topic-container .topic-instruction {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }
}

/* ===== Global send button: always circular, always inside textarea ===== */
.textarea-container {
  position: relative !important;
  flex: 1;
  min-width: 0;
}

.mobile-send-btn {
  position: absolute !important;
  right: 10px !important;
  bottom: 50% !important;
  transform: translateY(50%) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--blue) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Higher specificity override for .input-area button { padding: 8px 12px } */
.input-area .mobile-send-btn {
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  position: absolute !important;
  font-size: inherit !important;
  white-space: normal !important;
  flex-shrink: 0 !important;
}

.mobile-send-btn:disabled {
  background-color: #ccc !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(50%) !important;
  cursor: not-allowed !important;
}

.mobile-send-btn:not(:disabled):hover {
  background-color: var(--blue) !important;
  transform: translateY(50%) scale(1.05) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.mobile-send-btn svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Responder selector pill buttons */
.responder-selector-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  padding-left: 0px;
}

.responder-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
}

.responder-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.responder-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 14px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  line-height: 1 !important;
  border-radius: 20px !important;
  border: 1.5px solid #ddd !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #555 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
}

.responder-btn:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background-color: #f0f4ff !important;
  transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

.responder-btn-active,
.responder-btn-active:hover {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  color: white !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}