:root {
  --primary-color: #7459fe;
  --primary-hover-color: #9480ff;
  --selected-border-color: orange;
  --button-text-color: #fff;
  --button-size: 44px;
  --icon-size: 24px;
}

.peerConnectionState-new {
  color: cornflowerblue;
}

.peerConnectionState-connecting {
  color: orange;
}

.peerConnectionState-connected {
  color: green;
}

.peerConnectionState-disconnected,
.peerConnectionState-closed,
.peerConnectionState-failed {
  color: red;
}

.iceConnectionState-new {
  color: cornflowerblue;
}

.iceConnectionState-checking {
  color: orange;
}

.iceConnectionState-connected,
.iceConnectionState-completed {
  color: green;
}

.peerConnectionState-disconnected,
.peerConnectionState-closed,
.peerConnectionState-failed {
  color: red;
}

.iceGatheringState-new {
  color: cornflowerblue;
}

.iceGatheringState-gathering {
  color: orange;
}

.iceGatheringState-complete {
  color: black;
}

.signalingState-stable {
  color: green;
}

.signalingState-have-local-offer,
.signalingState-have-remote-offer,
.signalingState-have-local-pranswer,
.signalingState-have-remote-pranswer {
  color: cornflowerblue;
}

.signalingState-closed {
  color: red;
}

.streamingState-streaming {
  color: green;
}

.streamingState-empty {
  color: grey;
}

.streamEvent-started {
  color: green;
}

.streamEvent-done {
  color: orange;
}

.streamEvent-ready {
  color: green;
}

.streamEvent-error {
  color: red;
}

.streamEvent-dont-care {
  color: gray;
}

/* added css from here */

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body * {
  font-family: 'Mulish', sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.hidden {
  opacity: 0 !important;
}

video.hidden {
  display: none !important;
}

.custom-transition-video-element {
  transition: opacity 0.5s ease-in-out;
}

.fade-in {
  display: block;
  animation: fadeIn 1s forwards;
}

.fade-out {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
  99% { display: block; }
  100% {
    display: none !important;
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    display: block !important;
  }
  to {
    opacity: 1;
  }
}

.invisible {
  opacity: 0 !important;
}

.visible {
  opacity: 1 !important;
}

#content {
  position: relative;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#buttons {
  clear: both;
  padding: 0 0 0 0;
  text-align: center;
  z-index: 10;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}

#buttons button {
  padding: 15px 25px;
  font-size: 20px;
}

button {
  padding: 10px 20px;
  border-radius: 16px;
  border: none;
  font-size: 18px;
  margin: 0 5px;
  background-color: var(--primary-color);
  color: var(--button-text-color);
}

button:disabled {
  opacity: 0.7;
  box-shadow: none;
}

button.outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

button.outline:hover {
  background-color: var(--primary-color);
  color: var(--button-text-color);
}

button.rounded {
  height: var(--button-size);
  width: var(--button-size);
  border-radius: 50%;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

button#connect-button {
  display: none;
}

button:hover:not(:disabled) {
  background-color: var(--primary-hover-color);
  cursor: pointer;
  transition: all 0.2s ease-out;
}

#status {
  display: none;
  clear: both;
  padding: 20px 0 0 0;
  text-align: left;
  zoom: 1;
  line-height: 140%;
  font-size: 15px;
}

#destroy-button {
  display: none;
}

#status div {
  padding-bottom: 10px;
}

#video-wrapper {
  background: url(./img/bg.png) no-repeat center;
  background-size: auto 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#video-wrapper .video-container {
  position: relative;
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  /*background-image: url(/assets/img/red.png);*/
  /*background-size: cover;*/
  /*background-repeat: no-repeat;*/
  /*background-position: center;*/
}

.video-container .avatar-spinner,
.video-container .avatar-listening {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  height: 100%;
  opacity: 0;
}

.video-container .avatar-spinner.invisible {
  /*animation-play-state: paused;*/
}

.video-container video {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);;
  background-color: #fff;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

.video-container:not(.heygen-video) video {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("./img/red.png");
}

.video-container.heygen-video video {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("./img/hg_rika_bg.png");
}

#language-selection {
  /*display: flex;*/
  display: none;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

#language-selection button {
  margin: 0;
  border: 2px solid var(--primary-color);
}

#language-selection button:hover {
  border-color: var(--primary-hover-color);
}

#language-selection button.selected {
}

#suggested-topics {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

#suggested-topics button {
  margin: 0;
}

.suggestion-nav-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.suggestion-nav-back-btn {
  margin: 0;
}

.rtl .suggestion-nav-back-btn svg {
  transform: rotate(180deg);
}

.avatar-spinner,
.avatar-listening {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.avatar-spinner {
  width: auto;
  border: 5px solid #7459fe;
  box-shadow: 0 0 2px rgba(116, 89, 254, 0.8), 0 0 30px rgba(116, 89, 254, 0.6);
}

.avatar-listening {
  width: auto;
  border: 5px solid #2ecc40; /* changed to green */
  box-shadow: 0 0 2px rgba(46, 204, 64, 0.8), 0 0 30px rgba(46, 204, 64, 0.6); /* updated green shadow */
  transition: opacity 0.5s linear;
  --wave1-max-scale: 1.2;
  --wave2-max-scale: 1.18;
}

.avatar-listening.speaking {
  opacity: 1;
}

.avatar-listening.speaking::after,
.avatar-listening.speaking::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 3px solid #2ecc40;
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%) scale(1);
}

.avatar-listening.speaking::before {
  border-width: 2px;
}

.avatar-listening.speaking::after {
  animation: wave-expand-contract-1 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0s;
}

.avatar-listening.speaking::before {
  animation: wave-expand-contract-2 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.4s;
}

@keyframes wave-expand-contract-1 {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  40% { opacity: 0.3; transform: translate(-50%, -50%) scale(var(--wave1-max-scale, 2.2)); }
  60% { opacity: 0.3; transform: translate(-50%, -50%) scale(var(--wave1-max-scale, 2.2)); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes wave-expand-contract-2 {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  40% { opacity: 0.3; transform: translate(-50%, -50%) scale(var(--wave2-max-scale, 1.8)); }
  60% { opacity: 0.3; transform: translate(-50%, -50%) scale(var(--wave2-max-scale, 1.8)); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.close-btn {
  background-color: transparent;
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 2px;
  background-color: var(--primary-color);
  transition: background-color 0.2s ease-out;
}

.close-btn::before {
  transform: rotate(45deg);
}

.close-btn::after {
  transform: rotate(-45deg);
}

.close-btn:hover {
  background-color: transparent;
}

.close-btn:hover::before,
.close-btn:hover::after {
  background-color: var(--primary-hover-color);;
}

.test-float-container {
  position: absolute;
  left: 2rem;
  bottom: 6rem;
  z-index: 100;
}

/*#self-camera-video,*/
/*#camera-canvas {*/
#self-camera-video {
  transform: scaleX(-1);
}

.camera-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background: #000;
  z-index: 100;
  overflow: hidden;
}

.camera-container.active {
  display: block;
}

.camera-container video,
#camera-canvas {
  /*transform: translateY(-50%);*/
  /*top: 50%;*/
}


.camera-container video {
  all: unset;
  position: relative;
  width: 100%;
  border-radius: 0;
  background: #000;
}

#camera-canvas {
  position: relative;
  left: 0;
  top: 0;
}

.camera-notes-container {
  position: absolute;
  z-index: 1;
  color: #fff;
  font-size: 2rem;
  bottom: 40%;

}

.camera-container .close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1;
}

#document-frame {
  position: absolute;
  border: 3px dashed var(--primary-color);
  width: 50%; /* frame width is relative to video width */
  aspect-ratio: 3/2; /* keep width:height ratio for ID card */
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

#document-frame::after {
  content: attr(data-note);
  color: #fff;
  font-size: 2rem;
  position: relative;
  top: 100%;
  display: flex;
  justify-content: center;
  padding: 1.5rem 2rem;
  width: calc(100vw - 2rem * 2);
  transform: translateX(-50%);
  left: 50%;
}

#document-frame-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px); /* real blur effect */
  background-color: rgba(0, 0, 0, 0.4); /* optional dark tint */
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  z-index: 1;
}

.camera-buttons {
  position: absolute;
  bottom: 12rem;
  width: 100%;
  display: flex;
  gap: 1.5rem;
  z-index: 1;
  justify-content: center;
}

.camera-buttons button {
  margin: 0;
  border-radius: 5px;
}

.camera-buttons button.hidden {
  display: none;
}

#camera-confirm-btn {
  bottom: 1rem;
  background-color: var(--primary-color);
  color: var(--button-text-color);
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
}

#logger-container {
  display: none;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
}

#logger-container.show {
  display: block;
}

#logger-items .log-item {
  text-align: start;
  word-wrap: break-word;
  white-space: normal;
}

#logger-items {
  word-break: break-all;
  overflow-wrap: break-word;
}

#logger-container pre {
  white-space: pre-wrap; /* CSS3 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  word-break: break-all;
  overflow-wrap: break-word;
  max-width: 100%;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spinner-spin 1s ease-in-out infinite;
  vertical-align: middle;
}

.support-container {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10;
}

.lang-selector-container {
  position: fixed;
  top: 2rem;
  /*right: calc(2rem * 2 + 80px);*/
  right: 2rem;
  z-index: 10;
}

.lang-selector-container .fab-menu-item {
  justify-content: center;
}

.lang-selector-btn,
.support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  gap: .5rem;
}

.support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  background-color: var(--primary-hover-color);
}

.support-container .support-call-icon {
  height: var(--icon-size);
  width: var(--icon-size);
  color: white;
}

.fab-menu {
  position: absolute;
  top: 100px;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s ease;
}

.fab-menu.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.fab-menu-item {
  display: flex;
  align-items: center;
  background-color: white;
  color: var(--primary-color);
  padding: 12px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin: 0;
}

.fab-menu-item:hover {
  background-color: var(--primary-color);
  color: white;
}

.fab-menu-item .menu-icon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.content-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3rem 0 0;
  transition: max-height 1.2s linear, opacity .3s linear;
  max-height: 0;
  gap: 2rem;
  z-index: 10;
  position: fixed;
  /*bottom: 150px;*/
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.content-container:has(.user-data-table + .user-data-table-buttons) {
  gap: 0;
}

.content-container.active {
  max-height: 100%; /* Use percentage instead of fixed pixels */
  opacity: 1;
}

.user-data-table {
  background: white;
  max-width: 100%;
  width: 100%;
  gap: 8px;
}

.user-data-table .editable-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.user-data-table .editable-container .edit-btn {
  margin: 0;
  border-radius: 0;
  padding: 5px 10px;
}

.user-data-table-buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  background: transparent;
  flex-wrap: wrap;
  gap: 1rem;
}

.user-data-table-buttons button {
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: 15px 20px;
}

.user-data-confirm-btn {
  padding: 15px 20px;
}

.user-data-table td {
  text-align: left;
  padding: 10px;
  overflow-wrap: break-word;
}

.user-data-table tr.payment-amount .title {
  font-size: 1.5rem;
}

.user-data-table tr.payment-amount .value {
  font-size: 2rem;
  font-weight: 600;
  white-space: nowrap;
}

.user-data-table td.title {
  font-weight: bold;
  white-space: nowrap;
}
#error-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fcc;
  color: #900;
  padding: 16px;
  text-align: center;
  z-index: 10000;
  font-weight: bold;
}

.keyboard-container {
  position: absolute;
  bottom: 0;
  z-index: 1000;
  transform: translateX(-50%);
  left: 50%;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}