/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  font-size: 1.125rem;
  --bg0: #FFFFFF;
  --bg1: rgba(206,206,206,.5);
  --bg2: #F2F2F7;          /* iOS grouped bg */
  --bg3: #FFFFFF;          /* iOS card bg */
  --fg0: #000000;
  --fg1: rgba(0,0,0,.45);
  --fg2: #8E8E93;          /* iOS secondary label */
  --sep: rgba(0,0,0,0.12);
  --a0: #007AFF;
  --header-h: 76px;
  --header-bg: #F2F2F7;
  --header-sep: rgba(0,0,0,0.13);
  --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --skel: rgba(0,0,0,0.07);
  --skel-shine: rgba(0,0,0,0.03);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg0: #000000;
    --bg1: rgba(255,255,255,.13);
    --bg2: #1C1C1E;
    --bg3: #2C2C2E;
    --fg0: #FFFFFF;
    --fg1: rgba(255,255,255,.45);
    --fg2: #8E8E93;
    --sep: rgba(255,255,255,0.1);
    --a0: #0A84FF;
    --header-bg: #1C1C1E;
    --header-sep: rgba(255,255,255,0.1);
    --skel: rgba(255,255,255,0.1);
    --skel-shine: rgba(255,255,255,0.05);
  }
}
:root[data-theme="dark"] {
  --skel: rgba(255,255,255,0.1);
  --skel-shine: rgba(255,255,255,0.05);
}
:root[data-theme="light"] {
  --skel: rgba(0,0,0,0.07);
  --skel-shine: rgba(0,0,0,0.03);
}
/* Font scaling only for mid-size screens (tablets) — on desktop
   the app lives inside the phone mockup at mobile size */
@media (min-width: 600px) and (max-width: 767px) { :root { font-size: 1.35rem; } }

/* ─── Reset ──────────────────────────────────────────────── */
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
  /* bg2 matches the solid base of the frosted-glass nav bar so the safe-area
     inset region above the header is always the same colour as the nav bar */
  background: var(--bg2);
  color: var(--fg0);
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  -webkit-font-smoothing: antialiased;
  /* Prevent pinch-to-zoom — allows single-finger pan but blocks scale gestures */
  touch-action: pan-x pan-y;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; }

/* ─── App shell (clip all views) ────────────────────────── */
#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg2); /* same as nav bar base — no colour gap at safe edges */
}

/* ─── View system ────────────────────────────────────────── */
.view {
  position: absolute;
  inset: 0;
  background: var(--bg0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  /* default: off-screen right (for profile) */
  transform: translateX(100%);
}
.view.active {
  transform: translateX(0);
}
/* chat view is the landing view — starts centered */
#view-chat {
  transform: translateX(0);
}
/* list view sits off-screen left (user navigates back to reach it) */
#view-list {
  transform: translateX(-28%);
}

/* ─── Shared header ──────────────────────────────────────── */
.im-header {
  flex-shrink: 0;
  /* Extend frosted glass into the status-bar safe area */
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: 4px;
  padding-right: 4px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--header-sep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* anchors .im-contact absolute positioning */
  z-index: 10;
  user-select: none;
}
.im-header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg0);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.im-spacer { flex: 1; }

/* Back button (chevron + label) */
.im-back {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--a0);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding: 10px 8px 10px 10px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.im-back:active { opacity: 0.5; }

/* Back-button notification badge */
.back-nav-badge {
  background: #FF3B30;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  margin-left: 3px;
  transform-origin: center;
  vertical-align: middle;
  /* start hidden; JS will animate it in */
  opacity: 0;
  transform: scale(0.4);
}

/* Text button (Edit) */
.im-btn-text {
  flex: 1;
  background: none;
  border: none;
  color: var(--a0);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 10px 10px 12px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.im-btn-text:active { opacity: 0.5; }

/* Icon button (compose) */
.im-btn-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  color: var(--a0);
  padding: 10px 12px 10px 10px;
  -webkit-tap-highlight-color: transparent;
}
.im-btn-icon:active { opacity: 0.5; }

/* Chat header center: avatar + name — truly centred via absolute positioning */
.im-contact {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, #34AADC 0%, #007AFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.im-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--fg0);
  line-height: 1;
}

/* Info button */
.im-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  color: var(--a0);
  padding: 10px 12px 10px 10px;
  -webkit-tap-highlight-color: transparent;
}
.im-info:active { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════ */
/* VIEW 0 — Messages list                                      */
/* ═══════════════════════════════════════════════════════════ */
.search-wrap {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--bg0);
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(118,118,128,0.12);
  border-radius: 10px;
  padding: 7px 12px;
}
.search-placeholder {
  font-size: 15px;
  color: var(--fg2);
  line-height: 1;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Hidden until JS adds .skel to items — guarantees no avatar color flash
     on any browser, even before external CSS file fully applies */
  visibility: hidden;
}
.conv-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px 10px 16px;
  background: none;
  border: none;
  border-bottom: 0.5px solid var(--sep);
  text-align: left;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.12s ease;
}
.conv-item:active {
  background: rgba(0,0,0,0.04);
  transform: scale(0.992);
}
@media (prefers-color-scheme: dark) {
  .conv-item:active { background: rgba(255,255,255,0.05); }
}

.conv-avatar-wrap { flex-shrink: 0; }
.conv-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(140deg, #34AADC 0%, #007AFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
.conv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.conv-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.conv-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg0);
  line-height: 1.2;
}
.conv-time {
  font-size: 13px;
  color: var(--fg2);
  flex-shrink: 0;
}
.conv-row-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.conv-preview {
  font-size: 14px;
  color: var(--fg2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  line-height: 1.3;
}
.conv-chevron { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════ */
/* VIEW 1 — Chat messages                                      */
/* ═══════════════════════════════════════════════════════════ */
.messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem .9rem;
}
.messages::after {
  content: '';
  display: table;
  clear: both;
}

/* Bubbles */
.bubble {
  overflow: hidden;
  display: inline-block;
  margin: 0 0 .125rem 0;
  padding: .5rem .85rem;
  line-height: 1.25rem;
  border-radius: 1.25rem;
  vertical-align: middle;
  transition: border-radius .25s ease-out .075s;
  clear: both;
}
.bubble.left {
  float: left;
  background: var(--bg1);
  transform-origin: 0 100%;
}
.bubble.left.cornered  { border-bottom-left-radius: 4px; }
.bubble.right {
  float: right;
  background: var(--a0);
  color: #FFF;
  transform-origin: 100% 100%;
}
.bubble.right.cornered { border-bottom-right-radius: 4px; }

.bubble span { display: inline; }
.bubble span.message { opacity: 0; line-height: 1.125; }
.bubble a { color: var(--a0); }
.bubble .chat-link { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0,122,255,0.35); text-underline-offset: 2px; }
.bubble.right a { color: rgba(255,255,255,0.88); }
.bubble .loading {
  position: absolute;
  white-space: pre;
  font-size: 1.625rem;
  line-height: 1rem;
}
.bubble .loading b { display: inline-block; color: var(--fg1); }
.bubble.right .loading b { color: rgba(255,255,255,0.6); }

/* Extra space around reply (right) bubbles */
.msg-spacer {
  clear: both;
  width: 100%;
  height: 0.5rem;
  display: block;
}

/* Status chat bubble reveal */
@keyframes msg-in {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

/* Quick replies */
@keyframes qr-pill-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.78); }
  55%  { transform: translateY(-3px) scale(1.05); }
  75%  { transform: translateY(1px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qr-pill-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.78) translateY(4px); }
}
@keyframes qr-wrap-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quick-replies {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .8rem 0 .3rem .1rem;
  animation: qr-wrap-in 0.24s ease both;
  overflow: hidden; /* needed for height-collapse on dismiss */
}
.quick-reply {
  background: transparent;
  border: 1.5px solid var(--a0);
  color: var(--a0);
  border-radius: 1.25rem;
  padding: .4rem .95rem;
  font-size: .8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  /* Enter animation — delay set per-pill via JS */
  animation: qr-pill-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* Hover/press transitions */
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.quick-reply:hover {
  background: var(--a0);
  color: #fff;
  border-color: var(--a0);
  box-shadow: 0 2px 8px rgba(0,122,255,0.28);
  transform: translateY(-1px);
}
.quick-reply:active { opacity: .7; transform: scale(0.95); }
/* Exit state — added via JS on dismiss */
.quick-replies.dismissing .quick-reply {
  animation: qr-pill-out 0.14s ease both;
  pointer-events: none;
}
/* Height-collapse transition applied inline via JS after pills fade */
.quick-replies.collapsing {
  transition: height 0.22s ease, padding 0.22s ease, margin 0.22s ease, opacity 0.14s ease;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 0 !important;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════ */
/* VIEW 2 — Contact profile                                    */
/* ═══════════════════════════════════════════════════════════ */
.profile-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg2);
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
.profile-avatar-big {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(140deg, #34AADC 0%, #007AFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.profile-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg0);
  line-height: 1.2;
}
.profile-sub {
  font-size: 14px;
  color: var(--fg2);
  line-height: 1;
}

/* Action buttons */
.profile-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.action-btn {
  flex: 1;
  max-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--bg3);
  border: none;
  border-radius: 12px;
  padding: 10px 8px 9px;
  color: var(--a0);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
  text-align: center;
}
.action-btn:active { opacity: 0.6; }
.action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
}

/* Info cards (iOS grouped table style) */
.info-card {
  background: var(--bg3);
  border-radius: 12px;
  overflow: hidden;
}
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.info-row:active { background: rgba(0,0,0,0.04); }
@media (prefers-color-scheme: dark) {
  .info-row:active { background: rgba(255,255,255,0.05); }
}
.info-row.no-link { cursor: default; }
.info-row.no-link:active { background: none; }
.info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.info-label {
  font-size: 12px;
  color: var(--fg2);
  text-transform: lowercase;
  line-height: 1;
}
.info-value {
  font-size: 15px;
  color: var(--fg0);
  line-height: 1.35;
  word-break: break-word;
}
.info-value.blue { color: var(--a0); }
.info-chevron { flex-shrink: 0; }
.info-sep {
  height: 0.5px;
  background: var(--sep);
  margin-left: 14px;
}

/* ─── Avatar image overlay system ───────────────────────── */
/* Photo covers the initials when loaded */
.conv-avatar > img,
.im-avatar > img,
.profile-avatar-big > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: 0; /* parent clips to circle */
}
.conv-avatar.has-photo > img,
.im-avatar.has-photo > img,
.profile-avatar-big.has-photo > img { opacity: 1; }
.conv-avatar.has-photo > span,
.im-avatar.has-photo > span,
.profile-avatar-big.has-photo > span { opacity: 0; }

/* Emoji avatar (flag icons) */
.av-emoji {
  font-size: 22px;
  line-height: 1;
  user-select: none;
}

/* ─── Trailing area (badge + chevron) ───────────────────── */
.conv-trailing {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* ─── Unread badge ───────────────────────────────────────── */
.unread-badge {
  background: var(--a0);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  line-height: 1;
  flex-shrink: 0;
  transform-origin: center;
  transition: opacity 0.2s, transform 0.2s;
}

/* Unread row: same weight as read, just blue timestamp */
.conv-item.unread .conv-time { color: var(--a0); font-weight: 600; }

/* ─── Group avatar 2×2 grid ──────────────────────────────── */
.group-avatar {
  font-size: 0; /* collapse gaps */
}
.g-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.g-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.g-cell > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s;
}
.g-cell.has-photo > img  { opacity: 1; }
.g-cell.has-photo > span { opacity: 0; }

/* ─── Forced theme overrides (override @media prefers-color-scheme) ── */
:root[data-theme="light"] {
  --bg0: #FFFFFF;
  --bg1: rgba(206,206,206,.5);
  --bg2: #F2F2F7;
  --bg3: #FFFFFF;
  --fg0: #000000;
  --fg1: rgba(0,0,0,.45);
  --fg2: #8E8E93;
  --sep: rgba(0,0,0,0.12);
  --a0: #007AFF;
  --header-bg: #F2F2F7;
  --header-sep: rgba(0,0,0,0.13);
}
:root[data-theme="dark"] {
  --bg0: #000000;
  --bg1: rgba(255,255,255,.13);
  --bg2: #1C1C1E;
  --bg3: #2C2C2E;
  --fg0: #FFFFFF;
  --fg1: rgba(255,255,255,.45);
  --fg2: #8E8E93;
  --sep: rgba(255,255,255,0.1);
  --a0: #0A84FF;
  --header-bg: #1C1C1E;
  --header-sep: rgba(255,255,255,0.1);
}

/* ─── List header: single-row big title left, gear right ── */
.list-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: calc(var(--header-h) + env(safe-area-inset-top)) !important;
  padding-left: 16px !important;
  padding-right: 0 !important;
}
.lh-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--fg0);
  line-height: 1;
  flex: 1;
}
/* Right-side action cluster (gear + separator + flag) */
.lh-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.lh-sep {
  width: 1px;
  height: 22px;
  background: var(--sep);
  opacity: 0.7;
  margin: 0 2px;
  flex-shrink: 0;
}
.lh-flag-btn {
  background: none;
  border: none;
  padding: 10px 14px 10px 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lh-flag-btn:active { opacity: 0.5; }

/* ── little window name-group: name + separator + NEW pill ── */
.conv-name-group {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}
.conv-name-group .conv-name {
  /* inherits all .conv-name styles, just constrain overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
/* Vertical separator between name and badge */
.lw-badge-sep {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--fg2);
  opacity: 0.4;
  margin: 0 6px;
  flex-shrink: 0;
  align-self: center;
}
/* NEW RELEASE badge — caramel/gold pill with 0.5-alpha background */
.new-release-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(160, 100, 0, 0.95);
  background: rgba(210, 155, 30, 0.5);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .new-release-badge {
    color: rgba(255, 215, 100, 0.95);
    background: rgba(180, 130, 20, 0.45);
  }
}


/* Theme transition — smooth color crossfade */
.theme-transition * {
  transition:
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Theme flash overlay */
#theme-flash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  border-radius: 0;
}
#theme-flash.active {
  opacity: 1;
}

/* ─── Full-page settings view ────────────────────────────── */
.settings-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg2);
  padding: 16px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-section {
  margin-bottom: 24px;
}
.settings-group-header {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--fg2);
  padding: 0 16px 6px;
  text-transform: uppercase;
}
.settings-group {
  background: var(--bg3);
  border-radius: 12px;
  overflow: hidden;
}
.settings-sep {
  height: 0.5px;
  background: var(--sep);
  margin-left: 60px;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: none;
  padding: 11px 14px 11px 12px;
  font-size: 17px;
  font-family: inherit;
  color: var(--fg0);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.settings-item:active { background: var(--bg1); }
.settings-item.no-tap { cursor: default; }
.settings-item.no-tap:active { background: none; }
/* Language flag icon wraps — neutral gray instead of per-language colours */
.lang-item .settings-icon-wrap { background: var(--bg3) !important; }
.settings-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  overflow: hidden;
}
.settings-item-label { flex: 1; }
.settings-item-value {
  font-size: 15px;
  color: var(--fg2);
}
.settings-item-check {
  color: var(--a0);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.settings-item-chevron { flex-shrink: 0; }
.settings-item.active .settings-item-check { opacity: 1; }
.settings-item.active .settings-item-label { color: var(--a0); font-weight: 600; }

/* ─── Group chat bubble layout ───────────────────────────── */
.gc-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  clear: both;
  margin-bottom: 3px;
}
.gc-avatar-sm {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}
.gc-avatar-sm.gc-spacer { visibility: hidden; }
.gc-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 78%;
}
.gc-sender-name {
  font-size: 11px;
  font-weight: 600;
  padding: 0 4px;
  line-height: 1;
}

/* ─── Show-more expand buttons (team + apps) ─────────────────── */
.show-more-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 16px 9px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  text-align: left;
}
.show-more-btn:active { opacity: 0.5; }

/* Stacked mini-avatars */
.show-more-avatars {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
}
.show-more-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg0);
  margin-right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.show-more-av > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s;
}
.show-more-av.has-photo > img  { opacity: 1; }
.show-more-av.has-photo > span { opacity: 0; }
.show-more-av.app-icon { border-radius: 8px; }
.show-more-av.app-icon > img { border-radius: 6px; }

/* Label text */
.show-more-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--a0);
  padding-left: 8px; /* compensate for the avatar overlap offset */
}

/* Chevron */
.show-more-chevron {
  color: var(--t2, #C7C7CC);
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.show-more-btn.expanded .show-more-chevron {
  transform: rotate(180deg);
}

/* Items inside collapsed containers must not inherit the skeleton opacity:0 rule.
   ID-based selectors have higher specificity (1-1-0) than .conv-list .conv-item (0-2-0)
   so no !important needed — JS inline styles can still override for animations. */
#team-extra .conv-item,
#apps-extra .conv-item {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Conversation section labels ────────────────────────────── */
.conv-section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--fg2);
  text-transform: uppercase;
  padding: 18px 16px 6px;
  background: var(--bg0);
  user-select: none;
}

/* ─── PDF Bubble ─────────────────────────────────────────── */
.pdf-bubble {
  padding: 0 !important;
  overflow: hidden;
  background: var(--bg3) !important;
  border: 1px solid var(--sep);
  min-width: 220px;
  max-width: 260px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdf-bubble.left { border-bottom-left-radius: 6px !important; }
.pdf-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 12px;
  transition: background 0.14s ease;
}
.pdf-bubble:active .pdf-card,
.pdf-card:active {
  background: rgba(0,0,0,0.06);
}
:root[data-theme="dark"] .pdf-bubble:active .pdf-card,
:root[data-theme="dark"] .pdf-card:active {
  background: rgba(255,255,255,0.08);
}
@media (prefers-color-scheme: dark) {
  .pdf-bubble:active .pdf-card { background: rgba(255,255,255,0.08); }
}
.pdf-icon svg { display: block; flex-shrink: 0; }
.pdf-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pdf-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.pdf-meta {
  font-size: 11px;
  color: var(--fg2);
  line-height: 1.2;
}
.pdf-chevron { flex-shrink: 0; opacity: 0.5; }

/* ─── PDF Viewer Overlay ─────────────────────────────────── */
.pdf-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.pdf-viewer-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.pdf-viewer-sheet {
  width: 100%;
  height: 94dvh;
  background: var(--bg2);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.pdf-viewer-overlay.open .pdf-viewer-sheet {
  transform: translateY(0);
}
.pdf-viewer-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 0.5px solid var(--header-sep);
  padding: 0 16px;
}
.pdf-viewer-drag-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--sep);
}
.pdf-viewer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg0);
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 56px;
}
.pdf-viewer-done {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--a0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdf-viewer-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #525659;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pdf-viewer-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ─── App icon avatars (perfect square, no radius, no bg) ── */
.conv-avatar.app-icon,
.im-avatar.app-icon,
.profile-avatar-big.app-icon {
  border-radius: 0 !important;
  background: transparent !important;
}

/* ─── Image Lightbox ─────────────────────────────────────── */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  cursor: zoom-out;
}
.img-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
/* Circle container — scales in, clips image to circle */
.img-lightbox-circle {
  position: relative;
  width: min(74vw, 74dvh);
  height: min(74vw, 74dvh);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transform: scale(0.82);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 12px 60px rgba(0,0,0,0.7);
  cursor: default;
}
.img-lightbox.open .img-lightbox-circle {
  transform: scale(1);
}
#img-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* X close button — sits on the top-right edge of the circle */
.img-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.52);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.img-lightbox-close:active {
  background: rgba(0,0,0,0.75);
}

/* ─── Skeleton loading + stagger reveal ─────────────────── */
@keyframes skel-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* All conv rows start hidden for stagger entrance — NO transition here
   (transition on base state causes a flash: browser starts at opacity:1
   then animates down to 0 before skeleton kicks in) */
.conv-list .conv-item,
.conv-list .conv-section-label {
  opacity: 0;
  transform: translateY(10px);
}

/* Skeleton state: item is visible with placeholder shimmer */
.conv-list .conv-item.skel {
  opacity: 1;
  transform: translateY(0);
  transition: none;
  pointer-events: none;
}
.conv-list .conv-section-label.skel {
  opacity: 1;
  transform: translateY(0);
  transition: none;
  color: transparent;
}

/* Skeleton avatar — replace bg, hide real content */
.conv-list .conv-item.skel .conv-avatar {
  background: linear-gradient(90deg, var(--skel) 25%, var(--skel-shine) 50%, var(--skel) 75%) !important;
  background-size: 400% 100% !important;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 50%;
}
.conv-list .conv-item.skel .conv-avatar.app-icon {
  border-radius: 0 !important;
}
.conv-list .conv-item.skel .conv-avatar img,
.conv-list .conv-item.skel .conv-avatar span,
.conv-list .conv-item.skel .g-grid { opacity: 0; }

/* Skeleton text lines — font-size:0 is needed in addition to color:transparent
   because OS emoji glyphs are rendered as images and ignore color:transparent */
.conv-list .conv-item.skel .conv-name,
.conv-list .conv-item.skel .conv-preview,
.conv-list .conv-item.skel .conv-time   { color: transparent; font-size: 0; }
.conv-list .conv-item.skel .unread-badge,
.conv-list .conv-item.skel .conv-chevron { opacity: 0; }
.conv-list .conv-item.skel .new-release-badge,
.conv-list .conv-item.skel .lw-badge-sep { display: none; }

.conv-list .conv-item.skel .conv-name::after {
  content: '';
  display: block;
  width: 100px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--skel) 25%, var(--skel-shine) 50%, var(--skel) 75%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  margin-top: 2px;
}
.conv-list .conv-item.skel .conv-preview::after {
  content: '';
  display: block;
  width: 170px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--skel) 25%, var(--skel-shine) 50%, var(--skel) 75%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  animation-delay: 0.12s;
  margin-top: 2px;
}

/* ── List entrance animation ─────────────────────────────────────── */
@keyframes conv-slide-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.99); }
  60%  { opacity: 1; transform: translateY(-1px) scale(1.001); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.conv-list .conv-item.visible,
.conv-list .conv-section-label.visible {
  animation: conv-slide-in 0.36s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}


/* ════════════════════════════════════════════════════════════════════
   NEW FEATURES v3.2
   ════════════════════════════════════════════════════════════════════ */

/* ── Pinned conversation ─────────────────────────────────────────── */
.conv-item.pinned {
  background: linear-gradient(90deg, rgba(0,122,255,0.06) 0%, var(--bg0) 70%) !important;
  position: relative;
}
.conv-item.pinned::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(140deg, #34AADC, #007AFF);
  border-radius: 0 2px 2px 0;
}
.pin-icon {
  width: 12px; height: 12px;
  color: var(--a0);
  flex-shrink: 0;
  margin-right: 3px;
}

/* ── Sound toggle ────────────────────────────────────────────────── */
.settings-toggle {
  width: 51px; height: 31px;
  border-radius: 15.5px;
  background: #E5E5EA;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .settings-toggle { background: #3A3A3C; }
.settings-toggle.on { background: #34C759; }
.settings-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.05);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-toggle.on .settings-toggle-thumb { transform: translateX(20px); }

/* ─── Server Status block ────────────────────────────────── */
.srv-status-block {
  margin: 4px 12px 22px;
  background: var(--bg1);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sep);
}

/* ── Summary row (always visible) */
.srv-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  color: var(--fg0);
}
.srv-summary:active { opacity: 0.7; }

.srv-summary-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg0);
}

/* Summary inline tags */
.srv-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 20px;
  padding: 2px 7px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.srv-tag.degraded { background: rgba(255,159,10,0.14); color: #B07800; }
.srv-tag.outage   { background: rgba(255,59,48,0.13);  color: #C0281E; }
[data-theme="dark"] .srv-tag.degraded { background: rgba(255,159,10,0.2); color: #FF9F0A; }
[data-theme="dark"] .srv-tag.outage   { background: rgba(255,59,48,0.2);  color: #FF453A; }

/* Chevron arrow that rotates on expand */
.srv-chevron-icon {
  color: var(--fg3, var(--fg2));
  flex-shrink: 0;
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
}
.srv-summary[aria-expanded="true"] .srv-chevron-icon { transform: rotate(180deg); }

/* ── Expandable detail */
.srv-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(0.4,0,0.2,1);
}
.srv-detail.open { max-height: 480px; }

.srv-detail-inner { border-top: 1px solid var(--sep); }

/* ── Service rows */
.srv-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--sep);
}
.srv-row:last-of-type { border-bottom: none; }

/* Status dot */
.srv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.srv-dot.green  { background: #30D158; }
.srv-dot.yellow { background: #FF9F0A; }
.srv-dot.red    { background: #FF3B30; }

/* Pulse ring */
.srv-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: srv-pulse 2.6s ease-in-out infinite;
}
.srv-dot.green::after  { border: 1.5px solid #30D158; animation-delay: 0s; }
.srv-dot.yellow::after { border: 1.5px solid #FF9F0A; animation-delay: 0.5s; }
.srv-dot.red::after    { border: 1.5px solid #FF3B30; animation-delay: 1s; }

@keyframes srv-pulse {
  0%   { opacity: 0.8; transform: scale(1);   }
  55%  { opacity: 0;   transform: scale(2.4); }
  100% { opacity: 0;   transform: scale(2.4); }
}

.srv-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srv-badge {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.srv-badge.operational { background: rgba(48,209,88,0.12); color: #1C8A3A; }
.srv-badge.degraded    { background: rgba(255,159,10,0.14); color: #B07800; }
.srv-badge.outage      { background: rgba(255,59,48,0.13);  color: #C0281E; }
[data-theme="dark"] .srv-badge.operational { background: rgba(48,209,88,0.17); color: #30D158; }
[data-theme="dark"] .srv-badge.degraded    { background: rgba(255,159,10,0.2);  color: #FF9F0A; }
[data-theme="dark"] .srv-badge.outage      { background: rgba(255,59,48,0.2);   color: #FF453A; }

.srv-uptime {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg2);
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Footer */
.srv-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-top: 1px solid var(--sep);
  font-size: 11px;
  color: var(--fg2);
  background: var(--bg0);
}
.srv-footer-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.srv-footer-dot.green { background: #30D158; }
.srv-footer-updated {
  margin-left: auto;
  font-size: 10.5px;
  opacity: 0.55;
}

/* ─── Server status logs ──────────────────────────────────── */
.srv-logs {
  padding: 8px 0 2px;
  border-top: 1px solid var(--sep);
  font-size: 10.5px;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  color: var(--fg2);
  line-height: 1.75;
}
.srv-log-line {
  display: flex;
  gap: 7px;
  padding: 0 13px;
}
.srv-log-line:hover { background: var(--bg0); }
.srv-log-time {
  flex-shrink: 0;
  opacity: 0.6;
  font-size: 10px;
  letter-spacing: 0.2px;
  min-width: 38px;
}
.srv-log-lvl {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  min-width: 30px;
}
.srv-log-lvl.info  { color: #34C759; }
.srv-log-lvl.warn  { color: #FF9500; }
.srv-log-lvl.err   { color: #FF3B30; }
[data-theme="dark"] .srv-log-lvl.info  { color: #30D158; }
[data-theme="dark"] .srv-log-lvl.warn  { color: #FF9F0A; }
[data-theme="dark"] .srv-log-lvl.err   { color: #FF453A; }
.srv-log-msg {
  flex: 1;
  color: var(--fg2);
}

/* ─── Game selection choice buttons ─────────────────────── */
.game-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 4px;
  clear: both;
  animation: msg-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
.game-choice-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--bg1);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 13px 20px;
  cursor: pointer;
  text-align: left;
  width: fit-content;
  max-width: 240px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), opacity 0.12s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.game-choice-btn:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); transform: translateY(-1px); }
.game-choice-btn:active { transform: scale(0.95); opacity: 0.8; box-shadow: none; }
.gc-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.gc-info { display: flex; flex-direction: column; gap: 2px; }
.gc-name { font-size: 15px; font-weight: 600; color: var(--fg0); }
.gc-sub  { font-size: 12px; opacity: 0.5; color: var(--fg0); }

/* ─── In-chat Bubble Break game embed ────────────────────── */
.game-embed {
  display: none;
  position: absolute;
  inset: 0;
  top: calc(var(--header-h) + env(safe-area-inset-top)); /* full header height */
  flex-direction: column;
  align-items: stretch;
  background: var(--bg2);
  z-index: 5;
}
.game-embed.active {
  display: flex;
}
.ge-hud {
  position: absolute;
  top: 12px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  pointer-events: none;
  z-index: 10;
}
.ge-score, .ge-lives {
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 4px 12px;
  color: var(--fg0);
}
[data-theme="dark"] .ge-score,
[data-theme="dark"] .ge-lives {
  background: rgba(255,255,255,0.1);
}
#ge-canvas {
  display: block;
  width: 100%;
  flex: 1;
  touch-action: none;
  cursor: none;
  background: var(--bg3);
}
.ge-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 20;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity .3s ease, backdrop-filter .3s ease, background .3s ease;
  pointer-events: none;
}
.ge-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(0,0,0,0.32);
}
.ge-ov-emoji { font-size: 52px; line-height: 1; }
.ge-ov-title {
  font-size: 22px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.ge-ov-sub {
  font-size: 14px; color: rgba(255,255,255,.8);
  text-align: center; padding: 0 20px; line-height: 1.45;
}
.ge-ov-score { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.ge-ov-btn {
  margin-top: 4px; padding: 12px 32px;
  border-radius: 22px; font-size: 16px; font-weight: 600;
  background: #007AFF; color: #fff;
  border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, opacity .12s;
}
.ge-ov-btn:active { transform: scale(.95); opacity: .85; }

/* ─── Inline status dot (used inside message bubbles) ─────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
  flex-shrink: 0;
}
.status-dot.green  { background: #30D158; animation: dot-blink 2s ease-in-out infinite; }
.status-dot.yellow { background: #FF9F0A; animation: dot-blink 2s ease-in-out infinite 0.5s; }
.status-dot.red    { background: #FF453A; }
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ─── Tiny status dot in conv-item preview ─────────────────── */
.conv-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}
.conv-status-dot.yellow { background: #FF9F0A; }
.conv-status-dot.green  { background: #30D158; }

/* ─── Job title in team conv-item preview ───────────────────── */
.conv-preview.conv-title {
  font-style: normal;
  opacity: 0.55;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════ */
/* DESKTOP — iPhone 17 Pro Max mockup frame                    */
/* ═══════════════════════════════════════════════════════════ */

/* Mobile default: mockup wrapper is invisible / pass-through */
#phone-mockup {
  display: contents;   /* no layout impact on mobile */
}
/* Status bar & physical buttons hidden on mobile */
.phone-status-bar { display: none; }
.phone-btn-power, .phone-btn-silent, .phone-btn-vol-up, .phone-btn-vol-down { display: none; }

@media (min-width: 768px) {
  /* ── Page background ─────────────────────────────────────── */
  body, html {
    background: #000;
    height: 100%;
    overflow: hidden;
  }

  /* ── Mockup container — centred phone ────────────────────── */
  #phone-mockup {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(30,58,95,0.35) 0%, transparent 60%),
      radial-gradient(ellipse at 70% 80%, rgba(120,50,180,0.18) 0%, transparent 55%),
      #0a0a0a;
  }

  /* ── Phone body ──────────────────────────────────────────── */
  #phone-mockup::before,
  #phone-mockup::after {
    pointer-events: none;
  }

  #app {
    position: relative !important;
    inset: auto !important;
    width: 430px;
    height: 932px;
    max-height: 90vh;
    aspect-ratio: 430 / 932;
    border-radius: 55px;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* smooth clip on WebKit */
    overflow: hidden;
    border: none;
    flex-shrink: 0;
    background: #000;
  }

  /* ── Phone frame (titanium bezel) ────────────────────────── */
  #phone-mockup {
    /* also acts as the bezel wrapper */
    --bezel: 10px;
    --frame-color: #2a2a2c;
    --frame-edge: #3a3a3c;
  }
  #phone-mockup > #app {
    outline: var(--bezel) solid var(--frame-color);
    outline-offset: -1px;
    box-shadow:
      0 0 0 calc(var(--bezel) + 1px) var(--frame-color),
      0 0 0 calc(var(--bezel) + 2px) var(--frame-edge),    /* titanium edge highlight */
      0 0 0 calc(var(--bezel) + 3px) rgba(0,0,0,0.5),      /* outer shadow ring */
      0 40px 100px rgba(0,0,0,0.55),                        /* drop shadow */
      0 0 120px rgba(30,58,95,0.10);                        /* ambient glow */
  }

  /* ── Side buttons (volume + power) ───────────────────────── */
  #phone-mockup .phone-btn-power,
  #phone-mockup .phone-btn-vol-up,
  #phone-mockup .phone-btn-vol-down,
  #phone-mockup .phone-btn-silent {
    display: block;
    position: absolute;
    background: var(--frame-edge);
    border-radius: 2px;
    z-index: 10001;
    pointer-events: none;
  }
  /* Power button — right side */
  #phone-mockup .phone-btn-power {
    width: 4px; height: 80px;
    right: calc(50% - 430px / 2 - var(--bezel) - 4px);
    top: 50%;
    margin-top: calc(-1 * min(932px, 90vh) / 2 + 180px);
    border-radius: 2px 0 0 2px;
  }
  /* Silent switch — left side, top */
  #phone-mockup .phone-btn-silent {
    width: 4px; height: 28px;
    left: calc(50% - 430px / 2 - var(--bezel) - 4px);
    top: 50%;
    margin-top: calc(-1 * min(932px, 90vh) / 2 + 130px);
    border-radius: 0 2px 2px 0;
  }
  /* Volume Up — left side */
  #phone-mockup .phone-btn-vol-up {
    width: 4px; height: 52px;
    left: calc(50% - 430px / 2 - var(--bezel) - 4px);
    top: 50%;
    margin-top: calc(-1 * min(932px, 90vh) / 2 + 180px);
    border-radius: 0 2px 2px 0;
  }
  /* Volume Down — left side */
  #phone-mockup .phone-btn-vol-down {
    width: 4px; height: 52px;
    left: calc(50% - 430px / 2 - var(--bezel) - 4px);
    top: 50%;
    margin-top: calc(-1 * min(932px, 90vh) / 2 + 245px);
    border-radius: 0 2px 2px 0;
  }

  /* ── Dynamic Island ──────────────────────────────────────── */
  #phone-mockup::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Phone top = centre − half height + bezel + 12px inset from screen edge */
    margin-top: calc(-1 * min(932px, 90vh) / 2 + 12px + var(--bezel));
    width: 126px;
    height: 37px;
    background: #000;
    border-radius: 20px;
    z-index: 10000;
  }

  /* ── Home Indicator ──────────────────────────────────────── */
  #phone-mockup::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    margin-bottom: calc(-1 * min(932px, 90vh) / 2 + 8px + var(--bezel));
    width: 134px;
    height: 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    z-index: 10000;
  }

  /* ── Status bar ────────────────────────────────────────────
     Dynamic Island: top 12px, height 37px → vertical center at 30.5px.
     Time (left) and icons (right) must sit on that same centre line,
     each at equal horizontal distance from the Dynamic Island edges.
     Island is 126px wide, centred → edges at (430-126)/2 = 152px from sides.
     We use padding ~28px from phone edge so both groups are visually balanced. */
  .phone-status-bar {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* height covers the DI area: 12px top + 37px island + ~5px bottom = 54px */
    height: 54px;
    z-index: 9999;
    padding: 0 28px;
    align-items: center;      /* vertically centre contents */
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg0);
    pointer-events: none;
    user-select: none;
    background: var(--bg2);
    /* Shift content down so vertical centre aligns with DI centre (30.5px) */
    padding-top: 7px;         /* nudge: (30.5 - 54/2) ≈ 3.5 → small top push */
  }
  .sb-left {
    display: flex;
    align-items: center;
    gap: 2px;
    /* width = distance from phone edge to DI left edge, minus padding */
    width: 110px;
    justify-content: flex-start;
  }
  .sb-center {
    display: none;  /* DI occupies centre */
  }
  .sb-right {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 110px;
    justify-content: flex-end;
  }
  .sb-right svg { flex-shrink: 0; }
  .sb-time {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
  }
  .sb-battery-body {
    width: 25px;
    height: 12px;
    border: 1.5px solid var(--fg0);
    border-radius: 3px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 1.5px;
  }
  .sb-battery-body::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 5px;
    background: var(--fg0);
    border-radius: 0 1px 1px 0;
    opacity: 0.5;
  }
  .sb-battery-fill {
    width: 80%;
    height: 100%;
    background: var(--fg0);
    border-radius: 1px;
  }

  /* ── Views pushed below the status bar ──────────────────── */
  .view {
    border-radius: 0;
    top: 54px;
  }

  /* ── Mouse-drag scrolling inside the phone ─────────────────── */
  .msgs-scroll,
  .conv-list,
  .settings-scroll,
  .profile-scroll {
    cursor: grab;
  }
  .msgs-scroll:active,
  .conv-list:active,
  .settings-scroll:active,
  .profile-scroll:active {
    cursor: grabbing;
  }

  /* ── Keep mobile font-size inside the phone ──────────────── */
  :root {
    font-size: 1.125rem !important;
  }
}