:root {
  --app-bg-deep: #07100e;
  --app-panel: #101b24;
  --app-panel-2: #15222d;
  --app-line: rgba(127, 157, 181, 0.13);
  --app-soft-text: #8fa4b6;
}

html,
body {
  background: var(--app-bg-deep);
}

body {
  background-image:
    radial-gradient(circle at 10% -10%, rgba(54, 111, 153, 0.10), transparent 34%),
    linear-gradient(180deg, #0b171e 0%, var(--app-bg-deep) 100%);
}

.shell,
.layout,
.conversation-pane {
  background: var(--app-panel);
}

.conversation-pane {
  border-right-color: var(--app-line);
  background: linear-gradient(180deg, #111d27 0%, #0d1821 100%);
}

.app-header {
  border-bottom-color: var(--app-line);
  background: rgba(16, 28, 38, 0.94);
  backdrop-filter: blur(16px);
}

.profile-button {
  background: linear-gradient(145deg, #459af0 0%, #4a73dc 100%);
  box-shadow: 0 7px 22px rgba(52, 126, 210, 0.25);
}

.app-header-search {
  border: 1px solid rgba(143, 169, 190, 0.09);
  background: rgba(39, 54, 67, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
}

.app-header-search:focus-within {
  border-color: rgba(91, 168, 236, 0.38);
  box-shadow: 0 0 0 1px rgba(91, 168, 236, 0.18);
}

.app-header-search input::placeholder {
  color: #8195a7;
}

.new-conversation-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(56, 139, 218, 0.17);
  color: #79c2ff;
  font-size: 1.6rem;
  font-weight: 350;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(85, 165, 236, 0.10);
}

.new-conversation-button:hover,
.new-conversation-button:focus-visible {
  background: rgba(56, 139, 218, 0.24);
  filter: none;
}

.list {
  padding: 7px 6px 12px;
}

.conversation {
  min-height: 76px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.conversation:hover {
  border-color: rgba(132, 159, 181, 0.06);
  background: rgba(46, 62, 76, 0.44);
}

.conversation.active {
  border-color: rgba(121, 188, 243, 0.18);
  background: linear-gradient(135deg, rgba(45, 102, 151, 0.95), rgba(48, 86, 129, 0.95));
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.conversation.active:has(.platform-badge.whatsapp) {
  border-color: rgba(89, 205, 145, 0.16);
  background: linear-gradient(135deg, rgba(31, 105, 79, 0.96), rgba(37, 119, 88, 0.94));
}

.conversation.active:has(.platform-badge.telegram) {
  border-color: rgba(105, 183, 247, 0.18);
  background: linear-gradient(135deg, rgba(44, 102, 151, 0.96), rgba(53, 93, 143, 0.95));
}

.conversation-avatar {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 5px 15px rgba(0, 0, 0, 0.17);
}

.conversation-title {
  font-weight: 760;
  letter-spacing: -0.01em;
}

.conversation-preview {
  color: #8da1b3;
}

.conversation-time,
.conversation-pin-state,
.conversation-notification-state {
  color: #8499ab;
}

.conversation.active .conversation-time,
.conversation.active .conversation-pin-state,
.conversation.active .conversation-notification-state {
  color: rgba(236, 246, 253, 0.72);
}

.platform-badge {
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 760;
  backdrop-filter: blur(8px);
}

.platform-badge.telegram {
  background: rgba(45, 137, 216, 0.14);
  border-color: rgba(66, 157, 235, 0.26);
  color: #84c8ff;
}

.platform-badge.whatsapp {
  background: rgba(48, 175, 112, 0.13);
  border-color: rgba(65, 198, 132, 0.23);
  color: #83e3b0;
}

.unread-badge {
  background: linear-gradient(145deg, #3697ed, #4f74e2);
  box-shadow: 0 4px 12px rgba(50, 133, 220, 0.22);
}

.conversation:has(.platform-badge.whatsapp) .unread-badge {
  background: linear-gradient(145deg, #2fbd79, #278f63);
  box-shadow: 0 4px 12px rgba(42, 153, 101, 0.20);
}

/* Keep media compact enough that a single attachment does not occupy most of an iPhone viewport. */
.chat .message-image-link {
  max-width: min(300px, 64vw);
}

.chat .message-image {
  max-height: 310px;
}

.chat .message-video {
  max-width: min(310px, 67vw);
  max-height: 310px;
}

.chat .message-file {
  min-width: min(215px, 58vw);
  max-width: min(300px, 67vw);
  padding: 8px 9px;
  gap: 9px;
}

.chat .message-file-icon {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}

.chat .message-file-copy strong {
  font-size: 12.5px;
}

.chat .message-file-copy small {
  font-size: 10.5px;
}

/* Settings adopt the same quiet glassy surfaces as the refreshed chat. */
.settings-panel {
  background: rgba(4, 10, 12, 0.82);
  backdrop-filter: blur(16px);
}

.settings-sheet {
  border-color: rgba(126, 156, 180, 0.13);
  background:
    radial-gradient(circle at 15% 0%, rgba(57, 119, 164, 0.10), transparent 30%),
    linear-gradient(180deg, #111e28 0%, #0b161e 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.settings-titlebar {
  border-bottom-color: var(--app-line);
  background: rgba(15, 27, 36, 0.93);
  backdrop-filter: blur(18px);
}

.settings-titlebar .eyebrow {
  color: #7aaed5;
}

.settings-close {
  background: rgba(113, 141, 163, 0.12) !important;
  color: #cbd9e4;
}

.settings-profile {
  margin: 10px 10px 14px;
  padding: 15px;
  border: 1px solid rgba(132, 162, 185, 0.09);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(42, 67, 85, 0.66), rgba(27, 47, 62, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.settings-profile-avatar {
  background: linear-gradient(145deg, #459af0, #4f6edc);
  box-shadow: 0 8px 22px rgba(50, 123, 210, 0.23);
}

.settings-group {
  border-color: rgba(128, 157, 180, 0.10);
  border-radius: 16px;
  background: rgba(21, 35, 46, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.settings-row + .settings-row,
.connector-card {
  border-top-color: rgba(130, 158, 180, 0.09);
}

.settings-row span,
.settings-row p,
.settings-hint,
.connector-card small {
  color: #879bad;
}

.settings-row-action,
.settings-actions button,
.connector-actions button {
  border-radius: 999px;
  background: rgba(68, 111, 146, 0.20);
  color: #bcd9ef;
  box-shadow: inset 0 0 0 1px rgba(102, 159, 202, 0.09);
}

#push-toggle {
  background: linear-gradient(145deg, #348fdb, #466ed5);
  color: #fff;
}

#logout {
  background: rgba(177, 66, 75, 0.18);
  color: #ffb8bd;
  box-shadow: inset 0 0 0 1px rgba(228, 97, 108, 0.10);
}

.onboarding-panel {
  border-color: rgba(127, 158, 181, 0.11);
  border-radius: 16px;
  background: rgba(17, 30, 40, 0.82);
}

.recipient-panel {
  background: rgba(4, 10, 12, 0.80);
  backdrop-filter: blur(16px);
}

.recipient-sheet {
  border-color: rgba(127, 157, 181, 0.12);
  background: linear-gradient(180deg, #111e28, #0b161e);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.40);
}

.recipient-titlebar {
  border-bottom-color: var(--app-line);
  background: rgba(15, 27, 36, 0.94);
}

@media (max-width: 760px) {
  html,
  body,
  #app-view,
  .shell,
  .layout {
    background: var(--app-bg-deep) !important;
  }

  .conversation-pane {
    background: linear-gradient(180deg, #111d27 0%, #0d1821 100%);
  }

  .list {
    padding: 7px 6px 14px;
  }

  .conversation {
    min-height: 74px;
    border-radius: 15px;
  }

  .chat .message-image-link {
    max-width: min(270px, 64vw);
  }

  .chat .message-image,
  .chat .message-video {
    max-height: 295px;
  }

  .chat .message-video {
    max-width: min(280px, 67vw);
  }

  .chat .message-file {
    min-width: min(205px, 58vw);
    max-width: min(280px, 67vw);
  }

  .settings-panel {
    background: var(--app-bg-deep);
  }

  .settings-sheet {
    background:
      radial-gradient(circle at 14% 0%, rgba(57, 119, 164, 0.08), transparent 28%),
      linear-gradient(180deg, #111e28 0%, #0b161e 100%);
  }
}

/* The service-worker cache namespace owns release invalidation for the wallpaper too. */
.chat .messages {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at 20% 0%, rgba(93, 157, 219, 0.09), transparent 34%),
    url("/assets/chat-wallpaper.svg");
}

.chat[data-platform="whatsapp"] .messages {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.10)),
    radial-gradient(circle at 18% 0%, rgba(52, 154, 106, 0.10), transparent 36%),
    url("/assets/chat-wallpaper.svg");
}