/* MAX Messenger Dark Theme — DigitalTwin v4.0 */

:root {
  --bg: #000000;
  --card: #1e1e1e;
  --border: #2a2a2a;
  --text: #ffffff;
  --text2: #8e8e93;
  --blue: #007aff;
  --red: #ff3b30;
  --green: #34c759;
  --sent1: #8b5cf6;
  --sent2: #a78bfa;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

button,
input {
  font: inherit;
  color: inherit;
}

.hidden {
  display: none !important;
}

.screen {
  min-height: 100dvh;
  min-height: 100vh;
  width: 100%;
}

#appRoot {
  width: 100%;
  min-height: 100dvh;
}

/* Layout width: iPhone 14 Pro-ish */
@media (min-width: 520px) {
  #appRoot {
    max-width: 430px;
    margin: 0 auto;
    border-left: 0.5px solid var(--border);
    border-right: 0.5px solid var(--border);
  }
}

/* ------------------------------ Login ------------------------------ */

#loginScreen {
  background: var(--bg);
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
}

.loginWrap {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.loginTitle {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.loginCard {
  display: grid;
  gap: 12px;
}

.loginLabel {
  text-align: left;
  font-size: 13px;
  color: var(--text2);
}

.loginInput {
  height: 44px;
  width: 100%;
  border: 1px solid transparent;
  background: var(--card);
  border-radius: 14px;
  padding: 0 14px;
  outline: none;
}

.loginInput:focus {
  border-color: rgba(0, 122, 255, 0.5);
}

.primaryBtn {
  height: 44px;
  border: none;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

.primaryBtn:active {
  transform: scale(0.99);
}

.loginError {
  text-align: left;
  font-size: 13px;
  color: var(--red);
  padding-top: 2px;
}

/* ------------------------------ Top headers ------------------------------ */

.topHeader {
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 10px;
}

.topHeaderTitle {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.searchWrap {
  padding: 0 16px 16px;
}

.searchInput {
  height: 44px;
  width: 100%;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 0 14px;
  outline: none;
  color: var(--text);
}

.searchInput::placeholder {
  color: var(--text2);
}

.searchInput:focus {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ------------------------------ Lists ------------------------------ */

.listWrap {
  padding-bottom: calc(83px + env(safe-area-inset-bottom, 0px));
}

.row {
  height: 72px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 0.5px solid var(--border);
  user-select: none;
}

.row:active {
  background: rgba(255, 255, 255, 0.04);
}

.rowMain {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}

.rowTop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.rowName {
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rowTime {
  flex: none;
  font-size: 13px;
  color: var(--text2);
}

.rowPreview {
  min-width: 0;
  font-size: 15px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rowMeta {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 6px;
}

.badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

/* ------------------------------ Avatars ------------------------------ */

.avatar {
  flex: none;
  border-radius: 50%;
  background: var(--card);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.avatar56 {
  width: 56px;
  height: 56px;
}

.avatar48 {
  width: 48px;
  height: 48px;
}

.avatar40 {
  width: 40px;
  height: 40px;
}

.avatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatarInitials {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ------------------------------ Bottom nav ------------------------------ */

.bottomNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(83px + env(safe-area-inset-bottom, 0px));
  padding: 8px 12px env(safe-area-inset-bottom, 0px);
  background: var(--bg);
  border-top: 0.5px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 50;
}

.tabBtn {
  border: none;
  background: transparent;
  padding: 8px 4px 10px;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  color: var(--text2);
}

.tabIcon {
  display: block;
}

.tabLabel {
  font-size: 10px;
  line-height: 12px;
}

.tabBtn.active {
  color: var(--blue);
}

/* ------------------------------ Chat detail ------------------------------ */

.chatTopBar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 60px;
  padding: max(0px, env(safe-area-inset-top, 0px)) 12px 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  background: transparent;
}

.iconBtn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--text);
}

.icon {
  display: block;
}

.chatTopCenter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chatHeaderText {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chatHeaderName {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatHeaderSub {
  font-size: 13px;
  color: var(--text2);
}

.callBtn {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: var(--text);
  justify-self: end;
}

.callBtn:active {
  transform: scale(0.98);
}

.messagesWrap {
  height: calc(100dvh - 60px);
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.messages {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 16px;
  display: grid;
  gap: 8px;
}

.bubbleRow {
  display: flex;
}

.bubbleRow.sent {
  justify-content: flex-end;
}

.bubbleRow.received {
  justify-content: flex-start;
}

.bubble {
  max-width: 80%;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 20px;
  word-break: break-word;
}

.bubble.sent {
  background: linear-gradient(135deg, var(--sent1), var(--sent2));
  border-bottom-right-radius: 4px;
}

.bubble.received {
  background: var(--card);
  border-bottom-left-radius: 4px;
}

.chipRow {
  display: flex;
  justify-content: center;
}

.callChip {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2);
  font-size: 13px;
  width: fit-content;
  max-width: 80%;
  margin: 0 auto;
}

.inputBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 0.5px solid rgba(42, 42, 42, 0.7);
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 10px;
  z-index: 45;
}
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 0.5px solid rgba(42, 42, 42, 0.7);
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 10px;
  z-index: 45;
}

.inputPill {
  height: 44px;
  background: var(--card);
  border-radius: 20px;
  padding: 0 14px;
  display: flex;
  align-items: center;
}

.messageInput {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
}

.messageInput::placeholder {
  color: var(--text2);
}

.sendCircle {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: var(--blue);
  display: grid;
  place-items: center;
  color: #fff;
}

.sendCircle:disabled {
  opacity: 0.55;
}

/* ------------------------------ Empty states / Settings ------------------------------ */

.emptyState {
  padding: 24px 16px;
  color: var(--text2);
}

.emptyTitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.emptySub {
  font-size: 15px;
  color: var(--text2);
}

.settingsWrap {
  padding: 12px 16px calc(83px + env(safe-area-inset-bottom, 0px));
}

.settingsCard {
  background: var(--card);
  border-radius: 16px;
  border: 0.5px solid rgba(42, 42, 42, 0.7);
  padding: 14px;
  display: grid;
  gap: 14px;
}

.settingsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settingsKey {
  font-size: 15px;
  color: var(--text2);
}

.settingsVal {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}

.secondaryBtn {
  height: 44px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 600;
}

.secondaryBtn:active {
  transform: scale(0.99);
}

/* ------------------------------ Incoming call banner ------------------------------ */

.incomingBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  transform: translateY(-120%);
  transition: transform 0.3s ease-out;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
  pointer-events: none;
}

.incomingBanner.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.incomingInner {
  height: 100px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border: 0.5px solid rgba(42, 42, 42, 0.75);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.incomingText {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.incomingName {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incomingSub {
  font-size: 13px;
  color: var(--text2);
}

.incomingActions {
  display: flex;
  gap: 10px;
}

.circleBtn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  display: grid;
  place-items: center;
  color: #fff;
}

.circleBtn.accept {
  background: var(--green);
}

.circleBtn.decline {
  background: var(--red);
}

.circleBtn:active {
  transform: scale(0.98);
}

/* ------------------------------ Video call overlay (shell) ------------------------------ */

.videoCallScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

.remoteVideo {
  position: absolute;
  inset: 0;
}

.selfVideo {
  position: absolute;
  right: 12px;
  top: max(12px, env(safe-area-inset-top, 0px));
  width: 110px;
  height: 160px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(42, 42, 42, 0.75);
  object-fit: cover;
}

.videoControls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  gap: 18px;
}

.videoCtrl {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  display: grid;
  place-items: center;
}

.videoCtrl.end {
  background: var(--red);
  color: #fff;
}

/* No hover on touch devices */
@media (hover: hover) and (pointer: fine) {
  .row:hover {
    background: rgba(255, 255, 255, 0.03);
  }
}