* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #faf9fa;
  /* background: linear-gradient(
    135deg,
    $color-bg-light 0%,
    $color-bg-second 100%
  ); */
  display: flex; }

.auth-main {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding-top: 40px; }

.form-main {
  display: flex;
  flex-direction: column;
  width: 400px;
  border-radius: 20px;
  background: #f1eef1;
  gap: 4px;
  padding: 4px; }

.form-contain {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid #ece9ec;
  background: white;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04); }

.form-header {
  display: flex;
  flex-direction: column;
  gap: 4px; }

.form-title {
  font-family: "El Messiri", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #140014; }

.button-google {
  background: white;
  border-radius: 8px;
  border: 1px solid #d9d3d9;
  box-sizing: border-box;
  padding: 7px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #140014; }
  .button-google:hover {
    background: #f1eef1; }
  .button-google svg {
    color: #635463; }

.stretch {
  color: #a191a1;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  text-align: center; }

.input-classic {
  display: flex;
  flex-direction: column;
  gap: 4px; }

.input-label-box {
  display: flex;
  justify-content: space-between; }

.text-label {
  font-size: 14px;
  font-weight: 500;
  color: #635463;
  font-family: "Inter", sans-serif; }

.text-description {
  font-size: 14px;
  font-weight: 400;
  color: #635463;
  font-family: "Inter", sans-serif; }

.form-input {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d9d3d9;
  color: #555;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  outline: none; }
  .form-input::placeholder {
    color: #b9acb9; }
  .form-input:hover {
    border: 1px solid #b9acb9; }
  .form-input:focus {
    border: 1px solid #2e052e;
    color: #140014;
    font-family: "Inter", sans-serif; }

.form-button {
  padding: 8px;
  cursor: pointer;
  background-color: #2e052e;
  color: white;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; }
  .form-button:hover {
    background-color: #120212; }

.form-button-disabled {
  padding: 8px;
  background-color: #e5dce5;
  color: #635463;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; }

.gold-button {
  padding: 8px;
  cursor: pointer;
  background-color: #fcf0e3;
  color: #993300;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; }
  .gold-button:hover {
    background-color: #f9e0c8; }

.button-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  flex: 1; }

.form-footer {
  display: flex;
  gap: 4px;
  padding: 20px 32px;
  justify-content: center;
  border-radius: 16px;
  /*
  &:hover {
    background-color: hsl(225, 20%, 92%);
  } */ }

.tab {
  color: #2e052e;
  font-weight: 700;
  padding-bottom: 1px;
  box-sizing: border-box;
  border-bottom: 1px dotted rgba(0, 0, 0, 0);
  cursor: pointer;
  text-decoration: none; }
  .tab:hover {
    border-bottom: 1px dotted #2e052e; }

.trust-box {
  display: flex;
  gap: 8px;
  align-items: center; }

.navigation {
  background-color: #f1eef1;
  border-right: 1px solid #e8e3e8;
  padding: 12px;
  margin: 0;
  height: 100%;
  max-width: 300px;
  width: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch; }

.nav-item {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #2e052e;
  border-radius: 8px;
  cursor: pointer; }
  .nav-item:hover {
    background-color: #e5dce5; }

.nav-item.selected {
  background-color: #e5dce5; }

.nav-item-none {
  display: flex;
  padding: 8px 8px 0 8px;
  align-items: center;
  align-self: stretch;
  margin-top: 8px; }

.nav-item-buy {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #2e052e;
  border-radius: 8px;
  cursor: pointer; }
  .nav-item-buy:hover {
    background-color: #e5dce5; }

.nav-item-buy.selected {
  background-color: #e5dce5; }

.nav-item-user {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #2e052e;
  border-radius: 8px;
  cursor: pointer; }
  .nav-item-user:hover {
    background-color: #e5dce5; }

.nav-item-avatar {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  background-color: #e5dce5; }

.nav-avatar-text {
  font-size: 12px;
  line-height: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  margin: 0;
  color: #2e052e; }

.nav-text {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  margin: 0;
  color: #2e052e; }

.nav-items-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 8px;
  justify-content: flex-end;
  padding: 24px 0;
  width: 100%; }

.nav-item-logo {
  display: flex;
  align-self: stretch;
  margin: 12px 0;
  padding: 0 4px; }

.dropdown-content {
  display: none;
  position: absolute;
  left: 200px;
  bottom: 36px;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 8px;
  padding: 8px; }

.dropdown-item {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #635463;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  border-radius: 8px; }
  .dropdown-item:hover {
    background-color: #f6f4f6; }

.dropdown-item-blank {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #a191a1;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px; }
  .dropdown-item-blank span {
    font-weight: 700; }

.logo {
  height: 44px; }

.logo-nav {
  height: 32px; }

#jobs-container {
  display: none;
  /* Hide jobs initially */
  flex: 1;
  overflow-y: auto;
  justify-content: center;
  padding: 24px; }

.jobs-wrap {
  display: flex;
  flex-direction: column;
  padding: 48px 0;
  gap: 24px;
  width: 1024px; }
  @media only screen and (max-width: 1200px) {
    .jobs-wrap {
      width: 800px; } }

.jobs-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px; }

.page-heading {
  font-family: "El Messiri", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  background: linear-gradient(90deg, #2e052e 0%, #5d19e6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
  background-size: 100%;
  background-position: 0;
  white-space: nowrap; }

.page-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #140014; }

.job-list-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 0 0 32px 0; }

.job-stats-block {
  display: flex;
  gap: 24px;
  flex: 1; }

.jobs-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Creates three columns */
  gap: 24px; }
  @media only screen and (max-width: 1200px) {
    .jobs-list {
      grid-template-columns: repeat(2, 1fr);
      /* Adjust to two columns */ } }

.jobs-other {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1; }

.jobs-stats {
  display: flex;
  flex: 1;
  border: 1px solid black; }

.stat-card {
  border: 1px solid #ece9ec;
  border-radius: 12px;
  padding: 24px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%; }

.jobs-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1; }

.job {
  border: 1px solid #ece9ec;
  border-radius: 16px;
  background-color: #f1eef1;
  display: flex;
  flex-direction: column;
  padding: 2px; }

.job-inner {
  display: flex;
  flex-direction: column;
  flex: 1 0 0; }

.job-header {
  display: flex;
  padding: 16px 24px;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px; }

.job-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px;
  background: white;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04); }

.job-body-applied {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  align-self: stretch;
  border-top: 1px solid #ece9ec; }

.job-content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch; }

.job-title {
  font-family: "El Messiri", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  margin: 0;
  font-optical-sizing: auto;
  font-style: normal; }

.chip {
  padding: 4px 8px;
  background-color: #ede8ed;
  border-radius: 50px;
  display: inline-block;
  margin-right: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #140014; }

.price {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500; }

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.job-action {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-top: 1px dotted #ece9ec; }

.job-persona {
  display: flex;
  flex-direction: column;
  gap: 4px; }

.job-persona-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #140014; }

.job-persona.text {
  font-size: 14px;
  line-height: 22px;
  color: #635463; }

.title-contain {
  padding: 32px 24px 0px 24px;
  flex-shrink: 0; }
  @media only screen and (max-width: 1200px) {
    .title-contain {
      padding: 32px 12px 0px 12px; } }

.chat-container {
  display: flex;
  height: 100vh;
  flex: 1; }
  .chat-container ul {
    list-style: none;
    padding: 12px;
    margin: 0;
    height: 100%;
    overflow-y: auto; }
    .chat-container ul li {
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer; }
      .chat-container ul li:hover {
        background-color: #ede8ed; }
  .chat-container .sidebar-analysis {
    width: 360px;
    border-left: 1px solid #e8e3e8;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 8px; }
    @media only screen and (max-width: 1200px) {
      .chat-container .sidebar-analysis {
        width: 300px; } }
  .chat-container .subtitle {
    font-size: 16px;
    font-weight: 700;
    padding: 12px;
    margin: 12px 0px 0px 12px;
    color: #140014; }
  .chat-container main.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; }
    .chat-container main.chat-main .messages {
      overflow-y: auto;
      height: calc(100vh - 120px);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      padding: 48px 24px 24px 24px; }
      @media only screen and (max-width: 1200px) {
        .chat-container main.chat-main .messages {
          padding: 48px 12px 24px 12px; } }
      .chat-container main.chat-main .messages .message {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 0 24px;
        width: 100%;
        max-width: 768px; }
        .chat-container main.chat-main .messages .message img {
          max-height: 240px;
          width: auto;
          border-radius: 4px;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
          margin-top: 16px; }
    .chat-container main.chat-main .feedback {
      background-color: #2e052e;
      padding: 10px;
      overflow-y: auto;
      height: calc(100vh - 120px); }
    .chat-container main.chat-main .input-area {
      padding: 0 24px 24px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 768px; }
    .chat-container main.chat-main .input-field {
      background-color: white;
      display: flex;
      flex-direction: row;
      padding: 4px;
      border: 1px solid #e8e3e8;
      border-radius: 12px;
      width: 100%;
      max-width: 768px;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04); }
    .chat-container main.chat-main input {
      display: flex;
      align-items: center;
      flex: 1 0 0;
      padding: 12px;
      margin-right: 12px;
      border: none;
      width: 100%;
      outline: none;
      font-size: 14px;
      line-height: 24px;
      font-weight: 500; }
      .chat-container main.chat-main input :disabled {
        background-color: red; }
    .chat-container main.chat-main textarea {
      font-family: "Inter", sans-serif;
      display: flex;
      align-items: center;
      flex: 1 0 0;
      padding: 12px;
      margin-right: 12px;
      border: none;
      width: 100%;
      outline: none;
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      overflow: hidden;
      resize: none;
      box-sizing: border-box;
      min-height: 48px;
      color: #140014; }
    .chat-container main.chat-main textarea::placeholder {
      font-family: "Inter", sans-serif;
      color: #b9acb9;
      opacity: 1; }
    .chat-container main.chat-main textarea:disabled {
      background-color: white; }
    .chat-container main.chat-main .button-send {
      padding: 12px;
      cursor: pointer;
      background-color: #2e052e;
      color: white;
      border: none;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px; }
      .chat-container main.chat-main .button-send:hover {
        background-color: #120212; }
    .chat-container main.chat-main .button-disabled {
      padding: 12px;
      cursor: not-allowed;
      pointer-events: none;
      background-color: #f1eef1;
      color: #635463;
      border: none;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px; }

.file-upload {
  position: relative;
  display: inline-block; }

.file-icon-label {
  cursor: pointer;
  color: #635463;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 12px 12px; }

/* Icon hover effect */
.file-icon-label:hover {
  color: #140014; }

.file-icon-label:disabled {
  cursor: not-allowed;
  pointer-events: none;
  /* Prevent click events */
  color: #635463; }

#preview-container {
  display: flex;
  flex-direction: row;
  align-items: center; }

#image-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px; }

#remove-image {
  border-radius: 50%;
  margin-left: 12px;
  cursor: pointer;
  background-color: #ebadad;
  color: #f42525;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 4px; }

.footer-notice {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 8px; }

.notice {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #635463;
  padding: 8px 0; }

.persona-contain {
  display: flex;
  gap: 8px; }

.persona-contain-small {
  display: flex;
  gap: 8px;
  align-items: center; }

.persona-box {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%; }

.persona-text-bold {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin: 0;
  color: #2e052e; }

.persona-text-regular {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
  color: #2e052e; }

.message img {
  vertical-align: middle;
  margin-right: 10px; }

.message-headline {
  display: flex;
  gap: 8px;
  align-items: baseline; }
  @media only screen and (max-width: 1000px) {
    .message-headline {
      flex-direction: column;
      gap: 2px; } }

.message-text-bold {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin: 0;
  font-family: "Inter", sans-serif;
  color: #140014; }

.message-text-regular {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin: 0; }

.message-markdown p {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin: 0; }

.message-markdown li {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin: 0; }

.message-timestamp {
  font-size: 14px;
  color: #a191a1;
  margin: 0; }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: none; }

.avatar-user {
  min-width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #e5dce5;
  margin-right: 10px; }

.skeleton {
  width: 100%;
  height: 48px;
  /* Adjust based on your actual item height */
  background-color: #000000;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: pulse 1.5s infinite ease-in-out; }

.skeleton-job {
  height: 100px;
  /* Adjust height as needed for job skeleton */ }

.skeleton-loader {
  display: none;
  width: 100%;
  max-width: 768px;
  height: 100%;
  padding: 24px; }

.skeleton-message {
  width: 100%;
  height: 20px;
  background-color: #000;
  margin-bottom: 10px;
  animation: pulse 1.5s infinite ease-in-out; }

@keyframes pulse {
  0% {
    background-color: #faf9fa; }
  50% {
    background-color: #e4dde4; }
  100% {
    background-color: #f1eef1; } }

.typing-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 768px;
  padding-bottom: 16px;
  padding-left: 24px;
  background: transparent; }

.typing-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #635463;
  margin: 16px 0 0 0; }

.image-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background: #f6f4f6;
  justify-content: center;
  align-items: center;
  padding: 20px; }

.image-modal .close {
  position: absolute;
  top: 20px;
  right: 36px;
  color: #635463;
  font-size: 36px;
  font-weight: bold;
  transition: 0.3s; }

.image-modal .close:hover,
.image-modal .close:focus {
  color: #140014;
  text-decoration: none;
  cursor: pointer; }

.modal-content {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  /* Center vertically and horizontally */
  display: block;
  transition: transform 0.25s ease;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 12px; }

#caption {
  margin: auto;
  display: block;
  text-align: center;
  color: #a191a1;
  padding: 10px 0;
  height: 150px; }

.zoom-buttons {
  display: flex;
  gap: 8px; }

#zoom-in {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #635463;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  border: 1px solid #d9d3d9; }
  #zoom-in:hover {
    background-color: #e5dce5; }

#zoom-out {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #635463;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  border: 1px solid #d9d3d9; }
  #zoom-out:hover {
    background-color: #e5dce5; }

.messages::-webkit-scrollbar {
  width: 4px;
  background-color: transparent; }

.messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px; }

.messages:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1); }

/* Firefox */
.chat-container scrollbar,
.messages scrollbar {
  width: thin;
  color: rgba(0, 0, 0, 0.3); }

.chat-container:hover scrollbar,
.messages:hover scrollbar {
  color: rgba(0, 0, 0, 0.5);
  /* darker on hover */ }

.analysis-wrap::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
  /* make scrollbar background transparent */ }

.analysis-wrap::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px; }

.analysis-wrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  /* slightly visible on hover */ }

.navigation::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
  /* make scrollbar background transparent */ }

.navigation::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px; }

.navigation:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1); }

.jobs-container::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
  /* make scrollbar background transparent */ }

.jobs-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px; }

.jobs-container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1); }

.auth-main::-webkit-scrollbar {
  width: 4px;
  background-color: transparent; }

.auth-main::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px; }

.auth-main:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1); }

/* Firefox */
.auth-main scrollbar {
  width: thin;
  color: rgba(0, 0, 0, 0.3); }

.auth-main:hover scrollbarscrollbar {
  color: rgba(0, 0, 0, 0.5);
  /* darker on hover */ }

.persona-details {
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: 768px;
  padding: 24px; }

#persona-selector {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%; }

#persona-selector li {
  padding: 8px 16px 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none; }
  #persona-selector li:hover {
    background-color: #e5dce5; }

#persona-selector li.selected {
  background-color: #e5dce5; }

.active {
  background-color: #ddf; }

.badge {
  background-color: #44c;
  color: white;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.75em; }

.analysis-wrap {
  padding: 24px 24px 48px 24px;
  margin: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px; }
  @media only screen and (max-width: 1200px) {
    .analysis-wrap {
      padding: 12px 12px 48px 12px; } }

.analysis-item {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #f1eef1;
  padding: 2px; }

.message-preview {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #635463;
  padding: 16px; }

.com-style-wrap {
  background-color: white;
  border-radius: 12px;
  border: 1px solid #ece9ec;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04); }

.com-contain {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap; }

.com-contain-analysis {
  display: flex;
  padding: 0 16px 16px 16px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap; }

.tag-analysis {
  display: flex;
  padding: 4px 12px;
  align-items: flex-start;
  gap: 4px;
  border-radius: 50px;
  border: 1px solid #e8e3e8;
  color: #140014;
  font-feature-settings: "clig" off, "liga" off;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal; }

.tag {
  margin: 0;
  padding: 8px 12px;
  background-color: #ede8ed;
  border-radius: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500; }

.tag-complex {
  margin: 0;
  padding: 8px 12px;
  background-color: #ede8ed;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: start;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500; }

.tag-headline {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #140014;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400; }

.tag-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: start;
  margin-left: 32px; }

.error-message {
  color: #f42525;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0; }

.success-message {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0a5c18;
  background-color: #dafbe0;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0; }

.toggle-group {
  background: #faf9fa;
  border-radius: 8px;
  display: flex;
  gap: 2px;
  padding: 2px; }

.toggle-active {
  background: white;
  padding: 4px; }

.toggle-inactive {
  background: #faf9fa;
  padding: 4px; }

.no-chat-box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; }

.no-chat-message {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200px;
  flex: 1;
  gap: 4px; }

.no-chat-icon {
  display: flex;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #2e052e;
  border-radius: 12px;
  background-color: #e5dce5;
  margin-bottom: 12px; }

.no-chat-action {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch; }
  .no-chat-action a {
    width: 100%; }

/* Add this CSS for the loading spinner */
.spinner {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-left-color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle; }

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

/* Style for the plans page */
.plans-container {
  display: flex;
  flex: 1;
  overflow-y: auto;
  justify-content: center;
  padding: 24px; }

.plans-block {
  display: flex;
  gap: 24px; }

.plan-card {
  border: 1px solid #ece9ec;
  background-color: #f1eef1;
  border-radius: 12px;
  padding: 2px;
  width: 278px;
  gap: 8px;
  display: flex;
  flex-direction: column; }
  @media only screen and (max-width: 1200px) {
    .plan-card {
      width: 100%; } }

.plan-inner {
  display: flex;
  flex-direction: column;
  flex: 1 0 0; }

.plan-body {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-radius: 12px;
  background: white;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04); }

.plan-body-applied {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-bottom: 1px solid #ece9ec; }

.plan-content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; }

.plan-title {
  font-family: "El Messiri", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  margin: 0;
  font-optical-sizing: auto;
  font-style: normal; }

.plan-action {
  display: flex;
  padding: 0 24px 24px 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch; }

.plan-price {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #140014; }
  .plan-price span {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #635463; }

.plan-header {
  display: flex;
  flex-direction: column;
  padding: 16px;
  align-items: flex-start; }

.plan-stats {
  display: flex;
  flex-direction: column;
  padding: 16px;
  align-items: flex-start;
  border-top: 1px dotted #ece9ec; }

.plan-feature {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #635463;
  padding: 2px 8px;
  gap: 8px;
  display: flex;
  align-items: center; }

.upgrade-block {
  display: flex;
  width: 100%;
  max-width: 768px;
  padding: 12px;
  margin-bottom: 48px;
  border-radius: 12px;
  color: #993300;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fcf0e3; }
  .upgrade-block:hover {
    background-color: #f9e0c8; }

.unsupported-screen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f4f6;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box; }

@media only screen and (max-width: 900px) {
  .unsupported-screen {
    display: flex;
    flex-direction: column;
    gap: 24px; }
  /* Hide the rest of the content on small screens */
  body > *:not(.unsupported-screen) {
    display: none; } }