body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7d7d7d;
  font-family: "Poppins", sans-serif;
}

.phone-main {
  position: relative;
  width: 32vh;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35));
}

.phone-main-img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  border-radius: 3.5vh;
  pointer-events: none;
  user-select: none;
}

.phone-wallpaper {
  position: absolute;
  top: 0.6%;
  left: 1.25%;
  width: 96%;
  height: 98.9%;
  border-radius: 3.5vh;
  background-image: url("../img/bgs/bg1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  overflow: hidden;
}

/* Screens */
.home-screen,
.settings-screen,
.banking-screen,
.sounds-screen,
.wallpaper-screen,
.notifications-screen,
.banking-transfer-screen,
.lspd-screen,
.vehicle-screen,
.vehicle-detail-screen,
.contacts-screen,
.contact-detail-screen,
.contact-add-screen,
.messages-screen,
.chat-screen,
.calls-settings-screen {
  position: absolute;
  inset: 0;
}

.home-screen {
  z-index: 2;
}

.settings-screen,
.banking-screen,
.sounds-screen,
.wallpaper-screen,
.notifications-screen,
.banking-transfer-screen,
.lspd-screen,
.vehicle-screen,
.vehicle-detail-screen,
.contacts-screen,
.contact-detail-screen,
.contact-add-screen,
.messages-screen,
.chat-screen,
.calls-settings-screen {
  z-index: 3;
  color: white;
}

.settings-screen {
  padding: 8vh 2vh 2vh 2vh;
}

.banking-screen {
  padding: 8vh 2vh 2vh 2vh;
}

.sounds-screen {
  padding: 8vh 2vh 2vh 2vh;
}

.wallpaper-screen {
  padding: 8vh 1.6vh 2vh 1.6vh;
}

.active-screen {
  display: block;
}

.hidden-screen {
  display: none;
}

.screen-transition {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.screen-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.screen-fading-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.screen-fading-in {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Allgemeine App-Icons */
.call-app,
.contacts-app,
.sms-app,
.settings-app,
.lspd-app,
.banking-app,
.acls-app,
.vehicle-app {
  position: absolute;
  width: 4.8vh;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
  filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.35));
}

.call-app:hover,
.contacts-app:hover,
.sms-app:hover,
.settings-app:hover,
.lspd-app:hover,
.banking-app:hover,
.acls-app:hover,
.vehicle-app:hover {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 0.6vh 1vh rgba(0, 0, 0, 0.4));
}

/* Untere Reihe */
.call-app {
  left: 20%;
  top: 84%;
}

.contacts-app {
  left: 40%;
  top: 84%;
}

.sms-app {
  left: 60%;
  top: 84%;
}

.settings-app {
  left: 80%;
  top: 84%;
}

/* Obere Reihe */
.lspd-app {
  left: 20%;
  top: 75%;
}

.banking-app {
  left: 40%;
  top: 75%;
}

.vehicle-app {
  left: 60%;
  top: 75%;
}

/* Navigation unten */
.homebuttons {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.homebutton-left,
.homebutton-middle,
.homebutton-right {
  position: absolute;
  width: 2.1vh;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0.9;
  pointer-events: auto;
}

.homebutton-left {
  left: 20%;
  top: 95.2%;
}

.homebutton-middle {
  left: 50%;
  top: 95.2%;
}

.homebutton-right {
  left: 80%;
  top: 95.2%;
}

/* Statusbar */
.status-bar {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Uhrzeit */
.time {
  position: absolute;
  color: #ffffff;
  top: 3.6%;
  left: 14%;
  font-size: 1.35vh;
  font-weight: 600;
  letter-spacing: 0.02vh;
  transform: translate(-50%, -50%);
}

/* Statusbar Icons */
.speaker-topbar {
  position: absolute;
  top: 3.5%;
  left: 69%;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  opacity: 0.95;
}

.signal-topbar {
  position: absolute;
  top: 3.5%;
  left: 76%;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  opacity: 0.95;
}

.akku {
  position: absolute;
  color: #fff;
  top: 3.5%;
  left: 85.5%;
  font-size: 1.05vh;
  font-weight: 600;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
  width: 3.2vh;
  height: 1.8vh;
  line-height: 1.8vh;
  text-align: center;
  border-radius: 2vh;
  border: 0.08vh solid rgba(255, 255, 255, 0.15);
}

/* Kamera / Punch Hole */
.camera {
  position: absolute;
  top: 3.55%;
  left: 50%;
  width: 1.15vh;
  height: 1.15vh;
  background: radial-gradient(circle at 35% 35%, #2c2c2c, #0a0a0a 70%);
  border: 0.12vh solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0.5vh rgba(0, 0, 0, 0.6);
}

/* Settings */
.settings-header {
  font-size: 2vh;
  font-weight: 600;
  margin-bottom: 2vh;
  text-align: center;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.settings-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.4vh;
}

.sounds-item,
.wallpaper-item {
  cursor: pointer;
}

/* Flugmodus */
.flightmode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flightmode-toggle {
  width: 4.6vh;
  height: 2.4vh;
  border-radius: 999vh;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.flightmode-knob {
  position: absolute;
  top: 50%;
  left: 0.3vh;
  width: 1.8vh;
  height: 1.8vh;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.2s ease;
}

.flightmode-toggle.active {
  background: #7dff9b;
}

.flightmode-toggle.active .flightmode-knob {
  left: 2.5vh;
}

/* Banking */
.banking-header {
  font-size: 2vh;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2vh;
}

.banking-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.4vh;
  padding: 1.6vh;
  margin-bottom: 1.5vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.banking-card-label {
  font-size: 1.2vh;
  opacity: 0.75;
  margin-bottom: 0.6vh;
}

.banking-balance {
  font-size: 2.4vh;
  font-weight: 700;
  margin-bottom: 0.6vh;
}

.banking-iban {
  font-size: 1.1vh;
  opacity: 0.7;
}

.banking-actions {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-bottom: 1.5vh;
}

.banking-action {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.35vh;
  cursor: pointer;
  transition: background 0.15s ease;
}

.banking-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.banking-transactions {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.banking-transactions-title {
  font-size: 1.35vh;
  font-weight: 600;
  margin-bottom: 0.5vh;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
}

.transaction-title {
  font-size: 1.25vh;
  font-weight: 500;
}

.transaction-date {
  font-size: 1vh;
  opacity: 0.7;
  margin-top: 0.2vh;
}

.transaction-plus {
  font-size: 1.2vh;
  font-weight: 600;
  color: #7dff9b;
}

.transaction-minus {
  font-size: 1.2vh;
  font-weight: 600;
  color: #ff8c8c;
}

/* Subscreens */
.subscreen-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}

.subscreen-title {
  font-size: 2vh;
  font-weight: 600;
  text-align: center;
}

.back-to-settings,
.back-to-settings-from-wallpaper {
  position: absolute;
  left: 0;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border: none;
  border-radius: 0.8vh;
  padding: 0.7vh 1.2vh;
  font-size: 1.15vh;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
}

/* Sounds */
.sounds-content {
  display: flex;
  flex-direction: column;
  gap: 1.8vh;
}

.sound-section {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.sound-section-title {
  font-size: 1.35vh;
  font-weight: 600;
}

.volume-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.4vh;
}

.volume-label {
  display: block;
  font-size: 1.2vh;
  margin-bottom: 1vh;
  opacity: 0.9;
}

.volume-range {
  width: 100%;
  height: 0.6vh;
  appearance: none;
  border-radius: 999vh;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}

.volume-range::-webkit-slider-thumb {
  appearance: none;
  width: 1.8vh;
  height: 1.8vh;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
}

.volume-value {
  margin-top: 1vh;
  font-size: 1.2vh;
  font-weight: 600;
  text-align: right;
}

.ringtone-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.ringtone-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.25vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.ringtone-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.ringtone-item:active {
  transform: scale(0.98);
}

.ringtone-check {
  opacity: 0;
  font-weight: 700;
}

.active-ringtone {
  background: rgba(255, 255, 255, 0.16);
}

.active-ringtone .ringtone-check {
  opacity: 1;
}

.selected-ringtone {
  margin-top: 0.6vh;
  font-size: 1.15vh;
  opacity: 0.85;
}

.wallpaper-screen {
  padding: 8vh 1.6vh 2vh 1.6vh;
  box-sizing: border-box;
}

.wallpaper-screen.active-screen {
  display: flex;
  flex-direction: column;
}

.wallpaper-screen.hidden-screen {
  display: none;
}

.wallpaper-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9vh;
  padding: 0.2vh;
  box-sizing: border-box;
  scrollbar-width: none;
}

.wallpaper-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wallpaper-option,
.wallpaper-thumb {
  position: relative;
  width: 100%;
  height: 11.5vh;
  object-fit: cover;
  border-radius: 1vh;
  cursor: pointer;
  border: 0.15vh solid rgba(255, 255, 255, 0.08);
  transition:
    transform 0.15s ease,
    border 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.wallpaper-option:hover,
.wallpaper-thumb:hover {
  transform: scale(1.02);
  border: 0.15vh solid rgba(255, 255, 255, 0.28);
}

.active-wallpaper {
  border: 0.18vh solid white;
  box-shadow: 0 0 0.8vh rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.wallpaper-option:not(.active-wallpaper),
.wallpaper-thumb:not(.active-wallpaper) {
  opacity: 0.88;
}

.notifications-item {
  cursor: pointer;
}

.notifications-screen {
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.notifications-screen.active-screen {
  display: block;
}

.notifications-screen.hidden-screen {
  display: none;
}

.notifications-content {
  display: flex;
  flex-direction: column;
  gap: 1.8vh;
}

.notification-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-toggle {
  width: 4.6vh;
  height: 2.4vh;
  border-radius: 999vh;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.notification-toggle-knob {
  position: absolute;
  top: 50%;
  left: 0.3vh;
  width: 1.8vh;
  height: 1.8vh;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.2s ease;
}

.notification-toggle.active {
  background: #7dff9b;
}

.notification-toggle.active .notification-toggle-knob {
  left: 2.5vh;
}

.notification-section {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.notification-sound-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.notification-sound-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.25vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.notification-sound-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.notification-sound-item:active {
  transform: scale(0.98);
}

.notification-check {
  opacity: 0;
  font-weight: 700;
}

.active-notification-sound {
  background: rgba(255, 255, 255, 0.16);
}

.active-notification-sound .notification-check {
  opacity: 1;
}

.selected-notification-sound {
  margin-top: 0.6vh;
  font-size: 1.15vh;
  opacity: 0.85;
}

.banking-transfer-screen,
.banking-deposit-screen,
.banking-withdraw-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.banking-form {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  margin-top: 2vh;
}

.banking-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.3vh;
  color: white;
  font-size: 1.25vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.banking-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.banking-submit {
  background: rgba(125, 255, 155, 0.18);
  border: 0.1vh solid rgba(125, 255, 155, 0.4);
  border-radius: 1vh;
  padding: 1.3vh;
  text-align: center;
  font-size: 1.3vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.banking-submit:hover {
  background: rgba(125, 255, 155, 0.26);
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.lspd-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.dispatch-form {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
}

.dispatch-label {
  font-size: 1.25vh;
  font-weight: 600;
  margin-top: 0.4vh;
}

.dispatch-type-list {
  display: flex;
  gap: 0.8vh;
}

.dispatch-type {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  text-align: center;
  font-size: 1.2vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.dispatch-type:hover {
  background: rgba(255, 255, 255, 0.14);
}

.active-dispatch-type {
  background: rgba(255, 255, 255, 0.18);
  border: 0.1vh solid rgba(255, 255, 255, 0.3);
}

.dispatch-textarea {
  width: 100%;
  min-height: 12vh;
  resize: none;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.3vh;
  color: white;
  font-size: 1.2vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.dispatch-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.dispatch-submit {
  margin-top: 0.6vh;
  background: rgba(255, 90, 90, 0.18);
  border: 0.1vh solid rgba(255, 120, 120, 0.35);
  border-radius: 1vh;
  padding: 1.3vh;
  text-align: center;
  font-size: 1.25vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.dispatch-submit:hover {
  background: rgba(255, 90, 90, 0.26);
}

.dispatch-status {
  min-height: 1.8vh;
  font-size: 1.1vh;
  text-align: center;
  opacity: 0.9;
}

.dispatch-history {
  margin-top: -2.75vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.dispatch-history-title {
  font-size: 1.2vh;
  font-weight: 600;
}

#dispatch-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.dispatch-history-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1vh 1.2vh;
  display: flex;
  flex-direction: column;
  gap: 0.25vh;
}

.dispatch-history-type {
  font-size: 1.15vh;
  font-weight: 700;
  color: #ffffff;
}

.dispatch-history-description {
  font-size: 1.08vh;
  opacity: 0.9;
  line-height: 1.4;
}

.vehicle-screen,
.vehicle-detail-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.vehicle-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.vehicle-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vehicle-item:active {
  transform: scale(0.98);
}

.vehicle-item-left {
  display: flex;
  flex-direction: column;
  gap: 0.25vh;
}

.vehicle-item-name {
  font-size: 1.25vh;
  font-weight: 600;
}

.vehicle-item-plate {
  font-size: 1.05vh;
  opacity: 0.75;
}

.vehicle-item-status {
  font-size: 1.1vh;
  font-weight: 600;
}

.vehicle-status-active {
  color: #7dff9b;
}

.vehicle-status-parked {
  color: #ffd36e;
}

.vehicle-detail-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  padding: 1.5vh;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.vehicle-detail-name {
  font-size: 1.7vh;
  font-weight: 700;
  text-align: center;
}

.vehicle-detail-plate {
  font-size: 1.15vh;
  opacity: 0.75;
  text-align: center;
  margin-bottom: 0.5vh;
}

.vehicle-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2vh;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.8vh;
  padding: 1vh 1.1vh;
}

.vehicle-track-button {
  margin-top: 0.5vh;
  background: rgba(125, 255, 155, 0.18);
  border: 0.1vh solid rgba(125, 255, 155, 0.35);
  border-radius: 1vh;
  padding: 1.2vh;
  text-align: center;
  font-size: 1.25vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.vehicle-track-button:hover {
  background: rgba(125, 255, 155, 0.26);
}

.vehicle-track-status {
  min-height: 1.6vh;
  text-align: center;
  font-size: 1.05vh;
  opacity: 0.9;
}

.vehicle-history {
  margin-top: 1.4vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.vehicle-history-title {
  font-size: 1.2vh;
  font-weight: 600;
}

#vehicle-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.vehicle-history-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1vh 1.2vh;
  display: flex;
  flex-direction: column;
  gap: 0.25vh;
}

.vehicle-history-name {
  font-size: 1.15vh;
  font-weight: 700;
}

.vehicle-history-location {
  font-size: 1.05vh;
  opacity: 0.9;
}

.contacts-screen,
.contact-detail-screen,
.contact-add-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.contacts-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.2vh 1.3vh;
  color: white;
  font-size: 1.2vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  margin-bottom: 1.2vh;
}

.contacts-search::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.contact-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.15vh 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.contact-item:active {
  transform: scale(0.98);
}

.contact-item-left {
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
}

.contact-item-name {
  font-size: 1.22vh;
  font-weight: 600;
}

.contact-item-role {
  font-size: 1.02vh;
  opacity: 0.75;
}

.contact-item-number {
  font-size: 1.08vh;
  font-weight: 500;
  opacity: 0.9;
}

.contact-detail-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  padding: 1.5vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  text-align: center;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.contact-detail-name {
  font-size: 1.75vh;
  font-weight: 700;
}

.contact-detail-role {
  font-size: 1.1vh;
  opacity: 0.8;
}

.contact-detail-number {
  font-size: 1.25vh;
  font-weight: 600;
  margin-top: 0.3vh;
}

.contact-detail-actions {
  display: flex;
  gap: 0.8vh;
  margin-top: 0.8vh;
}

.contact-action-button {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1vh;
  padding: 1.15vh;
  font-size: 1.15vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.contact-action-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.contact-action-status {
  min-height: 1.6vh;
  font-size: 1.05vh;
  opacity: 0.9;
  margin-top: 0.2vh;
}

.contact-detail-actions-secondary {
  margin-top: 0.6vh;
}

.contact-detail-actions-secondary .contact-action-button {
  font-size: 1.05vh;
  padding: 1vh;
}

.contact-delete-button {
  background: rgba(255, 90, 90, 0.16);
}

.contact-delete-button:hover {
  background: rgba(255, 90, 90, 0.24);
}

.contact-edit-form {
  margin-top: 1vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.favorite-contact .contact-item-name::after {
  content: " ★";
  font-size: 1vh;
}

.contacts-topbar {
  display: flex;
  align-items: center;
  gap: 0.8vh;
  margin-bottom: 1.2vh;
}

.contacts-topbar .contacts-search {
  margin-bottom: 0;
  flex: 1;
}

.contact-add-button {
  width: 3.8vh;
  height: 3.8vh;
  border-radius: 1vh;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.contact-add-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.contact-favorite-create {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4vh;
  margin-bottom: 0.4vh;
  font-size: 1.15vh;
}

.call-screen,
.calling-screen,
.incoming-call-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.call-display {
  width: 100%;
  min-height: 5.4vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vh;
  font-weight: 600;
  margin-bottom: 1.6vh;
  text-align: center;
  padding: 0 1vh;
  box-sizing: border-box;
}

.call-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh;
}

.call-key {
  height: 5.2vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vh;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.call-key:hover {
  background: rgba(255, 255, 255, 0.14);
}

.call-key:active {
  transform: scale(0.97);
}

.call-bottom-actions,
.call-active-actions,
.incoming-call-actions {
  display: flex;
  gap: 1vh;
  margin-top: 1.6vh;
}

.call-action-button {
  flex: 1;
  border-radius: 1vh;
  padding: 1.25vh;
  text-align: center;
  font-size: 1.2vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.call-start-button,
.call-accept-button {
  background: rgba(125, 255, 155, 0.18);
  border: 0.1vh solid rgba(125, 255, 155, 0.35);
}

.call-start-button:hover,
.call-accept-button:hover {
  background: rgba(125, 255, 155, 0.26);
}

.call-delete-button,
.call-decline-button,
.call-end-button {
  background: rgba(255, 90, 90, 0.16);
  border: 0.1vh solid rgba(255, 120, 120, 0.3);
}

.call-delete-button:hover,
.call-decline-button:hover,
.call-end-button:hover {
  background: rgba(255, 90, 90, 0.24);
}

.calling-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.4vh;
  padding: 2vh 1.5vh;
  margin-top: 4vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.calling-status {
  font-size: 1.2vh;
  opacity: 0.8;
}

.calling-name {
  font-size: 2vh;
  font-weight: 700;
}

.calling-number {
  font-size: 1.2vh;
  opacity: 0.9;
}

.call-screen {
  overflow-y: auto;
  scrollbar-width: none;
}

.call-screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.call-recents {
  margin-top: 1.6vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.call-recents-title {
  font-size: 1.2vh;
  font-weight: 600;
}

.call-recents-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.call-recent-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1vh 1.1vh;
  display: flex;
  align-items: center;
  gap: 0.9vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.call-recent-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.call-recent-item:active {
  transform: scale(0.98);
}

.call-recent-icon {
  width: 1.7vh;
  height: 1.7vh;
  object-fit: contain;
  flex-shrink: 0;
}

.call-recent-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15vh;
}

.call-recent-name {
  font-size: 1.18vh;
  font-weight: 600;
  line-height: 1.2;
}

.call-recent-number {
  font-size: 1.02vh;
  opacity: 0.78;
}

.call-recent-time {
  font-size: 0.98vh;
  opacity: 0.68;
}

.call-display-row {
  display: flex;
  align-items: center;
  gap: 0.8vh;
  margin-bottom: 1.6vh;
}

.call-display {
  flex: 1;
  min-width: 0;
  min-height: 5.4vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65vh;
  font-weight: 600;
  text-align: center;
  padding: 0 1vh;
  box-sizing: border-box;
  margin-bottom: 0;
}

.call-add-contact-button {
  width: 4.8vh;
  min-width: 4.8vh;
  height: 5.4vh;
  border-radius: 1.2vh;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5vh;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}

.call-add-contact-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.call-add-contact-button:active {
  transform: scale(0.97);
}

.call-add-contact-button.disabled {
  opacity: 0.45;
}

.call-display-input {
  border: none;
  outline: none;
  color: white;
  font-family: "Poppins", sans-serif;
  background: rgba(255, 255, 255, 0.08);
  justify-content: flex-start;
  text-align: center;
  caret-color: white;
}

.call-display-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.call-display-input:focus {
  background: rgba(255, 255, 255, 0.12);
}

.calling-timer {
  font-size: 1.25vh;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 0.2vh;
}

.messages-screen,
.chat-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.messages-topbar {
  margin-bottom: 1.2vh;
}

.messages-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.2vh 1.3vh;
  color: white;
  font-size: 1.2vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.messages-search::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.message-chat-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.1vh 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.message-chat-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.message-chat-item:active {
  transform: scale(0.98);
}

.message-chat-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
  min-width: 0;
}

.message-chat-name {
  font-size: 1.2vh;
  font-weight: 600;
  line-height: 1.2;
}

.message-chat-preview {
  font-size: 1.02vh;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35vh;
  flex-shrink: 0;
}

.message-chat-time {
  font-size: 0.95vh;
  opacity: 0.68;
}

.message-chat-badge {
  min-width: 1.9vh;
  height: 1.9vh;
  padding: 0 0.45vh;
  border-radius: 999vh;
  background: rgba(125, 255, 155, 0.2);
  border: 0.1vh solid rgba(125, 255, 155, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95vh;
  font-weight: 700;
}

.chat-screen.active-screen {
  display: flex;
  flex-direction: column;
}

.chat-screen.hidden-screen {
  display: none;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  padding-right: 0.2vh;
  scrollbar-width: none;
}

.chat-messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.chat-bubble {
  max-width: 78%;
  padding: 1vh 1.2vh;
  border-radius: 1.2vh;
  font-size: 1.12vh;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.35vh;
  word-break: break-word;
}

.chat-bubble.them {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 0.45vh;
}

.chat-bubble.me {
  align-self: flex-end;
  background: rgba(125, 255, 155, 0.16);
  border: 0.1vh solid rgba(125, 255, 155, 0.28);
  border-bottom-right-radius: 0.45vh;
}

.chat-bubble-time {
  font-size: 0.9vh;
  opacity: 0.65;
  align-self: flex-end;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.9vh;
  margin-top: 1.2vh;
  margin-bottom: 4vh;
}

.chat-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.2vh 1.3vh;
  color: white;
  font-size: 1.15vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.chat-send-button {
  width: 3.2vh;
  min-width: 3.2vh;
  height: 3.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.chat-send-button:hover {
  opacity: 1;
  transform: scale(1.08);
}

.chat-send-button:active {
  transform: scale(0.95);
}

.chat-send-icon {
  width: 3.5vh;
  height: 3.5vh;
  object-fit: contain;
  pointer-events: none;
}

.chat-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45vh;
  margin-top: 0.1vh;
}

.chat-status-icon {
  width: 1.4vh;
  height: 1.4vh;
  object-fit: contain;
  opacity: 0.95;
}

.chat-header {
  justify-content: center;
  position: relative;
}

.chat-call-icon {
  position: absolute;
  right: 0;
  width: 2.2vh;
  height: 2.2vh;
  object-fit: contain;
  cursor: pointer;
  opacity: 0.95;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.chat-call-icon:hover {
  transform: scale(1.08);
  opacity: 1;
}

.chat-call-icon:active {
  transform: scale(0.96);
}

.messages-screen {
  overflow-y: auto;
  scrollbar-width: none;
}

.messages-screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.messages-contacts-section {
  margin-top: 1.6vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.messages-section-title {
  font-size: 1.2vh;
  font-weight: 600;
}

.messages-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.messages-contact-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.05vh 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.messages-contact-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.messages-contact-item:active {
  transform: scale(0.98);
}

.messages-contact-left {
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
  min-width: 0;
}

.messages-contact-name {
  font-size: 1.18vh;
  font-weight: 600;
  line-height: 1.2;
}

.messages-contact-number {
  font-size: 1.02vh;
  opacity: 0.75;
}

.messages-contact-action {
  font-size: 1vh;
  font-weight: 600;
  opacity: 0.8;
  flex-shrink: 0;
}

.call-side-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  flex-shrink: 0;
}

.call-message-button,
.call-add-contact-button {
  width: 4.8vh;
  min-width: 4.8vh;
  height: 2.3vh;
  border-radius: 1vh;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45vh;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
  user-select: none;
}

.call-add-contact-button {
  height: 2.3vh;
  font-size: 2vh;
}

.call-message-button:hover,
.call-add-contact-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.call-message-button:active,
.call-add-contact-button:active {
  transform: scale(0.97);
}

.call-message-button.disabled,
.call-add-contact-button.disabled {
  opacity: 0.45;
}

.call-message-icon {
  width: 1.7vh;
  height: 1.7vh;
  object-fit: contain;
  pointer-events: none;
}

.call-control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh;
  margin-top: 1.6vh;
}

.call-control-button {
  height: 5.2vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border 0.15s ease;
  border: 0.1vh solid rgba(255, 255, 255, 0.08);
}

.call-control-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.call-control-button:active {
  transform: scale(0.97);
}

.call-control-button.active {
  background: rgba(255, 90, 90, 0.16);
  border: 0.1vh solid rgba(255, 120, 120, 0.3);
}

.call-control-button.speaker-active {
  background: rgba(125, 255, 155, 0.16);
  border: 0.1vh solid rgba(125, 255, 155, 0.3);
}

.call-control-icon {
  width: 2.3vh;
  height: 2.3vh;
  object-fit: contain;
  pointer-events: none;
}

#call-conference-button .call-control-icon {
  width: 1.8vh;
  height: 1.8vh;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7d7d7d;
  font-family: "Poppins", sans-serif;
}

.phone-main {
  position: relative;
  width: 32vh;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35));
}

.phone-main-img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  border-radius: 3.5vh;
  pointer-events: none;
  user-select: none;
}

.phone-wallpaper {
  position: absolute;
  top: 0.6%;
  left: 1.25%;
  width: 96%;
  height: 98.9%;
  border-radius: 3.5vh;
  background-image: url("../img/bgs/bg1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  overflow: hidden;
}

/* Screens */
.home-screen,
.settings-screen,
.banking-screen,
.sounds-screen,
.wallpaper-screen,
.notifications-screen,
.banking-transfer-screen,
.lspd-screen,
.vehicle-screen,
.vehicle-detail-screen,
.contacts-screen,
.contact-detail-screen,
.contact-add-screen,
.messages-screen,
.chat-screen,
.calls-settings-screen {
  position: absolute;
  inset: 0;
}

.home-screen {
  z-index: 2;
}

.settings-screen,
.banking-screen,
.sounds-screen,
.wallpaper-screen,
.notifications-screen,
.banking-transfer-screen,
.lspd-screen,
.vehicle-screen,
.vehicle-detail-screen,
.contacts-screen,
.contact-detail-screen,
.contact-add-screen,
.messages-screen,
.chat-screen,
.calls-settings-screen {
  z-index: 3;
  color: white;
}

.settings-screen {
  padding: 8vh 2vh 2vh 2vh;
}

.banking-screen {
  padding: 8vh 2vh 2vh 2vh;
}

.sounds-screen {
  padding: 8vh 2vh 2vh 2vh;
}

.wallpaper-screen {
  padding: 8vh 1.6vh 2vh 1.6vh;
}

.active-screen {
  display: block;
}

.hidden-screen {
  display: none;
}

.screen-transition {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.screen-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.screen-fading-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.screen-fading-in {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Allgemeine App-Icons */
.call-app,
.contacts-app,
.sms-app,
.settings-app,
.lspd-app,
.banking-app,
.acls-app,
.vehicle-app {
  position: absolute;
  width: 4.8vh;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
  filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.35));
}

.call-app:hover,
.contacts-app:hover,
.sms-app:hover,
.settings-app:hover,
.lspd-app:hover,
.banking-app:hover,
.acls-app:hover,
.vehicle-app:hover {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 0.6vh 1vh rgba(0, 0, 0, 0.4));
}

/* Untere Reihe */
.call-app {
  left: 20%;
  top: 84%;
}

.contacts-app {
  left: 40%;
  top: 84%;
}

.sms-app {
  left: 60%;
  top: 84%;
}

.settings-app {
  left: 80%;
  top: 84%;
}

/* Obere Reihe */
.lspd-app {
  left: 20%;
  top: 75%;
}

.banking-app {
  left: 40%;
  top: 75%;
}

.vehicle-app {
  left: 60%;
  top: 75%;
}

/* Navigation unten */
.homebuttons {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.homebutton-left,
.homebutton-middle,
.homebutton-right {
  position: absolute;
  width: 2.1vh;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0.9;
  pointer-events: auto;
}

.homebutton-left {
  left: 20%;
  top: 95.2%;
}

.homebutton-middle {
  left: 50%;
  top: 95.2%;
}

.homebutton-right {
  left: 80%;
  top: 95.2%;
}

/* Statusbar */
.status-bar {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Uhrzeit */
.time {
  position: absolute;
  color: #ffffff;
  top: 3.6%;
  left: 14%;
  font-size: 1.35vh;
  font-weight: 600;
  letter-spacing: 0.02vh;
  transform: translate(-50%, -50%);
}

/* Statusbar Icons */
.speaker-topbar {
  position: absolute;
  top: 3.5%;
  left: 69%;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  opacity: 0.95;
}

.signal-topbar {
  position: absolute;
  top: 3.5%;
  left: 76%;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  opacity: 0.95;
}

.akku {
  position: absolute;
  color: #fff;
  top: 3.5%;
  left: 85.5%;
  font-size: 1.05vh;
  font-weight: 600;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
  width: 3.2vh;
  height: 1.8vh;
  line-height: 1.8vh;
  text-align: center;
  border-radius: 2vh;
  border: 0.08vh solid rgba(255, 255, 255, 0.15);
}

/* Kamera / Punch Hole */
.camera {
  position: absolute;
  top: 3.55%;
  left: 50%;
  width: 1.15vh;
  height: 1.15vh;
  background: radial-gradient(circle at 35% 35%, #2c2c2c, #0a0a0a 70%);
  border: 0.12vh solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0.5vh rgba(0, 0, 0, 0.6);
}

/* Settings */
.settings-header {
  font-size: 2vh;
  font-weight: 600;
  margin-bottom: 2vh;
  text-align: center;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.settings-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.4vh;
}

.sounds-item,
.wallpaper-item {
  cursor: pointer;
}

/* Flugmodus */
.flightmode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flightmode-toggle {
  width: 4.6vh;
  height: 2.4vh;
  border-radius: 999vh;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.flightmode-knob {
  position: absolute;
  top: 50%;
  left: 0.3vh;
  width: 1.8vh;
  height: 1.8vh;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.2s ease;
}

.flightmode-toggle.active {
  background: #7dff9b;
}

.flightmode-toggle.active .flightmode-knob {
  left: 2.5vh;
}

/* Banking */
.banking-header {
  font-size: 2vh;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2vh;
}

.banking-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.4vh;
  padding: 1.6vh;
  margin-bottom: 1.5vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.banking-card-label {
  font-size: 1.2vh;
  opacity: 0.75;
  margin-bottom: 0.6vh;
}

.banking-balance {
  font-size: 2.4vh;
  font-weight: 700;
  margin-bottom: 0.6vh;
}

.banking-iban {
  font-size: 1.1vh;
  opacity: 0.7;
}

.banking-actions {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-bottom: 1.5vh;
}

.banking-action {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.35vh;
  cursor: pointer;
  transition: background 0.15s ease;
}

.banking-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.banking-transactions {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.banking-transactions-title {
  font-size: 1.35vh;
  font-weight: 600;
  margin-bottom: 0.5vh;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
}

.transaction-title {
  font-size: 1.25vh;
  font-weight: 500;
}

.transaction-date {
  font-size: 1vh;
  opacity: 0.7;
  margin-top: 0.2vh;
}

.transaction-plus {
  font-size: 1.2vh;
  font-weight: 600;
  color: #7dff9b;
}

.transaction-minus {
  font-size: 1.2vh;
  font-weight: 600;
  color: #ff8c8c;
}

/* Subscreens */
.subscreen-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}

.subscreen-title {
  font-size: 2vh;
  font-weight: 600;
  text-align: center;
}

.back-to-settings,
.back-to-settings-from-wallpaper {
  position: absolute;
  left: 0;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border: none;
  border-radius: 0.8vh;
  padding: 0.7vh 1.2vh;
  font-size: 1.15vh;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
}

/* Sounds */
.sounds-content {
  display: flex;
  flex-direction: column;
  gap: 1.8vh;
}

.sound-section {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.sound-section-title {
  font-size: 1.35vh;
  font-weight: 600;
}

.volume-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.4vh;
}

.volume-label {
  display: block;
  font-size: 1.2vh;
  margin-bottom: 1vh;
  opacity: 0.9;
}

.volume-range {
  width: 100%;
  height: 0.6vh;
  appearance: none;
  border-radius: 999vh;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}

.volume-range::-webkit-slider-thumb {
  appearance: none;
  width: 1.8vh;
  height: 1.8vh;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
}

.volume-value {
  margin-top: 1vh;
  font-size: 1.2vh;
  font-weight: 600;
  text-align: right;
}

.ringtone-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.ringtone-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.25vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.ringtone-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.ringtone-item:active {
  transform: scale(0.98);
}

.ringtone-check {
  opacity: 0;
  font-weight: 700;
}

.active-ringtone {
  background: rgba(255, 255, 255, 0.16);
}

.active-ringtone .ringtone-check {
  opacity: 1;
}

.selected-ringtone {
  margin-top: 0.6vh;
  font-size: 1.15vh;
  opacity: 0.85;
}

.wallpaper-screen {
  padding: 8vh 1.6vh 2vh 1.6vh;
  box-sizing: border-box;
}

.wallpaper-screen.active-screen {
  display: flex;
  flex-direction: column;
}

.wallpaper-screen.hidden-screen {
  display: none;
}

.wallpaper-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9vh;
  padding: 0.2vh;
  box-sizing: border-box;
  scrollbar-width: none;
}

.wallpaper-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wallpaper-option,
.wallpaper-thumb {
  position: relative;
  width: 100%;
  height: 11.5vh;
  object-fit: cover;
  border-radius: 1vh;
  cursor: pointer;
  border: 0.15vh solid rgba(255, 255, 255, 0.08);
  transition:
    transform 0.15s ease,
    border 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.wallpaper-option:hover,
.wallpaper-thumb:hover {
  transform: scale(1.02);
  border: 0.15vh solid rgba(255, 255, 255, 0.28);
}

.active-wallpaper {
  border: 0.18vh solid white;
  box-shadow: 0 0 0.8vh rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.wallpaper-option:not(.active-wallpaper),
.wallpaper-thumb:not(.active-wallpaper) {
  opacity: 0.88;
}

.notifications-item {
  cursor: pointer;
}

.notifications-screen {
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.notifications-screen.active-screen {
  display: block;
}

.notifications-screen.hidden-screen {
  display: none;
}

.notifications-content {
  display: flex;
  flex-direction: column;
  gap: 1.8vh;
}

.notification-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-toggle {
  width: 4.6vh;
  height: 2.4vh;
  border-radius: 999vh;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.notification-toggle-knob {
  position: absolute;
  top: 50%;
  left: 0.3vh;
  width: 1.8vh;
  height: 1.8vh;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.2s ease;
}

.notification-toggle.active {
  background: #7dff9b;
}

.notification-toggle.active .notification-toggle-knob {
  left: 2.5vh;
}

.notification-section {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.notification-sound-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.notification-sound-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  font-size: 1.25vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.notification-sound-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.notification-sound-item:active {
  transform: scale(0.98);
}

.notification-check {
  opacity: 0;
  font-weight: 700;
}

.active-notification-sound {
  background: rgba(255, 255, 255, 0.16);
}

.active-notification-sound .notification-check {
  opacity: 1;
}

.selected-notification-sound {
  margin-top: 0.6vh;
  font-size: 1.15vh;
  opacity: 0.85;
}

.banking-transfer-screen,
.banking-deposit-screen,
.banking-withdraw-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.banking-form {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  margin-top: 2vh;
}

.banking-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.3vh;
  color: white;
  font-size: 1.25vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.banking-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.banking-submit {
  background: rgba(125, 255, 155, 0.18);
  border: 0.1vh solid rgba(125, 255, 155, 0.4);
  border-radius: 1vh;
  padding: 1.3vh;
  text-align: center;
  font-size: 1.3vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.banking-submit:hover {
  background: rgba(125, 255, 155, 0.26);
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.lspd-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.dispatch-form {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
}

.dispatch-label {
  font-size: 1.25vh;
  font-weight: 600;
  margin-top: 0.4vh;
}

.dispatch-type-list {
  display: flex;
  gap: 0.8vh;
}

.dispatch-type {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  text-align: center;
  font-size: 1.2vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.dispatch-type:hover {
  background: rgba(255, 255, 255, 0.14);
}

.active-dispatch-type {
  background: rgba(255, 255, 255, 0.18);
  border: 0.1vh solid rgba(255, 255, 255, 0.3);
}

.dispatch-textarea {
  width: 100%;
  min-height: 12vh;
  resize: none;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.3vh;
  color: white;
  font-size: 1.2vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.dispatch-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.dispatch-submit {
  margin-top: 0.6vh;
  background: rgba(255, 90, 90, 0.18);
  border: 0.1vh solid rgba(255, 120, 120, 0.35);
  border-radius: 1vh;
  padding: 1.3vh;
  text-align: center;
  font-size: 1.25vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.dispatch-submit:hover {
  background: rgba(255, 90, 90, 0.26);
}

.dispatch-status {
  min-height: 1.8vh;
  font-size: 1.1vh;
  text-align: center;
  opacity: 0.9;
}

.dispatch-history {
  margin-top: -2.75vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.dispatch-history-title {
  font-size: 1.2vh;
  font-weight: 600;
}

#dispatch-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.dispatch-history-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1vh 1.2vh;
  display: flex;
  flex-direction: column;
  gap: 0.25vh;
}

.dispatch-history-type {
  font-size: 1.15vh;
  font-weight: 700;
  color: #ffffff;
}

.dispatch-history-description {
  font-size: 1.08vh;
  opacity: 0.9;
  line-height: 1.4;
}

.vehicle-screen,
.vehicle-detail-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.vehicle-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.vehicle-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vehicle-item:active {
  transform: scale(0.98);
}

.vehicle-item-left {
  display: flex;
  flex-direction: column;
  gap: 0.25vh;
}

.vehicle-item-name {
  font-size: 1.25vh;
  font-weight: 600;
}

.vehicle-item-plate {
  font-size: 1.05vh;
  opacity: 0.75;
}

.vehicle-item-status {
  font-size: 1.1vh;
  font-weight: 600;
}

.vehicle-status-active {
  color: #7dff9b;
}

.vehicle-status-parked {
  color: #ffd36e;
}

.vehicle-detail-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  padding: 1.5vh;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.vehicle-detail-name {
  font-size: 1.7vh;
  font-weight: 700;
  text-align: center;
}

.vehicle-detail-plate {
  font-size: 1.15vh;
  opacity: 0.75;
  text-align: center;
  margin-bottom: 0.5vh;
}

.vehicle-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2vh;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.8vh;
  padding: 1vh 1.1vh;
}

.vehicle-track-button {
  margin-top: 0.5vh;
  background: rgba(125, 255, 155, 0.18);
  border: 0.1vh solid rgba(125, 255, 155, 0.35);
  border-radius: 1vh;
  padding: 1.2vh;
  text-align: center;
  font-size: 1.25vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.vehicle-track-button:hover {
  background: rgba(125, 255, 155, 0.26);
}

.vehicle-track-status {
  min-height: 1.6vh;
  text-align: center;
  font-size: 1.05vh;
  opacity: 0.9;
}

.vehicle-history {
  margin-top: 1.4vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.vehicle-history-title {
  font-size: 1.2vh;
  font-weight: 600;
}

#vehicle-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.vehicle-history-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1vh 1.2vh;
  display: flex;
  flex-direction: column;
  gap: 0.25vh;
}

.vehicle-history-name {
  font-size: 1.15vh;
  font-weight: 700;
}

.vehicle-history-location {
  font-size: 1.05vh;
  opacity: 0.9;
}

.contacts-screen,
.contact-detail-screen,
.contact-add-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.contacts-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.2vh 1.3vh;
  color: white;
  font-size: 1.2vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  margin-bottom: 1.2vh;
}

.contacts-search::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.contact-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.15vh 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.contact-item:active {
  transform: scale(0.98);
}

.contact-item-left {
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
}

.contact-item-name {
  font-size: 1.22vh;
  font-weight: 600;
}

.contact-item-role {
  font-size: 1.02vh;
  opacity: 0.75;
}

.contact-item-number {
  font-size: 1.08vh;
  font-weight: 500;
  opacity: 0.9;
}

.contact-detail-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  padding: 1.5vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  text-align: center;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.contact-detail-name {
  font-size: 1.75vh;
  font-weight: 700;
}

.contact-detail-role {
  font-size: 1.1vh;
  opacity: 0.8;
}

.contact-detail-number {
  font-size: 1.25vh;
  font-weight: 600;
  margin-top: 0.3vh;
}

.contact-detail-actions {
  display: flex;
  gap: 0.8vh;
  margin-top: 0.8vh;
}

.contact-action-button {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1vh;
  padding: 1.15vh;
  font-size: 1.15vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.contact-action-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.contact-action-status {
  min-height: 1.6vh;
  font-size: 1.05vh;
  opacity: 0.9;
  margin-top: 0.2vh;
}

.contact-detail-actions-secondary {
  margin-top: 0.6vh;
}

.contact-detail-actions-secondary .contact-action-button {
  font-size: 1.05vh;
  padding: 1vh;
}

.contact-delete-button {
  background: rgba(255, 90, 90, 0.16);
}

.contact-delete-button:hover {
  background: rgba(255, 90, 90, 0.24);
}

.contact-edit-form {
  margin-top: 1vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.favorite-contact .contact-item-name::after {
  content: " ★";
  font-size: 1vh;
}

.contacts-topbar {
  display: flex;
  align-items: center;
  gap: 0.8vh;
  margin-bottom: 1.2vh;
}

.contacts-topbar .contacts-search {
  margin-bottom: 0;
  flex: 1;
}

.contact-add-button {
  width: 3.8vh;
  height: 3.8vh;
  border-radius: 1vh;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.contact-add-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.contact-favorite-create {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4vh;
  margin-bottom: 0.4vh;
  font-size: 1.15vh;
}

.call-screen,
.calling-screen,
.incoming-call-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.call-display {
  width: 100%;
  min-height: 5.4vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vh;
  font-weight: 600;
  margin-bottom: 1.6vh;
  text-align: center;
  padding: 0 1vh;
  box-sizing: border-box;
}

.call-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh;
}

.call-key {
  height: 5.2vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vh;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.call-key:hover {
  background: rgba(255, 255, 255, 0.14);
}

.call-key:active {
  transform: scale(0.97);
}

.call-bottom-actions,
.call-active-actions,
.incoming-call-actions {
  display: flex;
  gap: 1vh;
  margin-top: 1.6vh;
}

.call-action-button {
  flex: 1;
  border-radius: 1vh;
  padding: 1.25vh;
  text-align: center;
  font-size: 1.2vh;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.call-start-button,
.call-accept-button {
  background: rgba(125, 255, 155, 0.18);
  border: 0.1vh solid rgba(125, 255, 155, 0.35);
}

.call-start-button:hover,
.call-accept-button:hover {
  background: rgba(125, 255, 155, 0.26);
}

.call-delete-button,
.call-decline-button,
.call-end-button {
  background: rgba(255, 90, 90, 0.16);
  border: 0.1vh solid rgba(255, 120, 120, 0.3);
}

.call-delete-button:hover,
.call-decline-button:hover,
.call-end-button:hover {
  background: rgba(255, 90, 90, 0.24);
}

.calling-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.4vh;
  padding: 2vh 1.5vh;
  margin-top: 4vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.calling-status {
  font-size: 1.2vh;
  opacity: 0.8;
}

.calling-name {
  font-size: 2vh;
  font-weight: 700;
}

.calling-number {
  font-size: 1.2vh;
  opacity: 0.9;
}

.call-screen {
  overflow-y: auto;
  scrollbar-width: none;
}

.call-screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.call-recents {
  margin-top: 1.6vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.call-recents-title {
  font-size: 1.2vh;
  font-weight: 600;
}

.call-recents-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.call-recent-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1vh 1.1vh;
  display: flex;
  align-items: center;
  gap: 0.9vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.call-recent-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.call-recent-item:active {
  transform: scale(0.98);
}

.call-recent-icon {
  width: 1.7vh;
  height: 1.7vh;
  object-fit: contain;
  flex-shrink: 0;
}

.call-recent-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15vh;
}

.call-recent-name {
  font-size: 1.18vh;
  font-weight: 600;
  line-height: 1.2;
}

.call-recent-number {
  font-size: 1.02vh;
  opacity: 0.78;
}

.call-recent-time {
  font-size: 0.98vh;
  opacity: 0.68;
}

.call-display-row {
  display: flex;
  align-items: center;
  gap: 0.8vh;
  margin-bottom: 1.6vh;
}

.call-display {
  flex: 1;
  min-width: 0;
  min-height: 5.4vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65vh;
  font-weight: 600;
  text-align: center;
  padding: 0 1vh;
  box-sizing: border-box;
  margin-bottom: 0;
}

.call-add-contact-button {
  width: 4.8vh;
  min-width: 4.8vh;
  height: 5.4vh;
  border-radius: 1.2vh;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5vh;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}

.call-add-contact-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.call-add-contact-button:active {
  transform: scale(0.97);
}

.call-add-contact-button.disabled {
  opacity: 0.45;
}

.call-display-input {
  border: none;
  outline: none;
  color: white;
  font-family: "Poppins", sans-serif;
  background: rgba(255, 255, 255, 0.08);
  justify-content: flex-start;
  text-align: center;
  caret-color: white;
}

.call-display-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.call-display-input:focus {
  background: rgba(255, 255, 255, 0.12);
}

.calling-timer {
  font-size: 1.25vh;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 0.2vh;
}

.messages-screen,
.chat-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: white;
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.messages-topbar {
  margin-bottom: 1.2vh;
}

.messages-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.2vh 1.3vh;
  color: white;
  font-size: 1.2vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.messages-search::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.message-chat-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.1vh 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.message-chat-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.message-chat-item:active {
  transform: scale(0.98);
}

.message-chat-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
  min-width: 0;
}

.message-chat-name {
  font-size: 1.2vh;
  font-weight: 600;
  line-height: 1.2;
}

.message-chat-preview {
  font-size: 1.02vh;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35vh;
  flex-shrink: 0;
}

.message-chat-time {
  font-size: 0.95vh;
  opacity: 0.68;
}

.message-chat-badge {
  min-width: 1.9vh;
  height: 1.9vh;
  padding: 0 0.45vh;
  border-radius: 999vh;
  background: rgba(125, 255, 155, 0.2);
  border: 0.1vh solid rgba(125, 255, 155, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95vh;
  font-weight: 700;
}

.chat-screen.active-screen {
  display: flex;
  flex-direction: column;
}

.chat-screen.hidden-screen {
  display: none;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  padding-right: 0.2vh;
  scrollbar-width: none;
}

.chat-messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.chat-bubble {
  max-width: 78%;
  padding: 1vh 1.2vh;
  border-radius: 1.2vh;
  font-size: 1.12vh;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.35vh;
  word-break: break-word;
}

.chat-bubble.them {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 0.45vh;
}

.chat-bubble.me {
  align-self: flex-end;
  background: rgba(125, 255, 155, 0.16);
  border: 0.1vh solid rgba(125, 255, 155, 0.28);
  border-bottom-right-radius: 0.45vh;
}

.chat-bubble-time {
  font-size: 0.9vh;
  opacity: 0.65;
  align-self: flex-end;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.9vh;
  margin-top: 1.2vh;
  margin-bottom: 4vh;
}

.chat-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  outline: none;
  border-radius: 1vh;
  padding: 1.2vh 1.3vh;
  color: white;
  font-size: 1.15vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.chat-send-button {
  width: 3.2vh;
  min-width: 3.2vh;
  height: 3.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.chat-send-button:hover {
  opacity: 1;
  transform: scale(1.08);
}

.chat-send-button:active {
  transform: scale(0.95);
}

.chat-send-icon {
  width: 3.5vh;
  height: 3.5vh;
  object-fit: contain;
  pointer-events: none;
}

.chat-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45vh;
  margin-top: 0.1vh;
}

.chat-status-icon {
  width: 1.4vh;
  height: 1.4vh;
  object-fit: contain;
  opacity: 0.95;
}

.chat-header {
  justify-content: center;
  position: relative;
}

.chat-call-icon {
  position: absolute;
  right: 0;
  width: 2.2vh;
  height: 2.2vh;
  object-fit: contain;
  cursor: pointer;
  opacity: 0.95;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.chat-call-icon:hover {
  transform: scale(1.08);
  opacity: 1;
}

.chat-call-icon:active {
  transform: scale(0.96);
}

.messages-screen {
  overflow-y: auto;
  scrollbar-width: none;
}

.messages-screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.messages-contacts-section {
  margin-top: 1.6vh;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.messages-section-title {
  font-size: 1.2vh;
  font-weight: 600;
}

.messages-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.messages-contact-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 1.05vh 1.2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8vh;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.messages-contact-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.messages-contact-item:active {
  transform: scale(0.98);
}

.messages-contact-left {
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
  min-width: 0;
}

.messages-contact-name {
  font-size: 1.18vh;
  font-weight: 600;
  line-height: 1.2;
}

.messages-contact-number {
  font-size: 1.02vh;
  opacity: 0.75;
}

.messages-contact-action {
  font-size: 1vh;
  font-weight: 600;
  opacity: 0.8;
  flex-shrink: 0;
}

.call-side-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  flex-shrink: 0;
}

.call-message-button,
.call-add-contact-button {
  width: 4.8vh;
  min-width: 4.8vh;
  height: 2.3vh;
  border-radius: 1vh;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45vh;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
  user-select: none;
}

.call-add-contact-button {
  height: 2.3vh;
  font-size: 2vh;
}

.call-message-button:hover,
.call-add-contact-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.call-message-button:active,
.call-add-contact-button:active {
  transform: scale(0.97);
}

.call-message-button.disabled,
.call-add-contact-button.disabled {
  opacity: 0.45;
}

.call-message-icon {
  width: 1.7vh;
  height: 1.7vh;
  object-fit: contain;
  pointer-events: none;
}

.call-control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh;
  margin-top: 1.6vh;
}

.call-control-button {
  height: 5.2vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border 0.15s ease;
  border: 0.1vh solid rgba(255, 255, 255, 0.08);
}

.call-control-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.call-control-button:active {
  transform: scale(0.97);
}

.call-control-button.active {
  background: rgba(255, 90, 90, 0.16);
  border: 0.1vh solid rgba(255, 120, 120, 0.3);
}

.call-control-button.speaker-active {
  background: rgba(125, 255, 155, 0.16);
  border: 0.1vh solid rgba(125, 255, 155, 0.3);
}

.call-control-icon {
  width: 2.3vh;
  height: 2.3vh;
  object-fit: contain;
  pointer-events: none;
}

#call-conference-button .call-control-icon {
  width: 1.8vh;
  height: 1.8vh;
}

.calls-settings-screen {
  padding: 8vh 2vh 2vh 2vh;
  box-sizing: border-box;
}

.calls-settings-content {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.call-setting-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.2vh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1vh;
  padding: 0.9vh 1.2vh;
  backdrop-filter: blur(0.4vh);
  -webkit-backdrop-filter: blur(0.4vh);
}

.call-setting-item span {
  flex: 1;
  font-size: 1.2vh;
  line-height: 1.25;
  margin-right: 1vh;
}

.call-setting-item .flightmode-toggle {
  flex-shrink: 0;
}

.call-recent-item-disabled {
  opacity: 0.55;
  cursor: default;
}

.call-recent-item-disabled:hover {
  background: rgba(255, 255, 255, 0.08);
}

.call-recent-item-disabled:active {
  transform: none;
}

.call-start-button.disabled,
.call-accept-button.disabled,
.call-key.disabled,
.call-add-contact-button.disabled-flight,
.call-message-button.disabled-flight {
  opacity: 0.45;
  cursor: default;
}

.call-start-button.disabled:hover,
.call-accept-button.disabled:hover,
.call-key.disabled:hover,
.call-add-contact-button.disabled-flight:hover,
.call-message-button.disabled-flight:hover {
  background: inherit;
}

.call-key.disabled:active,
.call-start-button.disabled:active,
.call-accept-button.disabled:active,
.call-add-contact-button.disabled-flight:active,
.call-message-button.disabled-flight:active {
  transform: none;
}