html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(to right, #f0f4f8, #d9eafc);
      color: #333;
    }

    .page-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

	.header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 8px 16px; /* reduced vertical padding */
	  border-bottom: 1px solid #0074D9;
	  background-color: #fff;
	  min-height: 48px; /* optional: ensures consistent height */
	}

    .header h2 {
      margin: 0;
      font-size: 28px;
      color: #0074D9;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 15px;
    }

	.logo {
	  background-color: white;
	  border-radius: 12px;
	  padding: 8px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}

	.header img {
      height: 70px;
    }

    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 20px; /*20px top and bottom ,20px left and right padding*/
      text-align: center;
    }

    .badge {
      background-color: #0074D9;
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }



    .carousel-container {
      height: 10em;
      overflow: hidden;
      position: relative;
      margin-bottom: 30px;
    }

    .carousel-texts {
      display: flex;
      flex-direction: column;
      animation: scrollUp 175s linear infinite;
    }

    .carousel-texts div {
      font-size: 24px;
      font-weight: 600;
      color: #0074D9;
      padding: 10px 0;
    }

	@keyframes scrollUp {
	  0% { transform: translateY(0); }
	  100% { transform: translateY(-100%); }
	}

    .platforms {
      font-size: 18px;
      margin-bottom: 30px;
    }

    .platforms span {
      display: inline-block;
      background-color: #e6f7ff;
      color: #0074D9;
      padding: 8px 14px;
      margin: 6px;
      border-radius: 20px;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

	.action-button {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  height: 50px;
	  padding: 0 24px;
	  font-size: 16px;
	  line-height: 1;
	  background-color: #0074D9;
	  color: white;
	  border: none;
	  border-radius: 6px;
	  cursor: pointer;
	  transition: background-color 0.3s ease;
	  text-decoration: none;
	  font-weight: 500;
	}


    .action-button:hover {
      background-color: #005fa3;
    }

	.button-row {
	  display: flex;
	  gap: 20px;
	  justify-content: center;
	  margin-top: 30px;
	  flex-wrap: wrap; /* Optional: wraps on smaller screens */
	}

    .main-footer {
      text-align: center;
      padding: 20px 0;
      font-size: 14px;
      color: #777;
      background-color: #f2f2f2;
      width: 100%;
    }


	.platforms-enhanced {
	  text-align: center;
	  margin-top: 40px;
	}

	.platform-title {
	  font-size: 20px;
	  font-weight: 600;
	  color: #0074D9;
	  margin-bottom: 20px;
	}

	.platform-grid {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 20px;
	}

	.platform-box {
	  width: 100px;
	  height: 100px;
	  background-color: #f0f8ff;
	  border-radius: 20px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  font-size: 24px;
	  color: #0074D9;
	  font-weight: 500;
	  transition: transform 0.2s ease, box-shadow 0.2s ease;
	  cursor: default;
	}

	.platform-box span {
	  font-size: 12px;
	  margin-top: 6px;
	}

	.platform-box:hover {
	  transform: translateY(-4px);
	  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
	}

	/*All authkey handling style should be here*/
	.masked-authkey {
	  margin-top: 10px;
	  padding: 10px 14px;
	  background-color: #f0f4ff;
	  border-left: 4px solid #3f51b5;
	  border-radius: 6px;
	  font-family: 'Segoe UI', sans-serif;
	  font-size: 0.95rem;
	  color: #333;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	}

	.toggle-visibility {
	  position: absolute;
	  right: 8px;
	  cursor: pointer;
	  font-size: 1.2rem;
	  user-select: none;
	  color: #555;
	}

	.hidden {
	  display: none;
	}
	/*we wont be using this option to show feedback message to users*/
	.feedback {
	  margin-top: 8px;
	  font-size: 0.9em;
	  color: #F44336; /* Red for error */
	  transition: opacity 0.3s ease;
	}

	.toast {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  background-color: #f44336;
	  color: white;
	  padding: 12px 20px;
	  border-radius: 8px;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	  font-size: 0.95rem;
	  z-index: 1000;
	  transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.toast.hidden {
	  opacity: 0;
	  transform: translateY(20px);
	  pointer-events: none;
	}

	.toast.show {
	  opacity: 1;
	  transform: translateY(0);
	}

	.step-number {
	  background-color: #e6f0ff;
	  color: #4a90e2;
	  padding: 0.2rem 0.4rem;
	  margin-right: 0.4rem;
	  border-radius: 4px;
	  font-weight: bold;
	  font-size: 0.9rem;
	}

	.step-badge {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  width: 1.5em;
	  height: 1.5em;
	  border-radius: 50%;
	  background-color: #d4f4dd; /* gentle green */
	  color: #2e7d32; /* deeper green for contrast */
	  font-weight: bold;
	  font-size: 0.9em;
	  margin-right: 0.5em;
	  vertical-align: middle;
	}

	/* Follow up question bubbles*/
	.follow-up-container {
	  margin: 12px 0 12px 0;
	  /* top | right | bottom | left */
	  display: flex;
	  flex-direction: column;
	  gap: 8px;
	  width: 25%; /* Ensure full width */
	}

	.follow-up-bubble {
	  background-color: #f8f9fa;
	  border: 1px solid #dee2e6;
	  border-radius: 8px;
	  padding: 8px 12px;
	  cursor: pointer;
	  transition: all 0.2s ease;
	  font-size: 14px;
	  color: #495057;
	  display: block; /* Ensure visibility */
	}

	.follow-up-bubble:hover {
	  background-color: #e9ecef;
	  border-color: #0074D9;
	  transform: translateY(-1px);
	  box-shadow: 0 2px 4px rgba(0,116,217,0.2);
	}

	/* Table styling*/
	.styled-table {
	  width: 100%;
	  border-collapse: collapse;
	  font-family: 'Roboto', sans-serif;
	  font-size: 15px;
	  background-color: #fff;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	  border-radius: 8px;
	  overflow: hidden;
	}

	.styled-table thead {
	  background-color: #0074D9;
	  color: white;
	  text-align: left;
	}

	.styled-table th,
	.styled-table td {
	  padding: 12px 16px;
	  border-bottom: 1px solid #e0e0e0;
	}

	.styled-table tbody tr:hover {
	  background-color: #f0f8ff;
	  transition: background-color 0.2s ease;
	}

	.styled-table tbody tr:last-child td {
	  border-bottom: none;
	}

	.styled-table th {
	  font-weight: 600;
	  letter-spacing: 0.5px;
	}


	.status-ok {
	  color: #2ecc71;
	  font-weight: bold;
	}

	.status-fail {
	  color: #e74c3c;
	  font-weight: bold;
	}

/* page loader while user waits for slm response*/

.message.loader {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 60%;
  font-size: 14px;
  color: #555;
}

.message.loader::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-top: 3px solid #0074D9;
  border-radius: 50%;
  animation: slm-spin 1s linear infinite;
  margin-left: 8px;
}

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