/* WhatsApp's colours (the app owner's choice, 2026-10-24), measured on WhatsApp for iPhone in the owner's screenshots:
   pages of cards are grey #f4f4f4 with white cards, the lists (chats, calls, live, market: body.list-page) are white,
   text is black and grey text 60% black. A chat gets WhatsApp's plain chat colour (no pattern: TN TN's own patterns
   come later). Dark mode uses WhatsApp's own dark tokens. The blue stays TN TN's. */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;
  --bg: #f4f4f4;
  --surface: #fff;
  --text: #000;
  --muted: #666;
  --border: #e7e7e7;
  --outline: rgba(0, 0, 0, 0.2);
  --list-bg: #fff;
  --chat-default: #f5f1eb;
  --danger: #dc2626;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  --radius: 20px;
  color-scheme: light;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}
body.list-page,
body.chat-open {
  background: var(--list-bg);
}
.app-shell {
  max-width: 1200px;
  margin: auto;
  min-height: 100dvh;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.topbar {
  height: 72px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}
button,
input,
select,
textarea {
  font: inherit;
}
.brand,
.icon-button,
.avatar-button,
.nav-item {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand span,
.avatar-button {
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}
.brand span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.brand strong {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.top-actions {
  display: flex;
  gap: 10px;
}
.icon-button,
.avatar-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.icon-button {
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 1.25rem;
}
.avatar-button {
  font-size: 0.78rem;
}
.page {
  padding: 24px 5%;
}
.market-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 20px;
}
.eyebrow {
  color: var(--primary);
  font-weight: 700;
  margin: 0 0 5px;
}
.page h1 {
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  margin: 0;
}
.page-subtitle,
.muted {
  color: var(--muted);
}
.location-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 11px 15px;
  color: var(--text);
  cursor: pointer;
}
.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 15px;
}
.search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  padding: 15px 0;
  color: inherit;
}
.filter-button,
.primary-button,
.secondary-button {
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 700;
}
.filter-button,
.primary-button {
  background: var(--primary);
  color: #fff;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .primary-button:hover {
    background: var(--primary-dark);
  }
}
.secondary-button {
  background: var(--primary-soft);
  color: var(--primary);
}
.chips {
  display: flex;
  gap: 9px;
  overflow: auto;
  padding: 17px 0;
  scrollbar-width: none;
}
.chip {
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0 14px;
}
.section-title h2 {
  margin: 0;
  font-size: 1.15rem;
}
.section-title span {
  font-size: 0.9rem;
  color: var(--muted);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 2px 9px rgba(23, 32, 51, 0.03);
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
}
.product-visual {
  aspect-ratio: 1.25;
  display: grid;
  place-items: center;
  font-size: 4rem;
  position: relative;
  background: linear-gradient(145deg, #dbeafe, #eef5ff);
}
.favorite {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 1.1rem;
}
.product-body {
  padding: 14px;
}
.price {
  font-weight: 850;
  font-size: 1.13rem;
}
.product-title {
  margin: 6px 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.82rem;
}
.seller-code {
  color: var(--primary);
  font-weight: 700;
}
.empty {
  padding: 50px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.list {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
.chat-row,
.listing-row,
.setting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 18px;
  cursor: pointer;
}
.chat-avatar {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: 800;
}
.chat-copy {
  flex: 1;
  min-width: 0;
}
.chat-copy strong,
.chat-copy span {
  display: block;
}
.chat-copy span {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.time {
  font-size: 0.78rem;
  color: var(--muted);
}
.chat-view {
  max-width: 760px;
  margin: auto;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.back {
  border: 0;
  background: var(--surface);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
}
.messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 50vh;
}
.bubble {
  padding: 11px 14px;
  border-radius: 17px;
  max-width: 78%;
  line-height: 1.55;
}
.bubble.them {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-right-radius: 5px;
}
.bubble.me {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-left-radius: 5px;
}
.composer {
  position: sticky;
  bottom: 87px;
  display: flex;
  gap: 9px;
  background: var(--bg);
  padding: 12px 0;
}
.composer input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 13px 18px;
  color: inherit;
}
.profile-card {
  background: linear-gradient(135deg, var(--primary), #1e40af);
  color: #fff;
  border-radius: 26px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 18px 0;
}
.profile-avatar {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: #fff;
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.privacy-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
}
.setting-row {
  justify-content: space-between;
}
.setting-row div span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 3px;
}
.switch {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary);
  position: relative;
}
.switch:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}
/* Floating rounded bar. Solid background (no blur): blur over a scrolling page is slow on weaker phones. */
.bottom-nav {
  position: fixed;
  z-index: 20;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 24px, 560px);
  height: 68px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 6px;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.14);
}
body.dark .bottom-nav {
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* The open tab gets a soft pill behind its icon and name (behind the content: the bar's transform makes it the layer). */
.nav-item.active:not(.market-button)::before {
  content: "";
  position: absolute;
  inset: 8px 2px;
  z-index: -1;
  border-radius: 16px;
  background: var(--primary-soft);
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
}
.nav-item span {
  font-size: 1.35rem;
}
.nav-item.active {
  color: var(--primary);
}
.nav-item small {
  font-size: 0.74rem;
}
.nav-item .badge {
  position: absolute;
  top: 9px;
  margin-right: 28px;
  background: var(--danger);
  color: #fff;
  font-size: 0.67rem;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.sell-button span {
  width: 46px;
  height: 46px;
  border-radius: 17px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: -25px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
}
dialog {
  color: inherit;
}
.sheet {
  border: 0;
  padding: 0;
  border-radius: 25px;
  max-width: 560px;
  width: calc(100% - 28px);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sheet::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}
.sheet-content {
  padding: 22px;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close {
  border: 0;
  background: var(--bg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
}
.detail-visual {
  height: 220px;
  border-radius: 20px;
  background: linear-gradient(145deg, #dbeafe, #eef5ff);
  display: grid;
  place-items: center;
  font-size: 6rem;
  margin: 17px 0;
}
.detail-info {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.seller-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  padding: 13px;
  border-radius: 16px;
  margin: 17px 0;
}
.seller-box .chat-avatar {
  background: var(--surface);
}
.full {
  width: 100%;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.field {
  display: grid;
  gap: 7px;
}
.field.full-field {
  grid-column: 1/-1;
}
.field label {
  font-weight: 650;
  font-size: 0.9rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px;
  background: var(--bg);
  color: inherit;
  outline-color: var(--primary);
}
.field textarea {
  min-height: 90px;
  resize: vertical;
}
.upload-zone {
  border: 2px dashed var(--border);
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}
.toast {
  position: fixed;
  z-index: 50;
  bottom: 95px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--text);
  color: var(--surface);
  padding: 12px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
body.dark {
  --bg: #161717;
  --surface: #1d1f1f;
  --text: #fafafa;
  --muted: #a5a5a5;
  --border: #343535;
  --outline: rgba(255, 255, 255, 0.1);
  --list-bg: #161717;
  --primary-soft: #1e2b44;
  --chat-default: #161717;
  color-scheme: dark;
}
body.dark .product-visual,
body.dark .detail-visual {
  background: linear-gradient(145deg, #242626, #1d1f1f);
}
@keyframes fade {
  from {
    opacity: 0.35;
    transform: translateY(5px);
  }
}
@media (max-width: 850px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-head {
    align-items: start;
    flex-direction: column;
  }
  .location-pill {
    align-self: stretch;
    text-align: right;
  }
}
@media (max-width: 520px) {
  .topbar {
    height: 62px;
  }
  .brand strong {
    display: none;
  }
  .page {
    padding: 18px 14px;
  }
  .product-grid {
    gap: 10px;
  }
  .product-body {
    padding: 11px;
  }
  .product-visual {
    font-size: 3rem;
  }
  .meta span:first-child {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-row {
    grid-template-columns: 1fr auto;
  }
  .filter-button {
    padding: 13px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full-field {
    grid-column: auto;
  }
  .sheet {
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    max-width: none;
    border-radius: 25px 25px 0 0;
  }
  .detail-visual {
    height: 190px;
  }
}

/* Marketplace identity and WhatsApp-inspired navigation */
/* The market stays a raised round button; its ring takes the page colour so it looks cut out of the bar. */
.market-button span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: -30px;
  border: 4px solid var(--bg);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}
body.list-page .market-button span {
  border-color: var(--list-bg);
}
.market-button.active span {
  color: #fff;
}
.market-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 17px;
}
.market-actions button {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: inherit;
  padding: 17px;
  display: flex;
  align-items: center;
  text-align: right;
  gap: 13px;
  cursor: pointer;
}
.market-actions button > span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.5rem;
}
.market-actions strong,
.market-actions small {
  display: block;
}
.market-actions small {
  color: var(--muted);
  margin-top: 4px;
}
.sell-action {
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.08);
}
.seller-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}
.rating {
  color: #d97706;
  font-weight: 800;
}
.secret-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--text);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 2px;
  flex: none;
}
.seller-details {
  flex: 1;
}
.seller-details small {
  color: var(--muted);
}
.rating-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0;
}
.stars {
  color: #f59e0b;
  letter-spacing: 1px;
  font-size: 0.9rem;
}
.trade-safety {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 12px;
  border-radius: 15px;
  margin-bottom: 18px;
}
.trade-safety strong,
.trade-safety small {
  display: block;
}
.trade-safety small {
  margin-top: 3px;
  color: var(--muted);
}
.rate-trade {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 15px;
  margin-top: 18px;
  text-align: center;
}
.rate-trade > span {
  display: block;
  margin: 4px 0 8px;
}
.rate-stars {
  direction: ltr;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.rate-stars button {
  border: 0;
  background: none;
  color: #cbd5e1;
  font-size: 1.65rem;
  cursor: pointer;
  padding: 2px;
}
.rate-stars button.selected {
  color: #f59e0b;
}
.market-inbox,
.contact-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  color: inherit;
  padding: 13px 15px;
  text-align: right;
  margin-bottom: 17px;
}
.market-inbox {
  cursor: pointer;
}
.market-inbox > span,
.contact-notice > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}
.market-inbox > div,
.contact-notice > div {
  flex: 1;
}
.market-inbox strong,
.market-inbox small,
.contact-notice strong,
.contact-notice small {
  display: block;
}
.market-inbox small,
.contact-notice small {
  color: var(--muted);
  margin-top: 3px;
}
.market-inbox > b {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
}
.contact-notice {
  cursor: default;
}
.contact-avatar {
  background: linear-gradient(145deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
  border-radius: 50%;
}
.small-secret {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 0.7rem;
}
.language-control {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 10px;
}
.language-control select {
  max-width: 115px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  color-scheme: light;
}
.language-control select option {
  background: #fff;
  color: #172033;
  font-weight: 500;
}
.language-control select option:checked {
  background: #dbeafe;
  color: #172033;
}
.reviews {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 15px;
}
.reviews-head h3 {
  margin: 0 0 4px;
}
.reviews-head span {
  color: var(--muted);
  font-size: 0.85rem;
}
.reviews-head > strong {
  color: #d97706;
  font-size: 1.2rem;
}
.review-card {
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.review-top,
.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.review-card p {
  line-height: 1.55;
  margin: 9px 0;
}
.review-meta {
  color: var(--muted);
  font-size: 0.8rem;
}
.review-meta span {
  color: var(--primary);
  font-weight: 700;
}
html[dir="ltr"] .market-actions button,
html[dir="ltr"] .market-inbox {
  text-align: left;
}
@media (max-width: 600px) {
  .language-control {
    padding: 0 9px;
    min-width: 132px;
  }
  .language-control select {
    width: 92px;
    max-width: 92px;
    font-size: 0.9rem;
  }
  .language-control span {
    display: inline;
  }
  .top-actions {
    gap: 6px;
  }
  .icon-button,
  .avatar-button {
    width: 40px;
    height: 40px;
  }
}
.message-own {
  position: relative;
  padding-bottom: 7px;
  padding-inline-end: 12px;
}
.message-text {
  display: block;
  padding-inline-end: 44px;
}
.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 16px;
  margin-top: 2px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.76);
}
.delivery {
  font-weight: 900;
  letter-spacing: -3px;
  padding-inline-end: 3px;
}
.delivery.read {
  color: #7dd3fc;
}
.message-menu-button {
  position: absolute;
  top: 3px;
  inset-inline-end: 4px;
  border: 0;
  background: rgba(0, 0, 0, 0.13);
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: 0.15s;
}
.message-own:focus-within .message-menu-button {
  opacity: 1;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .message-own:hover .message-menu-button {
    opacity: 1;
  }
}
.message-actions {
  display: none;
  position: absolute;
  z-index: 8;
  top: 30px;
  inset-inline-end: 5px;
  min-width: 155px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.message-own.menu-open .message-actions {
  display: grid;
}
.message-own.menu-open .message-menu-button {
  opacity: 1;
}
.message-actions button {
  border: 0;
  background: var(--surface);
  color: var(--text);
  padding: 11px 13px;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .message-actions button:hover {
    background: var(--bg);
  }
}
.message-actions button:last-child {
  color: var(--danger);
  border-top: 1px solid var(--border);
}
@media (max-width: 700px) {
  .message-menu-button {
    opacity: 1;
  }
}
.message-text.editing {
  min-width: 180px;
  background: rgba(255, 255, 255, 0.16);
  outline: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 7px;
  padding: 4px 7px;
  margin: 0 0 4px;
}
.call-actions {
  display: flex;
  gap: 7px;
  margin-inline-start: auto;
}
.call-actions button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.15rem;
  cursor: pointer;
}
.chat-person {
  min-width: 0;
}
.hide-read-receipts .chat-view:not(.group-chat) .delivery.read {
  color: rgba(255, 255, 255, 0.76);
}
.settings-page {
  max-width: 780px;
  margin: auto;
}
.settings-heading {
  font-size: 1rem;
  color: var(--muted);
  margin: 25px 4px 10px;
}
.settings-button {
  width: 100%;
  text-align: start;
  color: inherit;
}
.settings-button b {
  font-size: 1.5rem;
  color: var(--muted);
}
.settings-select {
  max-width: 180px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  padding: 9px;
  color-scheme: light;
}
.settings-select option {
  background: #fff;
  color: #172033;
}
.toggle-control {
  width: 51px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  padding: 3px;
  cursor: pointer;
  transition: 0.2s;
  flex: none;
}
.toggle-control span {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.toggle-control.on {
  background: var(--primary);
}
.toggle-control.on span {
  transform: translateX(21px);
}
html[dir="rtl"] .toggle-control.on span {
  transform: translateX(-21px);
}
.privacy-note {
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
@media (max-width: 520px) {
  .call-actions {
    gap: 3px;
  }
  .call-actions button {
    width: 38px;
    height: 38px;
  }
  .chat-header {
    gap: 8px;
  }
  .settings-select {
    max-width: 125px;
  }
  .settings-page .profile-card {
    padding: 18px;
  }
  .settings-page .profile-avatar {
    width: 56px;
    height: 56px;
  }
}
.chats-page {
  max-width: 820px;
  margin: auto;
}
.chats-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.chats-toolbar h1 {
  color: var(--primary);
  font-size: 2rem;
}
.chat-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.chat-tools > button {
  border: 0;
  background: transparent;
  color: var(--text);
  width: 43px;
  height: 43px;
  border-radius: 50%;
  font-size: 1.7rem;
  cursor: pointer;
}
.chat-tools > button:first-child {
  background: var(--primary);
  color: #fff;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .chat-tools > button:hover {
    background: var(--primary-soft);
    color: var(--primary);
  }
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .chat-tools > button:first-child:hover {
    background: var(--primary-dark);
    color: #fff;
  }
}
.chat-overflow {
  display: none;
  position: absolute;
  z-index: 12;
  top: 48px;
  inset-inline-end: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chat-tools.menu-open .chat-overflow {
  display: grid;
}
.chat-overflow button {
  border: 0;
  background: var(--surface);
  color: var(--text);
  padding: 12px 15px;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .chat-overflow button:hover {
    background: var(--bg);
  }
}
.chat-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 17px;
}
.chat-search span {
  font-size: 1.3rem;
  color: var(--muted);
}
.chat-search input {
  width: 100%;
  padding: 14px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.chat-filters {
  display: flex;
  gap: 9px;
  overflow: auto;
  padding: 12px 0 17px;
  scrollbar-width: none;
}
.chat-filters button {
  white-space: nowrap;
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
}
.chat-filters button.active {
  background: var(--primary-soft);
  border-color: #bfdbfe;
  color: var(--primary);
  font-weight: 700;
}
.chat-filters .add-filter {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.25rem;
}
.chat-list .chat-row {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding-inline: 4px;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .chat-list .chat-row:hover {
    background: var(--surface);
    border-radius: 15px;
  }
}
.chat-empty {
  margin-top: 10px;
}
.chat-row[hidden] {
  display: none !important;
}
.nav-item .badge[hidden] {
  display: none !important;
}
.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.chat-filters button.active .filter-count {
  background: #fff;
  color: var(--primary);
}
.devices-page {
  max-width: 720px;
  margin: auto;
}
.device-security {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary-soft);
  border-radius: 17px;
  padding: 14px;
  color: var(--primary);
  margin: 18px 0;
}
.device-security strong,
.device-security small {
  display: block;
}
.device-security small {
  color: var(--muted);
  margin-top: 4px;
}
.device-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 4px;
  margin-bottom: 16px;
}
.device-tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 11px;
  padding: 11px;
  cursor: pointer;
  font-weight: 700;
}
.device-tabs button.active {
  background: var(--primary);
  color: #fff;
}
.link-method {
  display: none;
}
.link-method.active {
  display: block;
}
.qr-card,
.phone-link-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px;
  text-align: center;
}
.demo-qr {
  width: 210px;
  height: 210px;
  margin: 0 auto 18px;
  border: 12px solid #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(#101828 0 25%, #fff 0 50%) 0/22px 22px;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.12);
}
.demo-qr span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border: 7px solid #fff;
  border-radius: 12px;
  font-weight: 900;
}
.qr-card ol {
  text-align: start;
  line-height: 1.9;
  max-width: 470px;
  margin: 10px auto;
}
.demo-label {
  display: inline-block;
  background: #fff3cd;
  color: #7a5400;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.8rem;
}
.phone-fields {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  margin: 20px 0;
}
.phone-fields select,
.phone-fields input {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  padding: 12px;
}
.linked-list {
  margin-top: 25px;
}
.linked-list h2 {
  font-size: 1.1rem;
}
@media (max-width: 520px) {
  .demo-qr {
    width: 180px;
    height: 180px;
    background-size: 19px 19px;
  }
  .qr-card,
  .phone-link-card {
    padding: 18px;
  }
  .phone-fields {
    grid-template-columns: 86px 1fr;
  }
}
.settings-hub {
  max-width: 760px;
  margin: auto;
}
.settings-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-search-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}
.settings-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
}
.settings-identity h2 {
  margin: 0 0 4px;
}
.settings-identity span {
  color: var(--muted);
}
.identity-actions {
  display: flex;
  gap: 7px;
  margin-inline-start: auto;
}
.identity-actions button {
  width: 43px;
  height: 43px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.25rem;
  cursor: pointer;
}
.settings-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 15px;
  margin-bottom: 16px;
}
.settings-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 0;
}
.settings-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 0 16px;
  margin: 0 0 16px;
  overflow: visible;
}
.settings-menu-row {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: start;
  padding: 10px 0;
}
.settings-menu-row:last-child {
  border-bottom: 0;
}
.settings-group button.settings-menu-row {
  cursor: pointer;
}
.settings-icon {
  width: 31px;
  text-align: center;
  font-size: 1.35rem;
  color: var(--primary);
  font-weight: 700;
}
.settings-row-copy {
  flex: 1;
  min-width: 0;
}
.settings-row-copy strong,
.settings-row-copy small {
  display: block;
}
.settings-row-copy small {
  color: var(--muted);
  margin-top: 4px;
}
.settings-menu-row > b {
  font-size: 1.6rem;
  color: var(--muted);
  font-weight: 400;
}
.settings-menu-row .settings-select {
  margin-inline-start: auto;
}
.account-qr {
  margin-top: 20px;
}
@media (max-width: 520px) {
  .settings-hub {
    padding-inline: 14px;
  }
  .settings-identity .profile-avatar {
    width: 58px;
    height: 58px;
  }
  .identity-actions button {
    width: 40px;
    height: 40px;
  }
  .settings-group {
    padding: 0 13px;
  }
  .settings-menu-row {
    min-height: 62px;
  }
  .settings-menu-row .settings-select {
    max-width: 112px;
  }
}
.live-page {
  max-width: 950px;
  margin: auto;
}
.live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.start-live {
  display: flex;
  align-items: center;
  gap: 8px;
}
.start-live span {
  color: #fff;
  animation: pulse 1.2s infinite;
}
.live-privacy-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary-soft);
  border-radius: 17px;
  padding: 14px;
  margin: 20px 0;
}
.live-privacy-summary strong,
.live-privacy-summary small {
  display: block;
}
.live-privacy-summary small {
  color: var(--muted);
  margin-top: 4px;
}
.live-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}
.live-tabs button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
}
.live-tabs button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.live-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
.live-preview {
  height: 210px;
  position: relative;
  display: grid;
  place-items: center;
}
.blue-live {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}
.purple-live {
  background: linear-gradient(135deg, #6d28d9, #a78bfa);
}
.live-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.3rem;
  border: 5px solid rgba(255, 255, 255, 0.25);
}
.live-badge,
.viewer-count {
  position: absolute;
  background: rgba(10, 18, 35, 0.76);
  color: #fff;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 0.8rem;
}
.live-badge {
  top: 12px;
  inset-inline-start: 12px;
  background: #dc2626;
}
.viewer-count {
  bottom: 12px;
  inset-inline-end: 12px;
}
.live-copy {
  padding: 14px;
}
.live-copy strong,
.live-copy span {
  display: block;
}
.live-copy span {
  color: var(--muted);
  margin-top: 5px;
  font-size: 0.88rem;
}
.audience-options {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.audience-options label {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--border);
  border-radius: 17px;
  padding: 14px;
  cursor: pointer;
}
.audience-options label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.audience-options input {
  position: absolute;
  opacity: 0;
}
.audience-options label > span:nth-of-type(2) {
  flex: 1;
}
.audience-options strong,
.audience-options small {
  display: block;
}
.audience-options small {
  color: var(--muted);
  margin-top: 4px;
}
.audience-options b {
  display: none;
  color: var(--primary);
}
.audience-options label:has(input:checked) > b {
  display: block;
}
.audience-icon {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: var(--surface);
  display: grid !important;
  place-items: center;
  color: var(--primary);
  font-size: 1.35rem;
}
.live-warning {
  background: var(--primary-soft);
  color: var(--muted);
  border-radius: 13px;
  padding: 12px;
  margin: 14px 0;
}
.live-page [hidden] {
  display: none;
}
@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}
@media (max-width: 620px) {
  .live-head {
    align-items: start;
    flex-direction: column;
  }
  .start-live {
    width: 100%;
    justify-content: center;
  }
  .live-grid {
    grid-template-columns: 1fr;
  }
  .live-preview {
    height: 185px;
  }
}
.live-setup-sheet {
  max-height: min(90dvh, 850px);
  overflow: auto;
}
.camera-preview {
  height: 250px;
  margin: 17px 0;
  border-radius: 22px;
  background: linear-gradient(145deg, #93c5fd, #1d4ed8);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition:
    filter 0.25s,
    background 0.25s;
}
.camera-face {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  font-size: 4.5rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
.camera-label,
.flip-camera {
  position: absolute;
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
  border: 0;
  border-radius: 999px;
}
.camera-label {
  top: 12px;
  inset-inline-start: 12px;
  padding: 7px 11px;
  font-size: 0.78rem;
}
.flip-camera {
  top: 12px;
  inset-inline-end: 12px;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
  cursor: pointer;
}
.fun-overlay {
  display: none;
  position: absolute;
  font-size: 4rem;
  inset-inline-end: 13%;
  top: 22%;
}
.filter-picker > strong {
  display: block;
  margin-bottom: 9px;
}
.filter-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 11px;
  scrollbar-width: none;
}
.filter-strip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  min-width: 65px;
  cursor: pointer;
}
.filter-strip small {
  display: block;
  margin-top: 5px;
  white-space: nowrap;
}
.filter-thumb {
  width: 58px;
  height: 58px;
  border: 3px solid transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #93c5fd, #1d4ed8);
  font-size: 1.8rem;
  color: #fff;
}
.filter-strip button.active .filter-thumb {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.filter-strip button.active small {
  color: var(--primary);
  font-weight: 700;
}
.filter-warm {
  filter: sepia(0.35) saturate(1.45) hue-rotate(-10deg);
}
.filter-cool {
  filter: saturate(1.2) hue-rotate(18deg);
}
.filter-mono {
  filter: grayscale(1) contrast(1.12);
}
.filter-glow {
  filter: brightness(1.12) saturate(1.3);
  box-shadow: inset 0 0 55px rgba(255, 255, 255, 0.45);
}
.filter-vintage {
  filter: sepia(0.65) contrast(0.9) brightness(0.95);
}
.filter-fun {
  filter: saturate(1.7) hue-rotate(300deg);
}
.camera-preview.filter-fun .fun-overlay {
  display: block;
}
.audience-title {
  margin: 14px 0 8px;
  font-size: 1rem;
}
@media (max-width: 520px) {
  .camera-preview {
    height: 215px;
  }
  .camera-face {
    width: 96px;
    height: 96px;
    font-size: 3.8rem;
  }
}
.message-context {
  position: relative;
  padding-inline-end: 42px;
}
.message-context .incoming-menu {
  color: var(--muted);
  background: var(--bg);
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .message-context:hover .incoming-menu {
    opacity: 1;
  }
}
.message-actions {
  width: 235px;
  min-width: 235px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.bubble.them .message-actions {
  inset-inline-start: 5px;
  inset-inline-end: auto;
}
.reaction-bar {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.bubble.them .reaction-bar {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.reaction-bar button {
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  padding: 5px !important;
  font-size: 1.25rem;
  border-radius: 50%;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .reaction-bar button:hover {
    transform: scale(1.18);
  }
}
.message-action-list {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.message-action-list button {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  padding: 11px 14px;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .message-action-list button:hover {
    background: var(--bg);
  }
}
.message-action-list button span {
  width: 23px;
  text-align: center;
  font-size: 1.1rem;
}
.message-action-list .danger-action {
  color: var(--danger);
  border-top: 1px solid var(--border);
}
.message-reaction {
  position: absolute;
  bottom: -14px;
  inset-inline-start: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
}
.starred-message:after {
  content: "★";
  position: absolute;
  bottom: 3px;
  inset-inline-start: 5px;
  color: #f59e0b;
  font-size: 0.75rem;
}
.pinned-message {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}
@media (max-width: 520px) {
  .message-actions {
    position: fixed !important;
    z-index: 40 !important;
    top: auto !important;
    bottom: 90px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(290px, calc(100vw - 24px));
    min-width: 0;
  }
  .reaction-bar {
    position: static;
    justify-content: space-between;
    margin-bottom: 7px;
  }
  .message-action-list {
    max-height: 52dvh;
    overflow: auto;
  }
}
.message-translation {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.88rem;
  line-height: 1.5;
}
.bubble.them .message-translation {
  border-top-color: var(--border);
  color: var(--muted);
}
.message-translation small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Show the full message menu for both sent and received messages. */
.bubble.menu-open .message-actions {
  display: grid !important;
}
.bubble.menu-open .message-menu-button {
  opacity: 1;
}
.bubble.them .message-actions:empty,
.bubble.me .message-actions:empty {
  display: none !important;
}
.message-action-list button {
  min-height: 44px;
  font-size: 0.95rem;
}
.message-action-list button span {
  flex: none;
}
@media (max-width: 520px) {
  .bubble.menu-open .message-actions {
    display: grid !important;
  }
  .message-action-list {
    max-height: 64dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .reaction-bar {
    overflow-x: auto;
  }
  .message-action-list button {
    min-height: 47px;
  }
}
@media (max-width: 760px) {
  .bubble.menu-open .message-actions {
    display: grid !important;
    position: fixed !important;
    z-index: 50 !important;
    top: auto !important;
    bottom: 88px !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    transform: translateX(-50%) !important;
    width: min(320px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 108px) !important;
  }
  .reaction-bar {
    position: static !important;
    display: flex !important;
    justify-content: space-between;
    overflow-x: auto;
    margin-bottom: 7px;
    flex: none;
  }
  .message-action-list {
    display: block;
    max-height: calc(100dvh - 190px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .message-action-list button {
    width: 100%;
    min-height: 48px;
  }
  .message-action-list:after {
    content: "";
    display: block;
    height: 8px;
  }
}
.forward-sheet {
  max-height: min(88dvh, 760px);
  overflow: auto;
}
.forward-message-preview,
.info-message {
  background: var(--primary-soft);
  border-inline-start: 4px solid var(--primary);
  border-radius: 11px;
  padding: 11px 13px;
  margin: 14px 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forward-search {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  padding: 0 14px;
  position: sticky;
  top: -1px;
  z-index: 2;
}
.forward-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 11px 0;
}
.forward-sheet h3 {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 17px 4px 8px;
}
.forward-contacts {
  display: grid;
  gap: 3px;
}
.forward-contact {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border-radius: 14px;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .forward-contact:hover {
    background: var(--bg);
  }
}
.forward-contact input {
  position: absolute;
  opacity: 0;
}
.forward-contact > span:nth-of-type(2) {
  flex: 1;
}
.forward-contact strong,
.forward-contact small {
  display: block;
}
.forward-contact small {
  color: var(--muted);
  margin-top: 3px;
}
.forward-contact b {
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  place-items: center;
}
.forward-contact:has(input:checked) {
  background: var(--primary-soft);
}
.forward-contact:has(input:checked) > b {
  display: grid;
}
.forward-footer {
  position: sticky;
  bottom: -22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 13px 0 0;
  margin-top: 10px;
}
.forward-footer span {
  color: var(--muted);
  font-size: 0.85rem;
}
.forward-footer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.message-info-list {
  display: grid;
}
.message-info-list > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.message-info-list p {
  margin: 0;
}
.message-info-list strong,
.message-info-list small {
  display: block;
}
.message-info-list small {
  color: var(--muted);
  margin-top: 3px;
}
.info-check {
  color: var(--muted);
  font-weight: 900;
  letter-spacing: -3px;
}
.info-check.read {
  color: #0ea5e9;
}
.primary-message-actions,
.secondary-message-actions {
  display: grid;
}
.secondary-message-actions {
  display: none;
}
.message-action-list.show-secondary .primary-message-actions {
  display: none;
}
.message-action-list.show-secondary .secondary-message-actions {
  display: grid;
}
.more-options-button b,
.previous-options-button b {
  font: inherit;
  font-weight: 400;
}
.more-options-button i {
  margin-inline-start: auto;
  font-style: normal;
  color: var(--muted);
}
.previous-options-button {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-bottom: 1px solid var(--border) !important;
}
.previous-options-button b {
  flex: 1;
  text-align: start;
}
.primary-message-actions .danger-action {
  border-top: 0;
}
.composer {
  align-items: center;
  z-index: 15;
}
.composer-tools,
.composer-input-wrap {
  position: relative;
}
.composer-tools > button,
.voice-button,
.send-message-button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.35rem;
  cursor: pointer;
  flex: none;
}
.composer-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding-inline: 6px;
}
.composer-input-wrap > button {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.35rem;
  cursor: pointer;
}
.composer-input-wrap input {
  border: 0 !important;
  background: transparent !important;
  padding: 12px 5px !important;
}
.voice-button,
.send-message-button {
  background: var(--primary);
  color: #fff;
}
.send-message-button {
  display: none;
}
.composer.has-text .send-message-button {
  display: block;
}
.composer.has-text .voice-button {
  display: none;
}
.attachment-menu,
.emoji-picker {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: 56px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 17px;
  box-shadow: var(--shadow);
}
.attachment-menu {
  inset-inline-start: 0;
  min-width: 190px;
  padding: 7px;
}
.composer-tools.open .attachment-menu {
  display: grid;
}
.attachment-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 10px;
  border-radius: 10px;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .attachment-menu button:hover {
    background: var(--bg);
  }
}
.attachment-menu span {
  width: 28px;
  color: var(--primary);
  font-size: 1.15rem;
}
.emoji-picker {
  inset-inline-start: 0;
  width: min(315px, calc(100vw - 80px));
  grid-template-columns: repeat(5, 1fr);
  padding: 9px;
}
.composer-input-wrap.emoji-open .emoji-picker {
  display: grid;
}
.emoji-picker button {
  border: 0;
  background: transparent;
  font-size: 1.45rem;
  padding: 8px;
  cursor: pointer;
}
.voice-recorder {
  display: none;
  flex: 1;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 9px;
}
.voice-recorder span:nth-of-type(2) {
  flex: 1;
  color: var(--muted);
}
.voice-recorder button {
  border: 0;
  background: transparent;
  color: var(--danger);
  font-weight: 700;
  cursor: pointer;
}
.voice-recorder button:last-child {
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 8px 13px;
}
.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulse 0.9s infinite;
}
.composer.recording > *:not(.voice-recorder) {
  display: none !important;
}
.composer.recording .voice-recorder {
  display: flex;
}
.voice-message {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 240px;
}
.audio-play {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  cursor: pointer;
}
.voice-message audio {
  display: none;
}
.audio-wave {
  height: 30px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
}
.audio-wave i {
  display: block;
  width: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
}
.audio-wave i:nth-child(1),
.audio-wave i:nth-child(8) {
  height: 8px;
}
.audio-wave i:nth-child(2),
.audio-wave i:nth-child(7) {
  height: 15px;
}
.audio-wave i:nth-child(3),
.audio-wave i:nth-child(6) {
  height: 23px;
}
.audio-wave i:nth-child(4),
.audio-wave i:nth-child(5) {
  height: 29px;
}
.voice-message > .message-meta {
  margin-inline-start: auto;
}
.voice-message > .message-menu-button {
  top: 2px;
}
.voice-message > .message-actions {
  top: 30px;
}
@media (max-width: 520px) {
  .composer {
    gap: 5px;
  }
  .composer-tools > button,
  .voice-button,
  .send-message-button {
    width: 42px;
    height: 42px;
  }
  .voice-recorder {
    font-size: 0.82rem;
  }
  .voice-recorder span:nth-of-type(2) {
    display: none;
  }
  .voice-message {
    min-width: 210px;
  }
}
.attachment-menu {
  max-height: min(460px, 65dvh);
  overflow-y: auto;
}
.attachment-menu span.purple {
  color: #7c3aed;
}
.attachment-menu span.blue {
  color: #2563eb;
}
.attachment-menu span.pink {
  color: #ec4899;
}
.attachment-menu span.orange {
  color: #f97316;
}
.attachment-menu span.cyan {
  color: #0891b2;
}
.attachment-menu span.amber {
  color: #d97706;
}
.attachment-menu span.magenta {
  color: #db2777;
}
.attachment-menu span.green {
  color: #10b981;
}
.attachment-form {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}
.sticker-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.sticker-picker button {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 14px;
  font-size: 2rem;
  padding: 13px;
  cursor: pointer;
}
.attachment-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
}
.attachment-file-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
}
.attachment-message .message-text {
  flex: 1;
  min-width: 0;
  padding-inline-end: 0;
}
.attachment-message .message-text strong,
.attachment-message .message-text small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachment-message .message-text small {
  opacity: 0.75;
  margin-top: 3px;
}
.emoji-picker {
  display: none;
  position: absolute;
  z-index: 30;
  bottom: 56px;
  inset-inline-start: 0;
  width: min(410px, calc(100vw - 40px));
  height: 440px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  grid-template-columns: none;
}
.composer-input-wrap.emoji-open .emoji-picker {
  display: flex;
  flex-direction: column;
}
.emoji-picker-head {
  padding: 12px 12px 8px;
}
.emoji-picker-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 12px;
}
.emoji-picker-head input {
  border: 0 !important;
  background: transparent !important;
  padding: 10px 2px !important;
  font-size: 0.9rem;
}
.emoji-categories {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 3px 8px 8px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.emoji-categories button {
  border: 0;
  background: transparent;
  min-width: 37px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.18rem;
  cursor: pointer;
  opacity: 0.66;
}
.emoji-categories button.active {
  background: var(--primary-soft);
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--primary);
}
.emoji-results-title {
  padding: 8px 12px 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  padding: 3px 8px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
}
.emoji-grid button {
  border: 0;
  background: transparent;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 9px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.emoji-grid button:focus-visible {
  background: var(--primary-soft);
  transform: scale(1.08);
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .emoji-grid button:hover {
    background: var(--primary-soft);
    transform: scale(1.08);
  }
}
.emoji-empty {
  margin: auto;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}
.emoji-empty[hidden] {
  display: none;
}
@media (max-width: 600px) {
  .emoji-picker {
    position: fixed;
    inset-inline-start: 50%;
    bottom: 78px;
    transform: translateX(-50%);
    width: calc(100vw - 18px);
    height: min(455px, 63dvh);
    border-radius: 20px 20px 0 0;
  }
  .emoji-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .emoji-grid button {
    font-size: 1.55rem;
  }
}
@media (max-width: 520px) {
  .market-actions {
    grid-template-columns: 1fr;
  }
  .nav-item small {
    font-size: 0.68rem;
  }
}

.identity-privacy-page {
  max-width: 760px;
  margin: auto;
  padding-bottom: 110px;
}
.identity-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  margin: 16px 0 22px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--text);
}
.identity-notice > span {
  font-size: 1.8rem;
}
.identity-notice strong,
.identity-notice small {
  display: block;
}
.identity-notice small {
  color: var(--muted);
  margin-top: 4px;
}
.identity-privacy-page h2 {
  font-size: 1.05rem;
  margin: 24px 0 12px;
}
.identity-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.identity-choice label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
}
.identity-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.identity-choice label:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.identity-choice strong,
.identity-choice small {
  display: block;
}
.identity-choice small {
  color: var(--muted);
  margin-top: 4px;
}
.identity-choice b {
  display: none;
  margin-inline-start: auto;
  color: var(--primary);
}
.identity-choice label:has(input:checked) b {
  display: block;
}
.identity-fields {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.identity-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  cursor: pointer;
}
.identity-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}
.market-identity-preview {
  padding: 13px 15px;
  margin: 12px 0;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--text);
}
.market-identity-preview strong,
.market-identity-preview small {
  display: block;
}
.market-identity-preview small {
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .identity-choice {
    grid-template-columns: 1fr;
  }
}

/* WhatsApp-style emoji panel with image-backed emoji for consistent rendering. */
.emoji-picker {
  width: min(470px, calc(100vw - 34px));
  height: min(490px, calc(100dvh - 150px));
  direction: rtl;
  overflow: hidden;
}
body > .app-emoji-picker {
  position: fixed;
  z-index: 60;
  inset: auto;
  left: max(16px, calc(50% - 360px));
  right: auto;
  bottom: 142px;
}
body.emoji-open > .app-emoji-picker {
  display: flex;
  flex-direction: column;
}
.emoji-picker [hidden] {
  display: none !important;
}
.emoji-categories {
  order: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 7px 9px 5px;
  overflow: hidden;
  border-bottom: 0;
  flex: none;
  direction: ltr;
}
.emoji-categories button {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 7px 3px;
  border-radius: 0;
  opacity: 0.62;
  border-bottom: 3px solid transparent;
}
.emoji-categories button.active {
  background: transparent;
  opacity: 1;
  box-shadow: none;
  border-bottom-color: var(--primary);
}
.emoji-category-image {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}
.emoji-categories .recent-category {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
}
.emoji-picker-head {
  order: 2;
  width: 100%;
  padding: 7px 10px 9px;
  flex: none;
}
.emoji-picker-head label {
  height: 48px;
  direction: rtl;
  border-radius: 999px;
  padding: 0 15px;
}
.emoji-picker-head label > span {
  font-size: 1.25rem;
  color: var(--muted);
  transform: rotate(-15deg);
}
.emoji-picker-head input {
  min-width: 0;
  width: 100%;
  font-size: 0.95rem !important;
  direction: rtl;
  text-align: right;
}
.emoji-results-title {
  order: 3;
  width: 100%;
  padding: 7px 12px 6px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  flex: none;
}
.emoji-grid {
  order: 4;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-auto-rows: 44px;
  align-items: center;
  gap: 2px;
  padding: 4px 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af transparent;
}
.emoji-grid button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 42px;
  min-width: 0;
  aspect-ratio: auto;
  padding: 5px;
  border-radius: 8px;
  overflow: hidden;
}
.emoji-grid button:focus-visible {
  transform: none;
  background: var(--primary-soft);
  outline: none;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .emoji-grid button:hover {
    transform: none;
    background: var(--primary-soft);
    outline: none;
  }
}
.emoji-image {
  display: block;
  width: 32px;
  height: 32px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.emoji-empty {
  order: 4;
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 30px;
}
.emoji-media-placeholder {
  order: 4;
  flex: 1;
  width: 100%;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
}
.emoji-media-placeholder b {
  font-size: 2rem;
  color: var(--primary);
}
.emoji-media-placeholder span {
  font-size: 0.9rem;
}
.emoji-media-tabs {
  order: 5;
  display: grid;
  grid-template-columns: repeat(3, 86px);
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 7px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: none;
  direction: ltr;
}
.emoji-media-tabs button {
  display: grid;
  place-items: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-inline-start: 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  border-radius: 0;
  cursor: pointer;
}
.emoji-media-tabs button:first-child {
  border-inline-start: 1px solid var(--border);
  border-radius: 999px 0 0 999px;
  font-size: 1.25rem;
}
.emoji-media-tabs button:last-child {
  border-radius: 0 999px 999px 0;
  font-size: 1.25rem;
}
.emoji-media-tabs button.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}
@media (max-width: 600px) {
  body > .app-emoji-picker {
    inset: auto !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 86px !important;
    width: auto;
    height: min(510px, calc(100dvh - 165px));
    transform: none !important;
  }
  .emoji-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding-inline: 8px;
  }
  .emoji-image {
    width: 30px;
    height: 30px;
  }
  .emoji-categories button {
    height: 40px;
    padding-inline: 2px;
  }
  .emoji-category-image {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 390px) {
  .emoji-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .emoji-media-tabs {
    grid-template-columns: repeat(3, 78px);
  }
}

/* Country calling-code picker */
.phone-fields {
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: start;
}
.country-picker {
  position: relative;
  min-width: 0;
  text-align: start;
}
.country-trigger {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  padding: 0 14px;
  cursor: pointer;
  direction: ltr;
  font-weight: 700;
}
.country-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 7px);
  inset-inline-start: 0;
  width: min(390px, calc(100vw - 44px));
  max-height: min(390px, 52dvh);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 17px;
  box-shadow: var(--shadow);
  padding: 8px;
  direction: rtl;
}
.country-menu[hidden] {
  display: none;
}
.country-search {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 11px;
  margin-bottom: 7px;
}
.country-search input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 10px 2px !important;
  outline: 0;
  color: var(--text);
}
.country-list {
  max-height: calc(min(390px, 52dvh) - 62px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.country-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 7px 9px;
  text-align: start;
  cursor: pointer;
}
.country-option[hidden] {
  display: none !important;
}
.country-option:focus-visible {
  background: var(--primary-soft);
  outline: none;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .country-option:hover {
    background: var(--primary-soft);
    outline: none;
  }
}
.country-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.country-option b {
  direction: ltr;
  color: var(--muted);
  font-size: 0.86rem;
}
.country-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
}
.country-empty[hidden] {
  display: none;
}
@media (max-width: 520px) {
  .phone-fields {
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .country-menu {
    position: fixed;
    top: auto;
    bottom: 86px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 58dvh;
  }
  .country-list {
    max-height: calc(58dvh - 62px);
  }
}

/* Group related emoji variations under one base emoji. */
.emoji-grid button.has-variants {
  position: relative;
}
.emoji-grid button.has-variants:after {
  content: "";
  position: absolute;
  inset-inline-end: 3px;
  bottom: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 6px 6px;
  border-color: transparent transparent var(--muted) transparent;
  opacity: 0.8;
}
.emoji-variants {
  position: absolute;
  z-index: 8;
  left: 10px;
  right: 10px;
  bottom: 60px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.24);
  padding: 10px;
  direction: rtl;
}
.emoji-variants[hidden] {
  display: none !important;
}
.emoji-variants > strong {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 8px;
}
.emoji-variants > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  direction: ltr;
}
.emoji-variants button {
  display: grid;
  place-items: center;
  height: 43px;
  border: 0;
  border-radius: 9px;
  background: var(--bg);
  padding: 5px;
  cursor: pointer;
}
.emoji-variants button:focus-visible {
  background: var(--primary-soft);
  outline: 2px solid var(--primary);
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .emoji-variants button:hover {
    background: var(--primary-soft);
    outline: 2px solid var(--primary);
  }
}
@media (max-width: 390px) {
  .emoji-variants > div {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Computer sign-in and phone approval flow */
.computer-login-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 30px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 34px;
  text-align: start;
}
.computer-login-copy h2 {
  font-size: 1.8rem;
  margin: 0 0 24px;
}
.login-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 17px;
}
.login-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
}
.login-steps b {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--text);
  border-radius: 50%;
  font-weight: 500;
  flex: none;
}
.help-link,
.phone-login-link,
.auth-alternative {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
  padding: 0;
}
.help-link {
  margin: 23px 0;
}
.stay-signed {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}
.stay-signed input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}
.qr-login-side {
  text-align: center;
}
.qr-scan-button {
  border: 0;
  cursor: pointer;
  transition: 0.18s;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .qr-scan-button:hover {
    transform: scale(1.025);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.22);
  }
}
.qr-login-side small {
  display: block;
  color: var(--muted);
  line-height: 1.5;
  margin: -7px auto 18px;
  max-width: 250px;
}
.phone-login-link {
  font-size: 0.95rem;
}
.encryption-note {
  text-align: center;
  color: var(--muted);
  padding: 18px 10px 4px;
  font-size: 0.9rem;
}
.link-approval {
  text-align: center;
}
.approval-device {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  background: var(--primary-soft);
  border-radius: 16px;
  padding: 13px;
  margin: 18px 0;
}
.approval-device > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.35rem;
}
.approval-device strong,
.approval-device small {
  display: block;
}
.approval-device small {
  color: var(--muted);
  margin-top: 4px;
}
.auth-symbol {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 22px auto 12px;
  border-radius: 24px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 2rem;
  font-weight: 800;
}
.link-approval h3 {
  margin: 8px 0;
}
.link-approval .field {
  text-align: start;
  margin: 20px 0;
}
.auth-alternative {
  display: block;
  margin: 16px auto;
}
.approval-warning {
  background: #fff7ed;
  color: #9a3412;
  border-radius: 13px;
  padding: 11px;
  margin: 18px 0 0;
  font-size: 0.84rem;
}
.linked-device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 14px;
}
.linked-device-row > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 14px;
  font-size: 1.4rem;
}
.linked-device-row > div {
  flex: 1;
}
.linked-device-row strong,
.linked-device-row small {
  display: block;
}
.linked-device-row small {
  color: var(--muted);
  margin-top: 4px;
}
.linked-device-row button {
  border: 0;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  font-weight: 700;
}
@media (max-width: 650px) {
  .computer-login-card {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 25px;
  }
  .computer-login-copy h2 {
    font-size: 1.45rem;
  }
  .qr-login-side {
    order: -1;
  }
  .login-steps {
    gap: 13px;
  }
  .demo-qr.qr-scan-button {
    width: 190px;
    height: 190px;
  }
  .linked-device-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .linked-device-row button {
    margin-inline-start: 58px;
  }
}

/* Account security shared by all linked devices */
.security-page {
  max-width: 760px;
  margin: auto;
}
.security-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(135deg, var(--primary), #1d4ed8);
  color: #fff;
  border-radius: 20px;
  padding: 18px;
  margin: 15px 0 24px;
}
.security-banner > span {
  font-size: 2rem;
}
.security-banner strong,
.security-banner small {
  display: block;
}
.security-banner small {
  opacity: 0.82;
  margin-top: 5px;
}
.security-section-title {
  font-size: 1rem;
  color: var(--muted);
  margin: 22px 4px 10px;
}
.security-hint {
  margin: -4px 4px 11px;
  font-size: 0.88rem;
}
.security-card,
.recovery-list {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.security-control {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: start;
}
.security-control:last-child {
  border-bottom: 0;
}
.security-control-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.2rem;
  flex: none;
}
.security-control > span:nth-child(2) {
  flex: 1;
}
.security-control strong,
.security-control small {
  display: block;
}
.security-control small {
  color: var(--muted);
  margin-top: 4px;
}
.security-row-button {
  width: 100%;
  cursor: pointer;
}
.security-row-button > b {
  font-size: 1.5rem;
  color: var(--muted);
}
.recovery-method {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  text-align: start;
  cursor: pointer;
}
.recovery-method:last-child {
  border-bottom: 0;
}
.recovery-method > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--bg);
  color: var(--primary);
  font-size: 1.2rem;
}
.recovery-method strong,
.recovery-method small {
  display: block;
}
.recovery-method small {
  color: var(--muted);
  margin-top: 4px;
}
.recovery-method > b {
  direction: ltr;
  color: var(--muted);
  font-size: 0.82rem;
}
.recovery-method > i {
  visibility: hidden;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-style: normal;
}
.recovery-method.selected {
  background: var(--primary-soft);
}
.recovery-method.selected > i {
  visibility: visible;
}
.recovery-codes-button {
  margin-top: 11px;
}
.device-security-link {
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.device-security-link > span:first-child {
  font-size: 1.5rem;
  color: var(--primary);
}
.device-security-link strong,
.device-security-link small {
  display: block;
}
.device-security-link small {
  color: var(--muted);
  margin-top: 4px;
}
.device-security-link > b {
  font-size: 1.5rem;
  color: var(--muted);
}
.auth-setup ol {
  line-height: 1.8;
  color: var(--muted);
}
.mini-auth-qr {
  width: 150px;
  height: 150px;
  margin: 15px auto;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(#172033 0 25%, #fff 0 50%) 0/16px 16px;
  border: 9px solid #fff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.12);
}
.mini-auth-qr span {
  background: var(--primary);
  color: #fff;
  padding: 10px;
  border-radius: 9px;
  font-weight: 900;
}
.auth-secret {
  display: block;
  text-align: center;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px;
  margin: 12px 0;
  letter-spacing: 0.08em;
}
.auth-setup form,
.link-approval form,
#change-password-form {
  display: grid;
  gap: 13px;
}
.two-factor-note {
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 12px;
  padding: 10px;
  font-size: 0.84rem;
}
.recovery-code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 18px 0;
}
.recovery-code-grid code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
@media (max-width: 520px) {
  .security-control {
    padding-inline: 11px;
  }
  .recovery-method {
    grid-template-columns: 38px minmax(0, 1fr) 22px;
  }
  .recovery-method > b {
    grid-column: 2;
    grid-row: 2;
  }
  .recovery-method > i {
    grid-column: 3;
    grid-row: 1/3;
  }
  .recovery-code-grid {
    grid-template-columns: 1fr;
  }
}

/* New chat screen opened from the plus button */
.new-chat-page {
  max-width: 650px;
  margin: auto;
}
.new-chat-head {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 10px;
}
.new-chat-head h1 {
  font-size: 1.45rem;
}
.new-chat-code {
  width: 43px;
  height: 43px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
}
.new-chat-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  padding: 0 17px;
  margin: 20px 0;
}
.new-chat-search span {
  font-size: 1.25rem;
  color: var(--muted);
}
.new-chat-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 13px 0;
}
.new-chat-actions {
  display: grid;
  gap: 3px;
}
.new-chat-actions button,
.self-chat-row,
.new-contact-row {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 9px 5px;
  text-align: start;
  cursor: pointer;
  border-radius: 15px;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .new-chat-actions button:hover,
  :where(html:not(.touch-input)) .self-chat-row:hover,
  :where(html:not(.touch-input)) .new-contact-row:hover {
    background: var(--surface);
  }
}
.new-chat-actions button > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.25rem;
  flex: none;
}
.self-chat-row {
  margin: 8px 0;
}
.self-chat-row > span:nth-child(2),
.new-contact-row > span:nth-child(2) {
  flex: 1;
}
.self-chat-row strong,
.self-chat-row small,
.new-contact-row strong,
.new-contact-row small {
  display: block;
}
.self-chat-row small,
.new-contact-row small {
  color: var(--muted);
  margin-top: 4px;
}
.contact-letter {
  color: var(--primary);
  padding: 14px 8px 6px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.new-contact-list {
  display: grid;
}
.new-contact-row {
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.new-chat-empty {
  padding: 35px;
  text-align: center;
  color: var(--muted);
}
.new-chat-empty[hidden],
.new-contact-row[hidden],
.self-chat-row[hidden] {
  display: none !important;
}
@media (max-width: 520px) {
  .new-chat-page {
    padding-inline: 14px;
  }
  .new-chat-actions button,
  .self-chat-row,
  .new-contact-row {
    min-height: 66px;
  }
  .new-chat-actions button > span {
    width: 50px;
    height: 50px;
  }
}

/* Editable profile */
.settings-profile-photo,
.settings-identity-copy {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  text-align: start;
}
.settings-profile-photo {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  overflow: hidden;
  flex: none;
}
.settings-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.settings-profile-photo .profile-avatar {
  width: 100%;
  height: 100%;
}
.settings-identity-copy {
  flex: 1;
  min-width: 0;
}
.settings-identity-copy h2 {
  margin: 0 0 4px;
}
.settings-identity-copy span {
  color: var(--muted);
}
.profile-edit-page {
  max-width: 650px;
  margin: auto;
}
.profile-edit-head {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
}
.profile-edit-head h1 {
  text-align: center;
  font-size: 1.35rem;
}
.profile-photo-editor {
  text-align: center;
  margin: 22px 0 28px;
}
.profile-photo-editor > button:first-child {
  position: relative;
  width: 148px;
  height: 148px;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}
.profile-photo-editor > button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-photo-editor > button i {
  position: absolute;
  inset-inline-end: 7px;
  bottom: 7px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-style: normal;
  border: 3px solid var(--surface);
}
.profile-photo-editor > strong {
  display: block;
  color: var(--primary);
  margin-top: 12px;
}
.photo-source-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.photo-source-actions button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.photo-source-actions button:last-child {
  color: var(--danger);
}
.profile-fields {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 0 18px;
  overflow: hidden;
}
.profile-fields > label {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border-bottom: 1px solid var(--border);
}
.profile-fields > label > span {
  font-weight: 700;
}
.profile-fields input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  text-align: end;
  padding: 12px 0;
}
.profile-fields input[readonly] {
  color: var(--muted);
}
.username-field {
  display: flex;
  align-items: center;
  direction: ltr;
}
.username-field b {
  color: var(--muted);
}
.username-field input {
  text-align: start;
}
.profile-fields > .primary-button {
  margin: 16px 0;
}
@media (max-width: 520px) {
  .profile-photo-editor > button:first-child {
    width: 126px;
    height: 126px;
  }
  .profile-fields {
    padding-inline: 14px;
  }
  .profile-fields > label {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
  }
  .profile-fields input {
    font-size: 0.9rem;
  }
  .photo-source-actions {
    gap: 6px;
  }
  .photo-source-actions button {
    font-size: 0.8rem;
    padding: 7px 9px;
  }
}
.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f172a;
}
.camera-video.is-live + .camera-face {
  display: none;
}
.chat-camera-sheet {
  max-width: 680px;
}
.chat-camera-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.chat-camera-actions button {
  flex: 1;
}
.captured-photo {
  display: block;
  max-width: min(280px, 70vw);
  border-radius: 13px;
  margin-bottom: 6px;
}
.sheet:has(.live-setup-sheet) {
  height: auto;
  max-height: 92dvh;
  overflow: hidden;
}
.live-setup-sheet {
  height: auto;
  min-height: 0;
  max-height: 92dvh;
  overscroll-behavior: contain;
}
.live-setup-sheet form {
  min-height: 0;
}
.chat-person {
  min-width: 0;
}
.presence {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 3px;
}
.presence.online {
  color: #22c55e;
}
.presence i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
/* «يكتب…» takes the place of the online / last seen / members line while someone types (chat-typing.js). */
.chat-person.typing .presence {
  display: none;
}
.typing-line {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logout-button {
  width: 100%;
  margin: 18px 0 100px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
  font-weight: 800;
  cursor: pointer;
}
.logout-button span {
  margin-inline-end: 8px;
}
.logged-out .topbar,
.logged-out .bottom-nav {
  display: none;
}
.logged-out .app-shell {
  max-width: none;
  padding: 0;
}
.login-page {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  padding: 24px;
  background: radial-gradient(circle at top, var(--primary-soft), var(--bg) 48%);
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 1.25rem;
}
.login-brand span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}
.login-card {
  width: min(480px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 25px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.login-card h1 {
  margin: 0 0 7px;
}
.login-card > p {
  margin: 0 0 22px;
  color: var(--muted);
}
.login-card form {
  display: grid;
  gap: 15px;
}
.forgot-password {
  display: block;
  margin: 13px auto;
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.84rem;
  margin: 18px 0;
}
.login-divider:before,
.login-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}
.biometric-login {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.biometric-login button {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
  color: var(--text);
  padding: 13px 7px;
  cursor: pointer;
}
.biometric-login span,
.biometric-login strong {
  display: block;
}
.biometric-login span {
  font-size: 1.5rem;
  margin-bottom: 5px;
}
.biometric-login strong {
  font-size: 0.76rem;
}
@media (max-width: 480px) {
  .biometric-login {
    grid-template-columns: 1fr;
  }
  .biometric-login button {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: start;
  }
  .biometric-login span {
    margin: 0;
  }
}

.market-location-sheet {
  height: min(760px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.market-location-sheet > .sheet-head {
  flex: none;
}
.market-location-sheet form {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 0;
  flex: 1;
}
.market-country-search {
  position: relative;
  margin: 10px 0 0;
}
.market-country-all,
.market-country-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.market-country-all {
  background: var(--primary-soft);
  font-weight: 800;
}
.market-country-all input,
.market-country-option input {
  width: 19px;
  height: 19px;
  accent-color: var(--primary);
}
.market-country-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-width: thin;
}
.market-location-sheet .primary-button {
  position: relative;
  z-index: 2;
  flex: none;
}
.market-country-option[hidden] {
  display: none;
}
.market-country-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.market-country-option small {
  color: var(--muted);
}
@media (max-width: 760px) {
  .bubble.menu-open .message-actions {
    bottom: 158px !important;
    max-height: calc(100dvh - 176px) !important;
  }
  .message-action-list {
    max-height: calc(100dvh - 258px) !important;
  }
}
.message-options-open:before {
  content: "";
  position: fixed;
  z-index: 45;
  inset: 0;
  background: rgba(5, 12, 25, 0.34);
  backdrop-filter: blur(1px);
}
.message-options-open .composer {
  opacity: 0.45;
  pointer-events: none;
} /* A real chat's messages scroll in their own fixed box, which the page's dark layer (z 45) would cover with the open menu inside it: the box goes above that layer and dims its other messages itself, under the chosen one. */
.message-options-open .chat-view .messages[data-real-chat] {
  z-index: 46;
}
.message-options-open .chat-view .messages[data-real-chat]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(5, 12, 25, 0.34);
}
.message-options-open .chat-view .messages[data-real-chat] .bubble.menu-open {
  z-index: 2;
}
.message-options-open .message-actions {
  z-index: 55 !important;
}
.message-actions:has(.message-action-list.show-secondary) .reaction-bar {
  display: none !important;
}
@media (max-width: 760px) {
  .message-options-open .bubble.menu-open .message-actions {
    display: flex !important;
    flex-direction: column;
  }
  .message-options-open .message-action-list {
    min-height: 0;
    overflow-y: auto !important;
  }
  .message-options-open .secondary-message-actions button {
    min-height: 42px;
  }
}
@media (max-width: 760px) {
  .message-action-list.show-secondary .secondary-message-actions button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
  }
  .message-action-list.show-secondary {
    overflow: hidden !important;
  }
}
.chat-contact-button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: start;
}
.chat-contact-button .chat-avatar {
  flex: none;
}
.contact-info-page {
  max-width: 760px;
  margin: auto;
  padding-bottom: 110px;
}
.contact-info-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-info-head h1 {
  font-size: 1.25rem;
}
.contact-hero {
  text-align: center;
  padding: 20px 0;
}
.contact-hero > img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.contact-hero h2 {
  margin: 12px 0 4px;
  font-size: 1.6rem;
}
.contact-hero > a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  direction: ltr;
}
.contact-hero > span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 5px;
}
.contact-hero > span.online {
  color: #22c55e;
}
.contact-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 430px;
  margin: 18px auto 0;
}
.contact-quick-actions button {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--primary);
  padding: 11px;
  cursor: pointer;
}
.contact-quick-actions b {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.shared-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
}
.shared-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shared-title h2 {
  font-size: 1.05rem;
}
.shared-title span {
  color: var(--muted);
}
.shared-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 12px 0;
}
.shared-tabs button {
  border: 0;
  border-radius: 11px;
  padding: 9px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.shared-tabs button.active {
  background: var(--primary);
  color: #fff;
}
.shared-panel {
  display: none;
}
.shared-panel.active {
  display: block;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.media-grid div {
  aspect-ratio: 1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  font-size: 2.2rem;
}
.shared-panel article,
.shared-panel > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.shared-panel article > span,
.shared-panel > a > span {
  font-size: 1.5rem;
}
.shared-panel strong,
.shared-panel small {
  display: block;
}
.shared-panel small {
  color: var(--muted);
  margin-top: 3px;
}
.app-profile-picture {
  overflow: hidden;
}
.app-profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand .app-profile-picture img {
  border-radius: 12px;
}
.avatar-button.app-profile-picture img {
  border-radius: 50%;
}
.profile-photo-editor > small {
  display: block;
  margin-top: 4px;
}
.profile-photo-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}
.profile-photo-thumb,
.add-profile-photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 17px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg);
}
.profile-photo-thumb:first-child {
  border-color: var(--primary);
}
.profile-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo-thumb b {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 0.7rem;
}
.profile-photo-thumb button {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  cursor: pointer;
}
.add-profile-photo {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--primary);
  font-size: 1.5rem;
  cursor: pointer;
}
.add-profile-photo small {
  display: block;
  font-size: 0.68rem;
}
.profile-rotation {
  max-width: 620px;
  margin: 0 auto 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.profile-rotation > strong {
  display: block;
  margin-bottom: 10px;
}
.profile-rotation label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.profile-rotation select {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px;
  background: var(--bg);
  color: var(--text);
}
.app-profile-picture {
  padding: 0 !important;
}
.app-profile-picture:has(img) {
  background: transparent !important;
  border: 0 !important;
}
.app-profile-picture:not(:has(img)) {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.empty-avatar {
  font-style: normal;
  font-size: 1.2rem;
}
.empty-profile-photo {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 3rem;
}
.settings-profile-photo .empty-profile-photo {
  font-size: 1.8rem;
}
.profile-photo-editor > button:first-child:has(img) {
  background: transparent;
}
.create-account-link {
  display: block;
  width: 100%;
  border: 1px solid var(--primary);
  border-radius: 13px;
  background: transparent;
  color: var(--primary);
  padding: 11px;
  font-weight: 800;
  cursor: pointer;
}
.signup-card {
  position: relative;
}
.signup-back {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.gender-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 4px 0;
}
.gender-choice legend {
  grid-column: 1/-1;
  font-weight: 800;
  margin-bottom: 8px;
}
.gender-choice label {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
}
.gender-choice input {
  position: absolute;
  opacity: 0;
}
.gender-choice label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.gender-choice img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  margin-bottom: 7px;
}
.gender-choice small {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}
@media (max-width: 450px) {
  .gender-choice {
    grid-template-columns: 1fr;
  }
  .signup-card {
    padding-top: 65px;
  }
}
.ui-icon {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item > .ui-icon {
  width: 23px;
  height: 23px;
}
.market-button span .ui-icon {
  width: 25px;
  height: 25px;
}
.settings-icon {
  display: grid;
  place-items: center;
}
.settings-icon .ui-icon {
  width: 23px;
  height: 23px;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .nav-item:hover .ui-icon,
  :where(html:not(.touch-input)) .settings-menu-row:hover .ui-icon {
    stroke-width: 2.2;
  }
}
.settings-profile-photo.app-profile-picture {
  border-radius: 50% !important;
  background: var(--primary-soft) !important;
  border: 2px solid var(--border) !important;
  padding: 2px !important;
  overflow: hidden;
}
.settings-profile-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.settings-profile-photo .empty-profile-photo {
  border-radius: 50%;
}
.identity-actions button {
  display: grid;
  place-items: center;
}
.identity-actions .ui-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .identity-actions button:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
  }
}

.call-actions button,
.voice-button {
  display: grid;
  place-items: center;
}
.call-actions .ui-icon {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}
.voice-button .ui-icon {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .call-actions button:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    transform: translateY(-1px);
  }
}

.profile-phone-control {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(120px, 1fr);
  gap: 8px;
  direction: ltr;
}
.profile-phone-control select,
.profile-phone-control input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  padding: 10px;
}
.profile-phone-control input {
  text-align: start;
}
.profile-phone-control select {
  cursor: pointer;
}
@media (max-width: 520px) {
  .profile-phone-field {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding-block: 10px;
  }
  .profile-phone-control {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.work-photo-editor {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.work-photo-preview {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 2rem;
  border: 2px solid var(--border);
}
.work-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-photo-editor strong,
.work-photo-editor small {
  display: block;
}
.work-photo-editor small {
  color: var(--muted);
  margin: 4px 0 9px;
}
.work-photo-editor button {
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  padding: 7px 11px;
  cursor: pointer;
}
.publishing-identity {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--bg);
}
.publishing-identity > strong {
  display: block;
  margin-bottom: 11px;
}
.publish-work-photo {
  width: 38px;
  height: 38px;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  flex: none;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.publish-work-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 520px) {
  .work-photo-editor {
    align-items: flex-start;
  }
  .work-photo-preview {
    width: 70px;
    height: 70px;
  }
}

.identity-required-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--primary-soft);
}
.identity-required-note > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}
.identity-required-note strong,
.identity-required-note small {
  display: block;
}
.identity-required-note small {
  color: var(--muted);
  margin-top: 3px;
}

.new-chat-action-sheet {
  max-height: min(86dvh, 760px);
  overflow: auto;
}
.group-members > strong {
  display: block;
  margin-bottom: 9px;
}
.group-member-list {
  display: grid;
  gap: 7px;
  max-height: 310px;
  overflow: auto;
  padding: 2px;
}
.group-member-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}
.group-member-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.group-member-option > span:nth-of-type(2) {
  flex: 1;
}
.group-member-option strong,
.group-member-option small {
  display: block;
}
.group-member-option small {
  color: var(--muted);
  margin-top: 3px;
}
.group-member-option > b {
  display: none;
  color: var(--primary);
}
.group-member-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.group-member-option:has(input:checked) > b {
  display: block;
}

/* Keep live setup in one scroll container so no empty panel appears below it. */
.sheet:has(.live-setup-sheet) {
  overflow: clip !important;
  contain: paint;
}
.sheet:has(.live-setup-sheet) > #create-form-root {
  height: auto;
  max-height: 92dvh;
  overflow: clip;
}
.live-setup-sheet {
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  display: block;
}
.live-setup-sheet form {
  height: max-content !important;
  margin: 0;
  padding-bottom: 0;
}

.friends-identity-note {
  display: none;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--muted);
}
.live-identity-section.friends-mode .friends-identity-note {
  display: block;
}
.live-identity-section.friends-mode .live-identity-options label:first-child {
  display: none;
}
.live-identity-section.friends-mode .live-identity-options {
  grid-template-columns: 1fr;
}

.voice-button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.voice-button:active {
  transform: scale(0.92);
}
.voice-locked-hint {
  display: none;
}
.composer.voice-locked .voice-hold-hint {
  display: none;
}
.composer.voice-locked .voice-locked-hint {
  display: block !important;
  color: var(--primary);
  font-weight: 800;
}
.composer.recording:not(.voice-locked) #send-voice {
  display: none;
}
.audio-speed {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  min-width: 38px;
  padding: 5px 7px;
  font-weight: 800;
  cursor: pointer;
}
.voice-message .audio-play {
  font-size: 0.9rem;
}
.voice-recorder time {
  font-variant-numeric: tabular-nums;
}

.message-action-list .action-ui-icon {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}
.reaction-bar .action-ui-icon {
  width: 20px;
  height: 20px;
}
.message-action-list button > span:has(.action-ui-icon) {
  display: grid;
  place-items: center;
}

.camera-button {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
}
.camera-button .ui-icon {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .camera-button:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
  }
}
.composer.recording .camera-button {
  display: none !important;
}
@media (max-width: 520px) {
  .camera-button {
    width: 42px;
    height: 42px;
  }
}

#captured-photo-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0f172a;
}
.chat-camera-sheet [hidden] {
  display: none !important;
}
.review-actions {
  animation: fade 0.18s ease;
}

.attachment-menu {
  width: min(440px, calc(100vw - 28px));
  grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
  gap: 13px !important;
  padding: 18px !important;
  border-radius: 24px !important;
}
.composer-tools.open .attachment-menu {
  display: grid !important;
}
.attachment-menu button {
  display: grid !important;
  justify-items: center;
  gap: 8px !important;
  padding: 4px !important;
  text-align: center !important;
  font-weight: 500;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .attachment-menu button:hover {
    background: transparent !important;
  }
}
.attachment-menu .attachment-icon {
  width: 66px !important;
  height: 66px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.attachment-icon .ui-icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}
.attachment-icon.gallery {
  color: #1683f3;
}
.attachment-icon.camera {
  color: #334155;
}
.attachment-icon.location {
  color: #10b981;
}
.attachment-icon.contact {
  color: #64748b;
}
.attachment-icon.document {
  color: #0ea5e9;
}
.attachment-icon.poll {
  color: #f5b82e;
}
.attachment-icon.event {
  color: #e80046;
}
.attachment-menu b {
  font-weight: 600;
  color: var(--text);
  font-size: 0.83rem;
}
.photo-review {
  margin-top: 14px;
}
.photo-edit-toolbar {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}
.photo-edit-toolbar button {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 72%, transparent);
  color: #fff;
  cursor: pointer;
}
.photo-edit-toolbar button.active {
  background: var(--primary);
}
.photo-edit-toolbar .ui-icon {
  width: 22px;
  height: 22px;
}
.photo-caption {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  padding: 0 13px;
  margin-bottom: 11px;
}
.photo-caption .ui-icon {
  width: 20px;
  height: 20px;
}
.photo-caption input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 2px;
}
.photo-edit-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  font-size: 4rem;
  text-shadow: 0 3px 12px #000;
}
.photo-edit-overlay.drawn {
  font-size: 7rem;
  color: #ef4444;
  transform: rotate(-18deg);
}
.image-caption {
  display: block;
  margin-top: 7px;
}
.captured-photo + .image-caption {
  max-width: 280px;
}
@media (max-width: 520px) {
  .attachment-menu {
    grid-template-columns: repeat(4, minmax(58px, 1fr)) !important;
    gap: 10px !important;
  }
  .attachment-menu .attachment-icon {
    width: 56px !important;
    height: 56px;
  }
  .attachment-icon .ui-icon {
    width: 29px;
    height: 29px;
  }
}

body.chat-open .bottom-nav {
  display: none;
}
body.chat-open .app-shell {
  padding-bottom: 0;
}
body.chat-open .chat-view {
  padding-bottom: 88px;
  min-height: calc(100dvh - 72px);
}
body.chat-open .brand,
body.chat-open .top-actions {
  display: none;
}
/* «مراسلة نفسك» has no calls. */
body.self-chat-open .topbar > .call-actions {
  display: none !important;
}
body.chat-open .topbar > .call-actions {
  margin-left: 0;
  margin-right: auto;
  direction: ltr;
}
html[dir="ltr"] body.chat-open .topbar > .call-actions {
  margin-left: auto;
  margin-right: 0;
}
html[dir="ltr"] body.chat-open .topbar > .chat-header,
html[dir="ltr"] body.chat-open .topbar > .chat-header .chat-contact-button {
  direction: ltr;
  text-align: left;
}
body.chat-open .topbar > .call-actions button {
  background: transparent;
}
body.chat-open .composer {
  position: fixed;
  z-index: 40;
  inset-inline: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(16px);
  align-items: center;
  gap: 8px;
}
.chat-view .chat-header {
  direction: rtl;
  position: relative;
  justify-content: flex-start;
}
.chat-view .chat-contact-button {
  direction: rtl;
  text-align: right;
}
.chat-view .chat-back {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
}
.chat-view .chat-back .ui-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-back-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--bg);
  font-size: 0.68rem;
  line-height: 1;
}
.chat-recipient-avatar {
  overflow: hidden;
  border-radius: 50%;
}
.chat-recipient-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.chat-view .chat-contact-button .chat-person {
  display: grid;
}
.chat-view .chat-contact-button .chat-person strong {
  font-size: 1rem;
}
body.chat-open .composer-tools > button,
body.chat-open .camera-button,
body.chat-open .voice-button,
body.chat-open .send-message-button {
  width: 44px;
  height: 44px;
}
body.chat-open .composer-input-wrap {
  min-width: 0;
  height: 46px;
}
body.chat-open .composer-input-wrap input {
  min-width: 0;
}
body.chat-open .composer-tools,
body.chat-open .camera-button,
body.chat-open .voice-button,
body.chat-open .send-message-button {
  flex: none;
}
@media (max-width: 520px) {
  body.chat-open .topbar {
    height: 62px;
  }
  body.chat-open .chat-view {
    padding-bottom: 82px;
    min-height: calc(100dvh - 62px);
  }
  body.chat-open .composer {
    gap: 5px;
    padding-inline: 8px;
  }
  body.chat-open .composer-tools > button,
  body.chat-open .camera-button,
  body.chat-open .voice-button,
  body.chat-open .send-message-button {
    width: 40px;
    height: 40px;
  }
  body.chat-open .composer-input-wrap {
    height: 42px;
  }
  .composer-input-wrap > button {
    width: 36px;
    height: 36px;
  }
}
body.chat-open .topbar > .chat-header {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
}
body.chat-open .topbar > .chat-header .chat-contact-button {
  direction: rtl;
  text-align: right;
}
body.chat-open .topbar > .chat-header .chat-recipient-avatar {
  width: 46px;
  height: 46px;
}
body.chat-open .topbar > .chat-header .chat-back {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
}
body.chat-open .topbar > .chat-header .chat-back .ui-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.chat-open .topbar > .chat-header .chat-person {
  display: grid;
}
body.chat-open .topbar > .chat-header .chat-person strong {
  font-size: 1rem;
}
@media (max-width: 520px) {
  body.chat-open .topbar {
    padding-inline: 10px;
  }
  body.chat-open .topbar > .chat-header {
    gap: 6px;
  }
  body.chat-open .topbar > .chat-header .chat-recipient-avatar {
    width: 42px;
    height: 42px;
  }
}
.listing-photo-trigger {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 5px;
  color: var(--text);
  cursor: pointer;
}
.listing-photo-trigger span {
  font-size: 2rem;
  color: var(--primary);
}
.listing-photo-trigger strong,
.listing-photo-trigger small {
  display: block;
}
.listing-photo-trigger small {
  color: var(--muted);
}
.listing-photo-previews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.listing-photo-previews:empty {
  display: none;
}
.listing-photo-previews figure {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  background: var(--bg);
}
.listing-photo-previews img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.listing-photo-previews button {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 520px) {
  .listing-photo-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.browse-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.browse-mode-options button {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 15px;
  background: var(--bg);
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .browse-mode-options button:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
  }
}
.browse-mode-options button > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--surface);
  font-size: 1.45rem;
}
.browse-mode-options strong,
.browse-mode-options small {
  display: block;
}
.browse-mode-options small {
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 520px) {
  .browse-mode-options {
    grid-template-columns: 1fr;
  }
}
.sheet:has(.listing-form-sheet) {
  max-height: 92dvh;
  overflow: hidden;
}
.listing-form-sheet {
  max-height: 92dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.listing-form-sheet .listing-country,
.listing-form-sheet .listing-region,
.listing-form-sheet .listing-currency {
  cursor: pointer;
}
.listing-form-sheet .listing-currency {
  direction: ltr;
  text-align: start;
}
body.i18n-loading .app-shell,
body.i18n-loading dialog[open] > * {
  visibility: hidden;
}
body.i18n-loading::after {
  content: "";
  position: fixed;
  inset: 50% auto auto 50%;
  width: 34px;
  height: 34px;
  margin: -17px;
  border: 4px solid color-mix(in srgb, var(--primary, #2563eb) 22%, transparent);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: i18n-spin 0.75s linear infinite;
  z-index: 10000;
}
@keyframes i18n-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Direction-aware arrows: back arrows are written for RTL, chevrons for LTR */
html[dir="rtl"] .back-chevron {
  transform: scaleX(-1);
}
.dir-chevron {
  display: inline-block;
}
html[dir="rtl"] .dir-chevron {
  transform: scaleX(-1);
}
/* Topbar without brand; back button on the profile page; profile photo with add badge */
.topbar > .top-actions {
  margin-inline-start: auto;
}
.topbar > .topbar-back {
  flex: none;
}
.profile-photo-editor > button:first-child {
  overflow: visible;
  background: transparent;
}
.profile-photo-editor > button:first-child > img {
  border-radius: 50%;
}
.profile-photo-editor > button:first-child > i {
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.app-profile-picture img {
  border-radius: 50%;
}
/* Settings header in the WhatsApp style: search button, QR/edit pill, centred profile */
.settings-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.settings-round-button,
.settings-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.settings-round-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
}
.settings-pill {
  display: flex;
  gap: 2px;
  border-radius: 999px;
  padding: 4px;
}
.settings-pill button {
  width: 46px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .settings-pill button:hover,
  :where(html:not(.touch-input)) .settings-round-button:hover {
    background: var(--primary-soft);
  }
}
.settings-topbar .ui-icon {
  width: 23px;
  height: 23px;
}
.settings-search[hidden],
.settings-search-results[hidden],
.settings-search-empty[hidden],
.settings-hub .settings-group[hidden],
.settings-hub .logout-button[hidden],
.settings-hub .settings-menu-row[hidden] {
  display: none;
}
.settings-search .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.settings-search button {
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.settings-search-results {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 4px 16px;
  margin-bottom: 16px;
}
.settings-search-empty {
  text-align: center;
  margin: 24px 0;
}
.settings-hub.is-searching .settings-profile-hero {
  display: none;
}
.settings-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 4px 0 26px;
}
.settings-about-bubble {
  position: relative;
  max-width: min(320px, 90%);
  background: var(--surface);
  color: var(--text);
  border-radius: 22px;
  padding: 10px 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1);
  font-size: 0.92rem;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.settings-about-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
}
.settings-profile-hero .settings-profile-photo {
  width: 150px;
  height: 150px;
}
.settings-profile-hero .settings-identity-copy {
  flex: none;
  text-align: center;
  margin-top: 14px;
}
.settings-profile-hero .settings-identity-copy h2 {
  font-size: 1.6rem;
}
.search-highlight {
  animation: settings-flash 1.6s ease;
}
@keyframes settings-flash {
  0%,
  60% {
    background: var(--primary-soft);
  }
  100% {
    background: transparent;
  }
}
/* Account QR dialog */
.qr-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.qr-tabs button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  background: none;
  padding: 10px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.qr-tabs button.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.qr-panel[hidden] {
  display: none;
}
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
}
.qr-card-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.qr-card span {
  color: var(--muted);
}
.account-qr-image {
  width: min(220px, 70vw);
  height: auto;
  margin-top: 12px;
  image-rendering: pixelated;
  background: #fff;
  border-radius: 12px;
}
.qr-hint,
.qr-scan-status {
  text-align: center;
  margin: 14px 0;
}
.qr-scan-preview {
  position: relative;
}
.qr-scan-frame {
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.qr-manual {
  display: grid;
  gap: 12px;
}
@media (max-width: 520px) {
  .settings-profile-hero .settings-profile-photo {
    width: 124px;
    height: 124px;
  }
}
/* The top bar is only used as the chat header; hidden everywhere else */
body:not(.chat-open) .topbar {
  display: none;
}
/* Chats header in the WhatsApp style: menu, camera, new chat, large title, filled search */
.chats-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.chats-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chats-topbar .chat-tools > button.chats-round-button,
.chats-round-button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-size: 1rem;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .chats-topbar .chat-tools > button.chats-round-button:hover,
  :where(html:not(.touch-input)) .chats-round-button:hover {
    background: var(--primary-soft);
    color: var(--text);
  }
}
.chats-new-button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .chats-new-button:hover {
    background: var(--primary-dark);
  }
}
.chats-topbar .ui-icon {
  width: 24px;
  height: 24px;
}
.chats-new-button .ui-icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
}
.chats-topbar .chat-overflow {
  top: 58px;
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.chats-title {
  font-size: 2.3rem;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--text);
}
.chats-page .chat-search {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  border-color: transparent;
}
.chats-page .chat-search .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex: none;
}
.photo-recipients {
  max-height: 60vh;
  overflow: auto;
}
.photo-recipients .forward-contact {
  width: 100%;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}
/* iOS-style back button: thin chevron in a light gray capsule, unread count beside it */
.back,
.signup-back,
.chat-view .chat-back,
body.chat-open .topbar > .chat-header .chat-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 11%, var(--surface));
  color: var(--text);
  cursor: pointer;
  flex: none;
  width: auto;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .back:hover,
  :where(html:not(.touch-input)) .signup-back:hover {
    background: color-mix(in srgb, var(--text) 13%, var(--surface));
  }
}
.back .back-chevron,
body.chat-open .topbar > .chat-header .chat-back .back-chevron,
.chat-view .chat-back .back-chevron {
  flex: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  stroke-width: 2.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-back .chat-back-count {
  position: static;
  min-width: 0;
  height: auto;
  padding: 0 2px 0 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
}
.dir-chevron .ui-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
/* Invite friends page */
.invite-page {
  max-width: 760px;
  margin: auto;
  padding-bottom: 110px;
}
.invite-code-card {
  background: linear-gradient(140deg, var(--primary), #7c3aed);
  color: #fff;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.invite-code-card small {
  opacity: 0.85;
  font-weight: 600;
}
.invite-code {
  display: block;
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  font-family: Consolas, "Courier New", monospace;
  margin: 6px 0 4px;
}
.invite-code-card p {
  margin: 0 0 14px;
  font-size: 0.85rem;
  opacity: 0.85;
}
.invite-code-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.invite-code-actions button {
  flex: 1;
  max-width: 160px;
  border: 0;
  border-radius: 14px;
  padding: 11px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.invite-code-actions button:first-child {
  background: #fff;
  color: var(--primary);
}
.invite-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}
.invite-stats div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 6px;
  text-align: center;
}
.invite-stats strong {
  display: block;
  font-size: 1.45rem;
  color: var(--primary);
}
.invite-stats small {
  color: var(--muted);
  font-size: 0.78rem;
}
.invite-pick,
.invite-page [data-invite-send] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.invite-pick .ui-icon,
.invite-page [data-invite-send] .ui-icon {
  width: 22px;
  height: 22px;
}
.invite-note {
  font-size: 0.8rem;
  margin: 8px 4px 12px;
  line-height: 1.5;
}
.invite-manual {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.invite-manual input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 11px;
  background: var(--surface);
  color: inherit;
  outline-color: var(--primary);
}
.invite-manual input[name="phone"] {
  flex: 1.3;
}
.invite-manual .secondary-button {
  padding: 0 16px;
  font-size: 1.3rem;
}
.invite-section {
  margin-top: 20px;
}
.invite-section h2 {
  font-size: 1rem;
  margin: 0 0 10px;
}
.invite-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.link-button {
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  padding: 4px;
}
.invite-list {
  padding: 0 12px;
}
.invite-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.invite-person:last-child {
  border-bottom: 0;
}
.invite-person .chat-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  font-size: 1.05rem;
}
.invite-person-copy {
  flex: 1;
  min-width: 0;
}
.invite-person-copy strong,
.invite-person-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-person-copy small {
  color: var(--muted);
  text-align: left;
}
html[dir="rtl"] .invite-person-copy small {
  text-align: right;
}
.invite-remove,
.invite-resend {
  border: 0;
  background: var(--bg);
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  display: grid;
  place-items: center;
}
.invite-resend {
  color: var(--primary);
  background: var(--primary-soft);
}
.invite-resend .ui-icon {
  width: 18px;
  height: 18px;
}
.invite-status {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 4px 9px;
  flex: none;
}
.invite-status.joined {
  color: #15803d;
  background: #dcfce7;
}
.invite-message {
  margin: 14px 0;
}
.invite-message textarea {
  min-height: 110px;
  line-height: 1.5;
}
.invite-steps {
  margin: 0;
  padding: 14px 16px;
  padding-inline-start: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  line-height: 1.9;
  color: var(--muted);
}
.field-hint {
  color: var(--muted);
  font-size: 0.78rem;
}
/* Privacy: last seen and online */
.last-seen-page,
.last-seen-except-page {
  max-width: 760px;
  margin: auto;
  padding-bottom: 110px;
}
.privacy-label,
.identity-privacy-page .privacy-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  margin: 22px 2px 4px;
}
.identity-privacy-page .privacy-label {
  margin: 4px 2px 10px;
}
.privacy-radio {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 17px 2px;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--text);
}
.privacy-radio input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--muted);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  background: transparent;
}
.privacy-radio input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 0.12s;
}
.privacy-radio input:checked {
  border-color: var(--primary);
}
.privacy-radio input:checked::before {
  transform: scale(1);
}
.privacy-radio input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.privacy-radio-copy {
  display: grid;
  gap: 3px;
}
.privacy-radio-copy small {
  color: var(--muted);
  font-size: 0.82rem;
}
.privacy-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 14px 0 4px;
}
.privacy-footnote {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 22px 2px;
}
.privacy-footnote b {
  font-weight: 700;
}
.except-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 15px;
  margin-bottom: 14px;
  color: var(--muted);
}
.except-search .ui-icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.except-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  padding: 12px 0;
  outline: none;
}
.except-list {
  padding: 0 12px;
}
.except-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
}
.except-contact:last-child {
  border-bottom: 0;
}
.except-contact[hidden] {
  display: none;
}
.except-contact .chat-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 1rem;
}
.except-contact-copy {
  flex: 1;
  min-width: 0;
}
.except-contact-copy strong,
.except-contact-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.except-contact-copy small {
  color: var(--muted);
  text-align: left;
}
html[dir="rtl"] .except-contact-copy small {
  text-align: right;
}
.except-contact input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.except-mark {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.except-contact input:checked + .except-mark {
  background: var(--danger);
  border-color: var(--danger);
}
.except-contact input:checked + .except-mark::before {
  content: "";
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}
.except-contact input:focus-visible + .except-mark {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.except-empty {
  text-align: center;
}
.except-done {
  position: sticky;
  bottom: calc(84px + env(safe-area-inset-bottom));
  margin-top: 16px;
  box-shadow: var(--shadow);
}
/* Privacy: blocked contacts */
.blocked-page,
.blocked-add-page {
  max-width: 760px;
  margin: auto;
  padding-bottom: 110px;
}
.blocked-list {
  padding: 0 12px;
}
.blocked-add-row .settings-icon,
.blocked-add-row strong {
  color: var(--primary);
}
.blocked-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: start;
  font: inherit;
}
.blocked-contact:last-child {
  border-bottom: 0;
}
.blocked-contact[hidden] {
  display: none;
}
button.blocked-contact {
  cursor: pointer;
}
.blocked-contact .chat-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 1rem;
}
.blocked-copy {
  flex: 1;
  min-width: 0;
}
.blocked-copy strong,
.blocked-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blocked-copy small {
  color: var(--muted);
  text-align: left;
}
html[dir="rtl"] .blocked-copy small {
  text-align: right;
}
.blocked-unblock {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}
.blocked-empty {
  text-align: center;
  margin: 18px 0;
}
.block-confirm p {
  line-height: 1.6;
  margin: 10px 0 18px;
}
.block-confirm-actions {
  display: grid;
  gap: 10px;
}
.primary-button.block-danger {
  background: var(--danger);
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .primary-button.block-danger:hover {
    background: #b91c1c;
  }
}
.delete-account-link strong,
.delete-account-link > span:first-child {
  color: var(--danger);
}
.delete-account-list {
  margin: 0 0 14px;
  padding-inline-start: 20px;
  display: grid;
  gap: 6px;
  line-height: 1.5;
}
/* what stays with the other side, and a deletion stopped by unfinished purchases or a live (migration 110) */
.delete-account-kept {
  margin: -4px 0 14px;
  font-size: 13px;
  line-height: 1.5;
}
.delete-blocked-title {
  margin: 4px 0 8px;
  font-size: 17px;
}
.legal-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 13px;
}
.legal-links a {
  color: var(--primary);
}
.legal-consent {
  text-align: center;
  font-size: 12.5px;
  margin: 12px 0 0;
}
.e2e-notice {
  max-width: 320px;
  margin: 10px auto 14px;
  padding: 7px 12px;
  border-radius: 9px;
  background: #fdf4c5;
  color: #54471c;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  direction: var(--ui-dir, inherit);
}
body.dark .e2e-notice {
  background: #2f2a17;
  color: #e7d9a3;
}
.contact-block-group {
  max-width: 760px;
  margin: 18px auto 0;
}
.contact-block-row,
.contact-block-row .settings-icon {
  color: var(--danger);
}
.contact-block-row {
  border-bottom: 0;
}
.blocked-composer {
  justify-content: center;
}
.blocked-composer button {
  flex: 1;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
}
/* Notifications */
.notifications-page {
  max-width: 760px;
  margin: auto;
  padding-bottom: 110px;
}
.notify-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 12px 2px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: start;
  font: inherit;
  cursor: pointer;
}
.notify-icon {
  flex: none;
  width: 26px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.notify-icon .ui-icon {
  width: 24px;
  height: 24px;
}
.notify-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.notify-copy strong {
  font-weight: 500;
  font-size: 1.02rem;
}
.notify-copy small {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.notify-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 2px;
  color: var(--text);
}
.notify-test-button {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-weight: 700;
  padding: 9px 20px;
  cursor: pointer;
}
.notify-warning {
  color: var(--danger);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 4px 2px;
}
/* Reactions hang under the bubble's outer corner, like WhatsApp, so they never cover the message. */
.bubble.has-reaction {
  margin-bottom: 22px;
}
.message-reaction {
  position: absolute;
  z-index: 2;
  bottom: -23px;
  inset-inline-start: auto;
  inset-inline-end: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 7px;
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(11, 20, 26, 0.2),
    0 2px 8px rgba(11, 20, 26, 0.1);
  font-size: 1.05rem;
  line-height: 1;
}
.bubble.them .message-reaction {
  inset-inline-end: auto;
  inset-inline-start: 10px;
}
.message-reaction .inline-emoji {
  width: 19px;
  height: 19px;
  display: block;
}
.reaction-bar .inline-emoji {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.12s;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .reaction-bar button:hover .inline-emoji {
    transform: scale(1.15);
  }
}
/* The phone message sheet declared left:50% before inset-inline-*:auto, which reset it; center it again. */
@media (max-width: 760px) {
  .bubble.menu-open .message-actions {
    left: 50% !important;
    right: auto !important;
  }
}
.message-actions .reaction-bar button {
  color: var(--muted) !important;
}
.reaction-picker-sheet .emoji-picker {
  display: flex !important;
  flex-direction: column;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  height: min(460px, 62dvh) !important;
  margin-top: 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.reaction-picker-sheet .emoji-media-tabs {
  display: none !important;
}
/* Sent files open when tapped. */
.attachment-message[data-media] {
  cursor: pointer;
}
/* The back button of the sign-up and verification cards sat on top of the title on wide screens. */
.signup-card {
  padding-top: 65px;
}
/* Phone verification at sign-up (verify-phone.js): WhatsApp / Telegram buttons and a preview of their chat. */
.verify-card > p {
  margin-bottom: 18px;
}
.verify-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
}
.verify-number strong {
  font-size: 1.06rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.verify-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.verify-steps li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.verify-steps b {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.85rem;
}
.verify-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 15px;
  padding: 14px 18px;
  margin-bottom: 10px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  cursor: pointer;
  transition: filter 0.15s;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .verify-button:hover {
    filter: brightness(0.93);
  }
}
.verify-button.whatsapp {
  background: #1daa61;
}
.verify-button.telegram {
  background: #229ed9;
}
.verify-button .ui-icon {
  width: 26px;
  height: 26px;
}
.verify-button .filled {
  fill: currentColor;
  stroke: none;
}
.verify-card .verify-timer {
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.verify-sms-form {
  display: grid;
  gap: 12px;
}
.verify-code-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.verify-code-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.verify-card .verify-resend {
  display: block;
  margin: 10px auto 0;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.verify-card .verify-resend:disabled {
  color: var(--muted);
  cursor: default;
}
.verify-card .primary-button[data-verify-resend]:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: default;
}
.verify-card .verify-expired {
  margin: 0 0 12px;
  text-align: center;
  color: var(--danger);
  font-weight: 700;
}
.verify-card .verify-demo {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #f59e0b 14%, var(--surface));
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.55;
}
.verify-done {
  text-align: center;
}
.verify-done-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1daa61;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
}
.verify-card .verify-number-line {
  margin: 0 0 20px;
  font-size: 1.1rem;
  font-weight: 700;
}
.sheet:has(.verify-sim) {
  max-width: 420px;
  overflow: hidden;
}
.verify-sim {
  display: flex;
  flex-direction: column;
  height: min(640px, 86dvh);
  background: #efeae2;
  color: #111b21;
}
.verify-sim-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #008069;
  color: #fff;
}
.verify-sim-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
}
.verify-sim-title {
  flex: 1;
  display: grid;
  line-height: 1.25;
}
.verify-sim-title small {
  opacity: 0.85;
  font-size: 0.75rem;
}
.verify-sim-head .close {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.verify-sim-hint {
  margin: 10px 12px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff8d6;
  color: #5b4a00;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}
.verify-sim-chat {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
}
.verify-sim-bubble {
  max-width: 82%;
  padding: 7px 10px 5px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  animation: verify-in 0.2s ease-out;
}
.verify-sim-bubble.me {
  align-self: flex-end;
  background: #d9fdd3;
}
.verify-sim-bubble.them {
  align-self: flex-start;
}
.verify-sim-bubble time {
  display: block;
  margin-top: 2px;
  text-align: end;
  font-size: 0.68rem;
  color: #667781;
}
.verify-sim-bubble time b {
  color: #53bdeb;
  font-weight: 400;
}
.verify-sim-contact {
  display: inline-block;
  font-weight: 700;
}
.verify-sim-bottom {
  display: flex;
  padding: 8px 10px 12px;
}
.verify-sim-bottom:empty {
  display: none;
}
.verify-sim-composer {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.verify-sim-draft {
  flex: 1;
  padding: 10px 14px;
  border-radius: 22px;
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.4;
}
.verify-sim-send {
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #00a884;
  color: #fff;
  cursor: pointer;
  animation: verify-pulse 1.6s ease-in-out infinite;
}
.verify-sim-send .ui-icon {
  width: 22px;
  height: 22px;
}
[dir="rtl"] .verify-sim-send .ui-icon {
  transform: scaleX(-1);
}
.verify-sim-action {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 13px;
  background: #fff;
  color: #008069;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.verify-sim.telegram {
  background: #cfe0e8;
}
.verify-sim.telegram .verify-sim-head {
  background: #2a8bc7;
}
.verify-sim.telegram .verify-sim-bubble {
  border-radius: 14px;
}
.verify-sim.telegram .verify-sim-bubble.me {
  background: #effdde;
}
.verify-sim.telegram .verify-sim-bubble time b {
  color: #4fae4e;
}
.verify-sim.telegram .verify-sim-action {
  color: #2a8bc7;
}
body.dark .verify-sim {
  background: #0b141a;
  color: #e9edef;
}
body.dark .verify-sim-head {
  background: #202c33;
}
body.dark .verify-sim-hint {
  background: #3b3420;
  color: #f5e3a3;
}
body.dark .verify-sim-bubble {
  background: #202c33;
  box-shadow: none;
}
body.dark .verify-sim-bubble.me {
  background: #005c4b;
}
body.dark .verify-sim-bubble time {
  color: #8696a0;
}
body.dark .verify-sim-draft {
  background: #2a3942;
}
body.dark .verify-sim-action {
  background: #202c33;
  color: #00a884;
}
body.dark .verify-sim.telegram {
  background: #0e1621;
}
body.dark .verify-sim.telegram .verify-sim-head {
  background: #17212b;
}
body.dark .verify-sim.telegram .verify-sim-bubble {
  background: #182533;
}
body.dark .verify-sim.telegram .verify-sim-bubble.me {
  background: #2b5278;
}
body.dark .verify-sim.telegram .verify-sim-action {
  background: #17212b;
  color: #6ab3f3;
}
@keyframes verify-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(0, 168, 132, 0.25);
  }
}
@keyframes verify-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .verify-sim-send,
  .verify-sim-bubble {
    animation: none;
  }
}
/* Country and dialing code with search (dial-picker.js) instead of a long select. */
.dial-picker-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  padding: 10px;
  font: inherit;
  cursor: pointer;
  text-align: start;
}
.dial-picker-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dial-picker-button .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.sheet:has(.dial-picker-sheet) {
  max-width: 460px;
  overflow: hidden;
}
.dial-picker-sheet {
  height: min(680px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dial-picker-sheet > .sheet-head {
  flex: none;
  margin-bottom: 12px;
}
.dial-picker-sheet .country-search {
  flex: none;
}
.dial-option-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 2px;
  scrollbar-width: thin;
}
.dial-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  padding: 12px;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .dial-option:hover {
    background: var(--bg);
  }
}
.dial-option.selected {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.dial-option b {
  flex: none;
  color: var(--muted);
  font-weight: 600;
}
.dial-option[hidden] {
  display: none;
}
/* Following on live (live.js): follow buttons, the viewer, and the following / followers page. */
.live-follow-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
}
.live-follow-summary button {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
  font: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .live-follow-summary button:hover {
    border-color: var(--primary);
  }
}
.live-follow-summary b {
  font-size: 1.25rem;
}
.live-follow-summary span {
  color: var(--muted);
  font-size: 0.9rem;
}
.live-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}
.live-tabs button {
  flex: none;
  white-space: nowrap;
}
.live-empty {
  text-align: center;
  padding: 24px 12px;
}
.live-follow-button {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.live-follow-button.following {
  background: var(--primary-soft);
  color: var(--primary);
}
.live-preview .live-follow-button {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.live-preview .live-follow-button.following {
  background: rgba(10, 18, 35, 0.62);
  color: #fff;
  box-shadow: none;
}
.live-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.sheet:has(.live-viewer) {
  max-width: 440px;
  overflow: hidden;
}
.live-viewer {
  display: flex;
  flex-direction: column;
  height: min(720px, 90dvh);
  color: #fff;
}
.live-viewer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
}
.live-viewer-head .chat-avatar {
  width: 44px;
  height: 44px;
  flex: none;
}
.live-viewer-title {
  flex: 1;
  min-width: 0;
  display: grid;
  line-height: 1.3;
}
.live-viewer-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-viewer-title small {
  opacity: 0.88;
  font-size: 0.78rem;
}
.live-viewer-head .live-follow-button {
  background: #fff;
  color: var(--primary);
}
.live-viewer-head .live-follow-button.following {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.live-viewer-head .close {
  flex: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.live-viewer-stage {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
}
.live-viewer-stage .live-avatar {
  width: 112px;
  height: 112px;
  font-size: 1.8rem;
}
.live-viewer-note {
  margin: 0;
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.9rem;
}
.live-follow-page {
  max-width: 720px;
  margin: auto;
}
.live-follow-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}
.live-follow-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  padding: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.live-follow-tabs button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.live-follow-tabs b {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.8rem;
}
.live-follow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 0;
}
.live-follow-row + .live-follow-row {
  border-top: 1px solid var(--border);
}
.live-follow-row .chat-avatar {
  width: 46px;
  height: 46px;
  flex: none;
}
.chat-avatar.live-ring {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px #dc2626;
}
.live-follow-copy {
  flex: 1;
  min-width: 110px;
  display: grid;
  gap: 2px;
}
.live-follow-copy small {
  color: var(--muted);
  font-size: 0.8rem;
}
.live-follow-copy .live-now {
  color: #dc2626;
  font-weight: 700;
}
.live-follow-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}
.live-watch-button,
.live-unfollow,
.live-remove-follower {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.live-watch-button {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.live-unfollow,
.live-remove-follower {
  color: var(--danger);
}
.live-bell {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
}
.live-bell.off {
  color: var(--muted);
}
.live-bell .ui-icon {
  width: 19px;
  height: 19px;
}
.live-follow-empty {
  text-align: center;
  padding: 28px 12px;
}

/* Real chats (scripts/real-chat.js) */
.bubble.them .message-meta {
  color: var(--muted);
}
.bubble .sender-name {
  display: block;
  margin-bottom: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}
.bubble.message-deleted .message-text {
  font-style: italic;
  opacity: 0.75;
}
.edited-mark {
  font-size: 0.66rem;
  opacity: 0.85;
  margin-inline-end: 2px;
}
.delivery.pending,
.delivery.failed {
  letter-spacing: 0;
}
.delivery.failed {
  color: #fecaca;
}
.messages-status {
  align-self: center;
  margin: 24px 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.real-contact-info .shared-content {
  display: none;
}
.real-group-avatar {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}
.chat-list .chat-row > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: none;
}
.chat-list .chat-row .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Muted and pinned chats (migration 140), like WhatsApp: small grey marks next to the unread count, which turns grey
   in a muted chat. */
.chat-row-marks {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.chat-row-marks:empty {
  display: none;
}
.chat-row-marks .ui-icon {
  width: 16px;
  height: 16px;
}
.chat-list .chat-row .badge.muted-badge {
  background: var(--muted);
}
.timer-choice b {
  color: var(--primary);
}
.mute-note {
  margin: 0 4px 12px;
  font-size: 0.88rem;
}
/* Reactions in real chats: the badge is a button that lists who reacted */
.message-reaction {
  font: inherit;
  cursor: pointer;
  gap: 2px;
}
.reaction-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-inline-start: 3px;
}
.reaction-people {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
/* Message info in a group: "Read by", "Delivered to", "Not delivered yet". */
.message-info-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 0.95rem;
}
.message-info-sheet .info-message {
  white-space: normal;
  max-height: 4.6em;
}
.reaction-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: start;
  font: inherit;
}
button.reaction-person {
  cursor: pointer;
}
.reaction-person .chat-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 1rem;
}
.reaction-person-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.reaction-person-copy small {
  color: var(--muted);
  font-size: 0.8rem;
}
.reaction-person b .inline-emoji {
  width: 26px;
  height: 26px;
  display: block;
}
/* Photos, videos, voice notes and documents in real chats (real-chat.js) */
.photo-message {
  padding: 4px 4px 6px;
}
.photo-message > .message-text {
  display: block;
  padding: 6px 8px 0;
}
.photo-message > .message-meta {
  padding-inline: 8px;
}
.real-photo {
  position: relative;
  display: block;
  width: min(260px, 64vw);
  min-height: 120px;
  max-height: 340px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.12);
  cursor: pointer;
  font: inherit;
}
.real-photo[style] {
  min-height: 0;
}
.real-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-photo.media-failed::after {
  content: "!";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--muted);
}
.real-video {
  display: grid;
  place-items: center;
  background: #0f172a;
  color: #fff;
}
.real-video-play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.25rem;
}
.real-video.loading .real-video-play {
  opacity: 0.45;
}
.real-video small {
  position: absolute;
  bottom: 8px;
  inset-inline-start: 10px;
  font-size: 0.75rem;
  opacity: 0.85;
}
.real-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.real-video .real-video-play {
  position: relative;
  z-index: 1;
}
.real-video small {
  z-index: 1;
}
.video-viewer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.voice-duration {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.bubble.them.voice-message .audio-play {
  background: var(--primary);
  color: #fff;
}
.bubble.them.voice-message .audio-wave i {
  background: var(--muted);
}
.bubble.them.voice-message .audio-speed {
  background: var(--bg);
  color: var(--text);
}
.bubble.them.attachment-message .attachment-file-icon {
  background: var(--bg);
  color: var(--primary);
}
.attachment-file-icon {
  font-size: 0.95rem;
  font-weight: 800;
}
.bubble[data-real-file] {
  cursor: pointer;
}
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070c;
  overflow: hidden;
  touch-action: none;
}
.photo-viewer img {
  max-width: 100%;
  max-height: calc(100dvh - 130px);
  object-fit: contain;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.photo-viewer-bar,
.photo-viewer-caption,
.avatar-viewer-step {
  z-index: 2;
}
.photo-viewer-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px;
}
.photo-viewer-bar button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.photo-viewer-caption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  margin: 0;
  padding: 16px 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  color: #fff;
  text-align: center;
}
/* Messages have no menu arrow: their options open with a long press or the right mouse button (app.js) */
.message-menu-button {
  display: none !important;
}
@media (hover: none) {
  .messages .bubble {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .messages .bubble .message-text.editing {
    -webkit-user-select: text;
    user-select: text;
  }
}
:where(html.touch-input) .messages .bubble {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:where(html.touch-input) .messages .bubble .message-text.editing {
  -webkit-user-select: text;
  user-select: text;
}
.messages .bubble img {
  -webkit-user-drag: none;
}
/* Deleting a message: for me / for everyone */
.delete-message-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.secondary-button.delete-for-me {
  color: var(--danger);
}
/* Market favorites: the heart on a product (red when saved) and the counted heart at the top */
.favorite {
  display: grid;
  place-items: center;
  color: #475569;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.favorite .ui-icon {
  width: 20px;
  height: 20px;
}
.favorite.liked {
  color: #ef4444;
}
.favorite.liked .ui-icon,
.market-favorites-button .ui-icon,
.favorites-empty-heart .ui-icon {
  fill: currentColor;
}
body.dark .favorite {
  background: #f8fafc;
  color: #334155;
}
body.dark .favorite.liked {
  color: #ef4444;
}
.market-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  align-self: stretch;
}
.market-favorites-button {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: #ef4444;
  cursor: pointer;
}
.market-favorites-button .ui-icon {
  width: 22px;
  height: 22px;
}
.favorites-count {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}
.market-favorites-page .product-grid {
  margin-top: 16px;
}
.favorites-empty {
  margin-top: 16px;
}
.favorites-empty-heart {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fee2e2;
  color: #ef4444;
  margin-bottom: 6px;
}
.favorites-empty-heart .ui-icon {
  width: 30px;
  height: 30px;
}
/* Storage and data (storage-data.js) */
.kinds-summary span + span::before {
  content: ", ";
}
html[dir="rtl"] .kinds-summary span + span::before {
  content: "، ";
}
.storage-usage-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 22px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  text-align: center;
}
.storage-usage-card strong {
  font-size: 2rem;
  line-height: 1.2;
}
.storage-usage-card > span {
  color: var(--muted);
}
.storage-bar {
  width: 100%;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.storage-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.storage-chat-row .chat-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  font-size: 0.95rem;
}
.settings-menu-row > b.storage-size {
  flex: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.secondary-button.storage-clear-all {
  color: var(--danger);
}
.storage-loading {
  text-align: center;
  padding: 30px 0;
}
.usage-total {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.usage-total > div {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
}
.usage-total span {
  color: var(--muted);
  font-size: 0.9rem;
}
.usage-total strong {
  font-size: 1.25rem;
}
.settings-row-copy small.usage-lines {
  display: grid;
  gap: 2px;
}
.usage-line {
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .usage-line {
  text-align: right;
}
/* Checkboxes in setting sheets (a privacy-radio row with a checkbox) */
.privacy-radio input[type="checkbox"] {
  border-radius: 6px;
}
.privacy-radio input[type="checkbox"]::before {
  width: 10px;
  height: 5px;
  border-radius: 0;
  background: none;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
}
.privacy-radio input[type="checkbox"]:checked {
  background: var(--primary);
}
.privacy-radio input[type="checkbox"]:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
/* A photo that waits for a tap before downloading (Media auto-download) */
.real-photo-download {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
}
.real-photo-download[hidden] {
  display: none;
}
.real-photo-download b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.3rem;
}
.real-photo-download small {
  font-size: 0.75rem;
}
.real-photo.loading .real-photo-download b {
  opacity: 0.45;
}
/* Replies and forwarding in real chats (real-chat.js): the quote at the top of a reply, the reply bar above the
   composer, the "Forwarded" label, swiping a message to reply and the flash of a quoted message */
.reply-quote {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 6px 10px;
  border: 0;
  border-inline-start: 4px solid var(--primary);
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: inherit;
  font: inherit;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}
.reply-quote.own-quote {
  border-inline-start-color: #0d9488;
}
.bubble.me .reply-quote {
  background: rgba(255, 255, 255, 0.17);
  border-inline-start-color: rgba(255, 255, 255, 0.9);
}
.reply-quote-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.reply-quote strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-quote.own-quote strong {
  color: #0d9488;
}
.bubble.me .reply-quote strong {
  color: #fff;
}
.reply-quote-text {
  font-size: 0.85rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.bubble.me .reply-quote-text {
  color: rgba(255, 255, 255, 0.86);
}
.reply-quote-thumb {
  flex: none;
  width: 42px;
  height: 42px;
  margin-inline-end: -4px;
  border-radius: 6px;
  object-fit: cover;
}
.reply-quote-thumb[hidden] {
  display: none;
}
.photo-message > .reply-quote {
  margin-bottom: 4px;
}
.forwarded-label {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3px;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--muted);
}
.bubble.me .forwarded-label {
  color: rgba(255, 255, 255, 0.82);
}
.forwarded-label .ui-icon {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.forwarded-label.many .ui-icon + .ui-icon {
  margin-inline-start: -10px;
}
html[dir="rtl"] .forwarded-label .ui-icon {
  transform: scaleX(-1);
}
.photo-message > .forwarded-label,
.photo-message > .sender-name {
  padding: 2px 6px 0;
}
.voice-message:has(> .reply-quote, > .forwarded-label, > .sender-name),
.attachment-message:has(> .reply-quote, > .forwarded-label, > .sender-name) {
  flex-wrap: wrap;
}
.voice-message > :is(.reply-quote, .forwarded-label, .sender-name),
.attachment-message > :is(.reply-quote, .forwarded-label, .sender-name) {
  flex: 1 0 100%;
  margin-bottom: 0;
}
.composer.replying {
  flex-wrap: wrap;
  row-gap: 8px;
}
.reply-bar {
  order: -1;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.reply-bar .reply-quote {
  margin: 0;
  cursor: default;
  background: var(--surface);
}
/* Links (link-preview.js): links in a message's text, the preview card above the text, and the draft card above the
   message box while typing (✕ removes it). */
.message-link {
  color: #027eb5;
  text-decoration: underline;
  word-break: break-word;
}
body.dark .message-link {
  color: #53bdeb;
}
.link-card {
  display: flex;
  flex-direction: column;
  margin: -4px -8px 6px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: inherit;
  text-decoration: none;
  max-width: 320px;
}
.link-card img {
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  display: block;
}
.link-card-copy {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  min-width: 0;
}
.link-card-copy strong {
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-card-copy span {
  font-size: 0.82rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-card-copy small {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: start;
}
/* «الوسائط والروابط والمستندات» (chat-shared.js). */
.shared-row .settings-menu-row .time {
  margin-inline-start: auto;
}
.shared-strip,
.shared-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 0 12px 12px;
}
.shared-grid {
  padding: 8px 0;
  max-height: 65vh;
  overflow-y: auto;
}
.shared-thumb {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  border-radius: 6px;
  background: var(--bg) center / cover no-repeat;
  cursor: pointer;
}
.shared-thumb.video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.real-shared-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.real-shared-tabs button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.real-shared-tabs button.active {
  background: var(--primary);
  color: #fff;
}
.shared-link {
  text-decoration: none;
  color: inherit;
}
.event-call {
  font-weight: 600;
}
/* Communities (chat-communities.js). */
.community-sheet .sheet-head .back {
  flex: none;
}
.community-icon {
  font-size: 1.1rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
.community-join {
  color: var(--primary);
  font-weight: 600;
  margin-inline-start: auto;
}
.community-description {
  white-space: pre-wrap;
}
/* Chat lock (chat-lock.js). */
.lock-error {
  color: #e11d48;
  font-size: 0.88rem;
  margin: 0;
}
.lock-sheet .secondary-button {
  margin-top: 4px;
}
.locked-list-sheet .chat-list {
  max-height: 60vh;
  overflow-y: auto;
}
/* Group invite links (chat-invite.js). */
.invite-link {
  margin: 0 4px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  color: #027eb5;
  font-size: 0.88rem;
  word-break: break-all;
}
.invite-join {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 4px 8px 12px;
  text-align: center;
}
.invite-join-photo {
  width: 96px;
  height: 96px;
  font-size: 2.4rem;
  overflow: hidden;
}
.invite-join-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.invite-join h3 {
  margin: 4px 0 0;
}
/* Live location (chat-live-location.js): a card with a pulsing dot while it lasts. */
.bubble.live-location-message {
  min-width: 220px;
}
.live-location {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.live-copy {
  display: grid;
  gap: 2px;
}
.live-copy small {
  color: var(--muted);
  font-size: 0.8rem;
}
.live-pulse {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}
.live-location.on .live-pulse {
  background: #22c55e;
}
.live-location.on .live-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  from {
    transform: scale(0.6);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}
.live-stop {
  color: #e11d48;
}
.loc-live-times {
  display: flex;
  gap: 8px;
  padding: 4px 14px 10px;
}
.loc-live-times button {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 6px;
  cursor: pointer;
}
/* View once (chat-once.js): the «1» before sending, and the bubble that opens it once. */
.view-once-toggle {
  font-weight: 800;
  font-size: 0.95rem;
  border: 2px solid currentColor !important;
}
.view-once-toggle[aria-pressed="true"] {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.bubble.once-message {
  padding: 8px 12px !important;
  min-width: 150px;
}
.once-media {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  padding: 6px 0;
  cursor: pointer;
}
.once-media.done,
.once-media:disabled {
  color: var(--muted);
  cursor: default;
}
.once-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.once-viewer img,
.once-viewer video {
  -webkit-touch-callout: none;
  user-select: none;
}
/* Stickers (chat-stickers.js): no bubble, just the picture with the time under it; the tray in the emoji panel. */
.bubble.sticker-message {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.bubble.sticker-message::before,
.bubble.sticker-message::after {
  display: none !important;
}
.bubble.sticker-message .real-photo {
  width: 150px !important;
  height: 150px !important;
  aspect-ratio: 1 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.bubble.sticker-message .real-photo img {
  object-fit: contain !important;
  border-radius: 0 !important;
}
.bubble.sticker-message .message-meta {
  justify-content: flex-end;
  padding: 2px 4px;
}
.emoji-media-placeholder.sticker-box {
  display: block;
  overflow-y: auto;
  padding: 10px;
}
.sticker-tray {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}
.sticker-create,
.sticker-item {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 4px;
  cursor: pointer;
}
.sticker-create {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 0.72rem;
  text-align: center;
}
.sticker-create b {
  font-size: 1.6rem;
  line-height: 1;
}
.sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.sticker-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin: 14px 8px 0;
}
/* GIFs and sticker search from KLIPY (chat-gif.js). */
.emoji-media-placeholder.gif-box {
  display: block;
  overflow-y: auto;
  padding: 8px;
}
.klipy-stickers {
  margin-top: 14px;
}
.klipy-stickers .sticker-item {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.gif-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
}
.gif-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  padding: 8px 0;
  outline: none;
}
.gif-grid {
  columns: 2;
  column-gap: 6px;
}
.emoji-picker .gif-item {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  break-inside: avoid;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
}
.gif-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gif-item.sending,
.klipy-stickers .sticker-item.sending {
  opacity: 0.45;
}
[data-gif-results].loading:empty {
  min-height: 120px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted) 12%, transparent), transparent) 0 0 / 200% 100%;
  animation: gif-wait 1.2s linear infinite;
  border-radius: 8px;
}
@keyframes gif-wait {
  to {
    background-position: -200% 0;
  }
}
.gif-note,
.gif-credit {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
  margin: 8px 0 2px;
}
.real-gif small {
  inset-inline-start: 8px;
  top: 8px;
  bottom: auto;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font-weight: 700;
}
/* Contact cards, polls and events (chat-cards.js), like WhatsApp. */
.bubble.card-message {
  min-width: min(280px, 78vw);
}
.contact-card,
.event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
}
.contact-card .chat-avatar {
  width: 44px;
  height: 44px;
  flex: none;
}
.contact-card-copy,
.event-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.contact-card-copy small,
.event-copy small {
  color: var(--muted);
  font-size: 0.82rem;
}
.event-details {
  font-size: 0.88rem;
  white-space: pre-wrap;
}
.event-date {
  flex: none;
  width: 48px;
  height: 52px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  align-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
.event-date small {
  font-size: 0.7rem;
  text-transform: uppercase;
}
.event-date b {
  font-size: 1.3rem;
  line-height: 1;
}
.card-actions {
  display: flex;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  margin: 2px -14px 0;
}
.card-actions button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  padding: 10px 6px;
  cursor: pointer;
}
.card-actions button + button {
  border-inline-start: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.event-actions button.chosen {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.card-link {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 0 2px;
  cursor: pointer;
}
.card-link:disabled {
  color: var(--muted);
  cursor: default;
}
.poll-card {
  display: grid;
  gap: 4px;
}
.poll-question {
  font-size: 1rem;
}
.poll-hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.poll-options {
  display: grid;
  gap: 6px;
}
.poll-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  padding: 4px 0;
  cursor: pointer;
}
.poll-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--muted);
}
.poll-option.chosen .poll-check {
  border-color: var(--primary);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat;
}
.poll-option b {
  font-size: 0.85rem;
  color: var(--muted);
}
.poll-bar {
  grid-column: 2 / 4;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.poll-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}
.answers-title {
  margin: 14px 4px 6px;
  font-size: 0.95rem;
}
.answers-title small {
  color: var(--muted);
  font-weight: 400;
}
.card-form {
  display: grid;
  gap: 12px;
}
.card-form label {
  display: grid;
  gap: 4px;
}
.card-form label > span,
.card-form-label {
  font-size: 0.85rem;
  color: var(--muted);
}
.card-form input:not([type="checkbox"]),
.card-form select,
.card-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.poll-inputs {
  display: grid;
  gap: 8px;
}
.card-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.card-form .card-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-form .card-switch span {
  color: var(--text);
  font-size: 0.95rem;
}
.composer.link-drafting {
  flex-wrap: wrap;
  row-gap: 8px;
}
.link-draft {
  order: -1;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.link-draft .link-card {
  flex-direction: row;
  flex: 1;
  margin: 0;
  max-width: none;
  background: var(--surface);
  pointer-events: none;
}
.link-draft .link-card img {
  width: 64px;
  height: 64px;
  flex: none;
}
.reply-cancel {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.touch-input)) .reply-cancel:hover {
    background: var(--bg);
  }
}
.composer.recording > .reply-bar {
  display: flex !important;
}
.messages .bubble[data-real-id] {
  touch-action: pan-y;
  transition: translate 0.18s ease;
}
.messages:has(.bubble.swiping) {
  overflow-x: clip;
}
.bubble.swiping {
  position: relative;
  transition: none;
}
.bubble.swiping::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: -44px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5'/%3E%3Cpath d='M5 12h8a7 7 0 0 1 7 7'/%3E%3C/svg%3E")
    center/18px no-repeat;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
  opacity: 0.45;
  transform: scale(0.8);
  transition:
    opacity 0.12s,
    transform 0.12s;
}
html[dir="rtl"] .bubble.swiping::before {
  transform: scale(0.8) scaleX(-1);
}
.bubble.swipe-ready::before {
  opacity: 1;
  transform: scale(1);
}
html[dir="rtl"] .bubble.swipe-ready::before {
  transform: scale(1) scaleX(-1);
}
@keyframes quote-flash {
  0%,
  45% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 38%, transparent);
  }
  100% {
    box-shadow: 0 0 0 5px transparent;
  }
}
.bubble.quote-flash {
  animation: quote-flash 1.8s ease;
}
.forward-limit-note {
  margin: -4px 0 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
#real-forward-selected {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The reply bar makes the composer taller: keep the newest message above it */
body.chat-open .chat-view:has(.composer.replying) {
  padding-bottom: 150px;
}
/* Profile photos (profile-photos.js): a photo covers the initials of an avatar; the contact info photo opens full screen */
.chat-avatar {
  position: relative;
  overflow: hidden;
}
.chat-avatar > img.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.contact-hero > img {
  object-fit: cover;
  background: var(--primary-soft);
}
.contact-hero > img.avatar-live[data-avatar-open] {
  cursor: zoom-in;
}
.avatar-viewer-count {
  align-self: center;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.avatar-viewer-step {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.avatar-viewer-step[data-step="-1"] {
  inset-inline-start: 12px;
}
.avatar-viewer-step[data-step="1"] {
  inset-inline-end: 12px;
}
/* Settings → Chats (chats-settings.js): message font size and chat wallpaper; archived chats (real-chat.js) */
body.chat-font-small .messages .bubble {
  font-size: 0.9rem;
}
body.chat-font-large .messages .bubble {
  font-size: 1.15rem;
}
body.chat-font-small .composer-input-wrap input {
  font-size: 0.9rem;
}
body.chat-font-large .composer-input-wrap input {
  font-size: 1.1rem;
}
body.has-wallpaper {
  --wallpaper: var(--wallpaper-light);
}
body.dark.has-wallpaper {
  --wallpaper: var(--wallpaper-dark);
}
/* A chat's colour lies on a layer of its own, so the page behind the header (and the phone's status bar) keeps the
   header's colour. Over it, the raised parts (their messages, reactions, date lines, the typing field) are a step
   lighter and what sits inside them a step darker, as in WhatsApp. */
body.chat-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--wallpaper, var(--chat-default));
  pointer-events: none;
}
body.chat-open .chat-view {
  --surface: #fff;
  --bg: #f7f5f3;
}
body.dark.chat-open .chat-view {
  --surface: #242626;
  --bg: #1d1f1f;
}
.wallpaper-dot {
  height: 31px;
  flex: none;
  border-radius: 50%;
  background: var(--swatch-light, var(--chat-default));
  border: 1px solid var(--border);
}
body.dark .wallpaper-dot {
  background: var(--swatch-dark, var(--chat-default));
}
.wallpaper-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 6px;
  padding: 22px 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--swatch-light, var(--chat-default));
}
body.dark .wallpaper-preview {
  background: var(--swatch-dark, var(--chat-default));
}
.wallpaper-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  line-height: 1.45;
}
.wallpaper-bubble.them {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-bottom-right-radius: 5px;
}
body.dark .wallpaper-bubble.them {
  background: #242626;
}
.wallpaper-bubble.me {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-left-radius: 5px;
}
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.wallpaper-swatch {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3/4;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--swatch-light, var(--chat-default));
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
body.dark .wallpaper-swatch {
  background: var(--swatch-dark, var(--chat-default));
}
.wallpaper-swatch small {
  font-size: 0.72rem;
}
.wallpaper-swatch b {
  display: none;
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  place-items: center;
}
.wallpaper-swatch.selected {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.wallpaper-swatch.selected b {
  display: grid;
}
.archived-row {
  cursor: pointer;
}
.chat-avatar.archived-icon {
  background: transparent;
  color: var(--muted);
}
.archived-icon .ui-icon {
  width: 24px;
  height: 24px;
}
.archived-page .archived-note {
  display: block;
  width: 100%;
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
}
/* Starred messages, chat lists, broadcast lists and Help (extras.js) */
.extras-empty {
  text-align: center;
  padding: 30px 12px;
}
.extras-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.8rem;
  margin-bottom: 6px;
}
.extras-hint {
  margin: 4px 2px 14px;
  line-height: 1.6;
}
.extras-page > .primary-button {
  margin-top: 14px;
}
.extras-editor {
  display: grid;
  gap: 12px;
}
.extras-editor textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
  font: inherit;
  resize: vertical;
}
.extras-editor .except-list {
  max-height: 48dvh;
  overflow: auto;
}
.secondary-button.danger-text {
  color: var(--danger);
}
.starred-row {
  align-items: flex-start;
}
.starred-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  margin: 2px 0;
}
.starred-star {
  color: #f59e0b;
  flex: none;
}
.star-mark {
  color: inherit;
  opacity: 0.85;
  font-size: 0.7rem;
}
.broadcast-page .chat-header {
  align-items: center;
}
.broadcast-edit-button {
  margin-inline-start: auto;
}
.help-faq details {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.help-faq details:last-child {
  border-bottom: 0;
}
.help-faq summary {
  cursor: pointer;
  font-weight: 700;
}
.help-faq p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.help-version {
  text-align: center;
  margin-top: 18px;
}
/* The page container gets focus when a page opens (for screen readers); Safari drew its blue focus ring across the screen */
#app:focus {
  outline: none;
}
/* Group info: the group's initials centered in its big circle (".contact-hero>span" is meant for the text lines) */
.contact-hero > .real-group-avatar {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  font-size: 2.6rem;
  color: #1d4ed8;
}
/* Two-step verification (account-security.js) */
.mfa-qr {
  display: block;
  width: 180px;
  height: 180px;
  margin: 12px auto;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
}
.mfa-open-app {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: 8px 0 12px;
}
.mfa-sheet .primary-button {
  margin-top: 10px;
}
.mfa-sheet .secondary-button {
  margin-top: 8px;
}
/* Server usage (server-usage.js) */
.usage-meter {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.usage-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.usage-meter-head span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.usage-meter small {
  color: var(--muted);
}
.usage-meter.warn .storage-bar i {
  background: #f59e0b;
}
.usage-meter.danger .storage-bar i {
  background: var(--danger);
}
/* Voice notes exactly like WhatsApp (iPhone): the sender's photo with a small microphone at the outer edge (the speed
   button takes its place while playing), a plain play icon, the wave with a moving dot, the length / time played
   under it and the time + ticks at the bottom corner. */
.voice-message {
  display: grid;
  column-gap: 8px;
  row-gap: 0;
  align-items: center;
  min-width: 260px;
  max-width: min(330px, 82vw);
  padding: 7px 10px 5px;
}
.bubble.me.voice-message {
  grid-template-columns: auto 1fr 50px;
}
.bubble.them.voice-message {
  grid-template-columns: 50px auto 1fr;
}
.voice-message > :is(.reply-quote, .forwarded-label, .sender-name) {
  grid-column: 1/-1;
  margin-bottom: 6px;
}
.voice-message > .voice-avatar,
.voice-message > .audio-speed {
  grid-row: 4/6;
  align-self: center;
  justify-self: center;
}
.bubble.me.voice-message > :is(.voice-avatar, .audio-speed) {
  grid-column: 3;
}
.bubble.them.voice-message > :is(.voice-avatar, .audio-speed) {
  grid-column: 1;
}
.voice-message > .audio-play {
  grid-row: 4;
  grid-column: 1;
  width: 32px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bubble.them.voice-message > .audio-play {
  grid-column: 2;
}
.voice-message > .audio-track {
  grid-row: 4;
  grid-column: 2;
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}
.bubble.them.voice-message > .audio-track {
  grid-column: 3;
}
.voice-message > .voice-duration {
  grid-row: 5;
  grid-column: 1/3;
  justify-self: start;
  font-size: 0.72rem;
  opacity: 0.75;
  line-height: 1.5;
  padding-inline-start: 4px;
}
.bubble.them.voice-message > .voice-duration {
  grid-column: 2/4;
}
.voice-message > .message-meta {
  grid-row: 5;
  grid-column: 2/3;
  justify-self: end;
  margin: 0;
  line-height: 1.5;
}
.bubble.them.voice-message > .message-meta {
  grid-column: 3/4;
}
.voice-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  flex: none;
}
.voice-avatar > img.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.voice-mic {
  position: absolute;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  z-index: 1;
}
.bubble.me .voice-mic {
  inset-inline-start: -6px;
  color: #fff;
}
.bubble.them .voice-mic {
  inset-inline-end: -6px;
}
.voice-mic svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}
.voice-message .audio-speed {
  display: none;
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 0;
  cursor: pointer;
}
.bubble.me.voice-message .audio-speed {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.bubble.them.voice-message .audio-speed {
  background: var(--bg);
  color: var(--text);
}
.voice-message.playing > .voice-avatar {
  display: none;
}
.voice-message.playing > .audio-speed {
  display: block;
}
.voice-message .audio-play svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.bubble.me.voice-message .audio-play {
  color: #fff;
}
.bubble.them.voice-message .audio-play {
  color: var(--muted);
}
.voice-message .voice-pause-icon,
.voice-message.playing .voice-play-icon {
  display: none;
}
.voice-message.playing .voice-pause-icon {
  display: block;
}
.voice-message .audio-wave {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}
.voice-message .audio-wave i {
  width: 3px;
  flex: none;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.45);
}
.voice-message .audio-wave i.played {
  background: #fff;
}
.bubble.them.voice-message .audio-wave i {
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.bubble.them.voice-message .audio-wave i.played {
  background: var(--muted);
}
.audio-thumb {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--progress, 0) * (100% - 13px));
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.bubble.me .audio-thumb {
  background: #fff;
}
.bubble.them .audio-thumb {
  background: var(--primary);
}
/* Photos like WhatsApp: a thin frame in the bubble colour, the time and ticks on the photo over a soft shade. */
.photo-message {
  padding: 3px 3px 5px;
}
.photo-message .real-photo {
  border-radius: 10px;
}
.photo-message:not(:has(> .message-text)) {
  padding: 3px;
}
.photo-message:not(:has(> .message-text)) .real-photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.42));
  z-index: 1;
  pointer-events: none;
}
.photo-message:not(:has(> .message-text)) > .message-meta {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 10px;
  z-index: 2;
  padding: 0;
  background: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.photo-message:not(:has(> .message-text)) > .message-meta :is(time, .star-mark, .edited-mark, .delivery:not(.read)) {
  color: #fff;
}
.messages .bubble img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
} /* Fixes: media controls read left to right in every language (like WhatsApp); a plain play icon; a visible mic. */
.voice-message {
  direction: ltr;
}
[dir="rtl"] .voice-message > :is(.reply-quote, .forwarded-label, .sender-name) {
  direction: rtl;
}
.bubble.voice-message > .audio-play,
.bubble.them.voice-message > .audio-play {
  background: none;
  box-shadow: none;
}
.bubble.me .voice-mic {
  left: -7px;
  right: auto;
  background: var(--primary);
  color: #fff;
}
.bubble.them .voice-mic {
  right: -7px;
  left: auto;
  background: var(--surface, #fff);
  color: var(--primary);
}
.voice-mic svg {
  width: 14px;
  height: 14px;
  filter: none;
} /* WhatsApp colours for message bubbles (the app owner's choice): light green for mine, white for theirs; dark mode
   uses WhatsApp's dark greens and greys. Text is dark on both, so mine and theirs are easy to tell apart. */
body .messages .bubble.me {
  background: #d9fdd3;
  color: #111b21;
  border: 0;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
body .messages .bubble.them {
  background: #fff;
  color: #111b21;
  border: 0;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
body.dark .messages .bubble.me {
  background: #144d37;
  color: #e9edef;
}
body.dark .messages .bubble.them {
  background: #242626;
  color: #e9edef;
}
body .messages .bubble .message-meta {
  color: #667781;
}
body.dark .messages .bubble .message-meta {
  color: rgba(233, 237, 239, 0.6);
}
body .messages .bubble .delivery {
  color: #667781;
}
body.dark .messages .bubble .delivery {
  color: rgba(233, 237, 239, 0.6);
}
body .messages .bubble .delivery.read {
  color: #53bdeb;
}
body.hide-read-receipts .chat-view:not(.group-chat) .messages .bubble .delivery.read {
  color: #667781;
}
body .messages .bubble .delivery.failed {
  color: #ef4444;
}
body .messages .bubble.me .reply-quote {
  background: rgba(11, 20, 26, 0.05);
  border-inline-start-color: var(--primary);
}
body.dark .messages .bubble.me .reply-quote {
  background: rgba(0, 0, 0, 0.18);
}
body .messages .bubble.me .reply-quote strong {
  color: var(--primary);
}
body .messages .bubble.me .reply-quote-text {
  color: #667781;
}
body.dark .messages .bubble.me .reply-quote-text {
  color: rgba(233, 237, 239, 0.7);
}
body .messages .bubble.me .forwarded-label {
  color: #667781;
}
body.dark .messages .bubble.me .forwarded-label {
  color: rgba(233, 237, 239, 0.6);
}
body .messages .bubble.me .attachment-file-icon {
  background: rgba(11, 20, 26, 0.06);
  color: var(--primary);
}
body .messages .bubble.me .message-translation {
  border-top-color: rgba(11, 20, 26, 0.12);
  color: #667781;
}
/* Voice notes: WhatsApp greys for the icon and the wave, a wider bar, a round photo. */
body .messages .bubble.voice-message {
  min-width: min(300px, 76vw);
  width: min(330px, 80vw);
  max-width: 80vw;
}
body .messages .bubble .voice-avatar.chat-avatar {
  border-radius: 50%;
  overflow: visible;
}
body .messages .bubble.voice-message .audio-play {
  color: #54656f;
}
body.dark .messages .bubble.voice-message .audio-play {
  color: #aebac1;
}
body .messages .bubble.voice-message .audio-wave i {
  background: rgba(84, 101, 111, 0.35);
}
body .messages .bubble.voice-message .audio-wave i.played {
  background: #54656f;
}
body.dark .messages .bubble.voice-message .audio-wave i {
  background: rgba(174, 186, 193, 0.35);
}
body.dark .messages .bubble.voice-message .audio-wave i.played {
  background: #aebac1;
}
body .messages .bubble .audio-thumb {
  background: var(--primary);
}
body .messages .bubble.voice-message .audio-speed {
  background: rgba(11, 20, 26, 0.08);
  color: #111b21;
}
body.dark .messages .bubble.voice-message .audio-speed {
  background: rgba(255, 255, 255, 0.12);
  color: #e9edef;
}
body .messages .bubble.me .voice-mic {
  background: #d9fdd3;
  color: var(--primary);
}
body .messages .bubble.them .voice-mic {
  background: #fff;
  color: var(--primary);
}
body.dark .messages .bubble.me .voice-mic {
  background: #144d37;
}
body.dark .messages .bubble.them .voice-mic {
  background: #242626;
} /* My messages on the right and theirs on the left in every language (the app owner's choice, 2026-10-13): the
   message list is laid out left to right; texts keep their own direction (dir="auto"), menus and labels stay RTL. */
[dir="rtl"] .messages {
  direction: ltr;
}
[dir="rtl"]
  .messages
  :is(
    .message-actions,
    .reaction-bar,
    .reply-quote,
    .forwarded-label,
    .sender-name,
    .message-translation,
    .file-copy,
    .edited-mark
  ) {
  direction: rtl;
} /* The voice and send buttons in WhatsApp's green. */
body .voice-button,
body .send-message-button {
  background: #00a884;
  color: #fff;
}
body .composer.recording .voice-recorder button:last-child {
  background: #00a884;
} /* Closer to WhatsApp (reference screenshot, 2026-10-13): the photo sits next to the play button (mine: photo, play,
   wave; theirs: play, wave, photo), a blue microphone on the photo facing the play button, square top corner on the
   sender's side, and the message bar laid out like WhatsApp in every language (+ left, camera and mic right). */
body .messages .bubble.me.voice-message {
  grid-template-columns: 54px auto 1fr;
}
body .messages .bubble.them.voice-message {
  grid-template-columns: auto 1fr 54px;
}
body .messages .bubble.me.voice-message > :is(.voice-avatar, .audio-speed) {
  grid-column: 1;
}
body .messages .bubble.me.voice-message > .audio-play {
  grid-column: 2;
}
body .messages .bubble.me.voice-message > .audio-track {
  grid-column: 3;
}
body .messages .bubble.me.voice-message > .voice-duration {
  grid-column: 3;
  padding-inline-start: 0;
}
body .messages .bubble.me.voice-message > .message-meta {
  grid-column: 3;
}
body .messages .bubble.them.voice-message > .audio-play {
  grid-column: 1;
}
body .messages .bubble.them.voice-message > .audio-track {
  grid-column: 2;
}
body .messages .bubble.them.voice-message > :is(.voice-avatar, .audio-speed) {
  grid-column: 3;
}
body .messages .bubble.them.voice-message > .voice-duration {
  grid-column: 2;
  padding-inline-start: 0;
}
body .messages .bubble.them.voice-message > .message-meta {
  grid-column: 2;
}
body .messages .bubble.voice-message .audio-play {
  color: #111b21;
}
body.dark .messages .bubble.voice-message .audio-play {
  color: #e9edef;
}
body .messages .bubble .voice-mic,
body.dark .messages .bubble .voice-mic {
  background: none;
  color: #1d9bf0;
  width: 22px;
  height: 22px;
  bottom: -4px;
}
body .messages .bubble.me .voice-mic {
  left: auto;
  right: -6px;
}
body .messages .bubble.them .voice-mic {
  right: auto;
  left: -6px;
}
body .messages .bubble .voice-mic svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}
body .messages .bubble .audio-thumb {
  background: #1d9bf0;
}
body .messages .bubble.voice-message .audio-wave i {
  background: rgba(134, 150, 160, 0.55);
}
body .messages .bubble.voice-message .audio-wave i.played {
  background: #1d9bf0;
}
body .messages .bubble {
  border-radius: 8px;
}
body .messages .bubble.me {
  border-top-right-radius: 0;
}
body .messages .bubble.them {
  border-top-left-radius: 0;
}
[dir="rtl"] .composer {
  direction: ltr;
}
[dir="rtl"] .composer .voice-recorder {
  direction: rtl;
}
[dir="rtl"] #message-input:placeholder-shown {
  direction: rtl;
} /* My messages on the right in Arabic and on the left in English (the app owner's choice, 2026-10-13); the message
   bar and voice notes stay as they are. */
[dir="ltr"] .messages {
  direction: rtl;
}
[dir="ltr"]
  .messages
  :is(
    .message-actions,
    .reaction-bar,
    .reply-quote,
    .forwarded-label,
    .sender-name,
    .message-translation,
    .file-copy,
    .edited-mark,
    .message-meta
  ) {
  direction: ltr;
}
[dir="ltr"] .messages .bubble.me {
  border-top-right-radius: 8px;
  border-top-left-radius: 0;
}
[dir="ltr"] .messages .bubble.them {
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
} /* The microphone on a voice note in the text colour (the app owner's choice). */
body .messages .bubble .voice-mic {
  color: #111b21;
}
body.dark .messages .bubble .voice-mic {
  color: #e9edef;
}
body.dark .messages .bubble .voice-mic svg {
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.8));
}

/* A group member's profile: the single Message button centred. */
.real-contact-info .contact-quick-actions:has(> button:only-child) {
  display: flex;
  justify-content: center;
}
.real-contact-info .contact-quick-actions:has(> button:only-child) > button {
  min-width: 110px;
}

/* Account QR like WhatsApp's page (real accounts): grey page, white card with my photo over its top edge, a green
   Scan button and a light Reset button at the bottom. */
.qr-sheet.wa-qr {
  background: #f4f4f4;
  color: #111b21;
  padding: 14px 16px 18px;
}
body.dark .qr-sheet.wa-qr {
  background: #161717;
  color: #e9edef;
}
.wa-qr .qr-panel {
  display: flex;
  flex-direction: column;
  min-height: min(640px, 80dvh);
}
.wa-qr .qr-panel[hidden] {
  display: none;
}
.wa-qr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.wa-qr-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.wa-qr-round {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: inherit;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
body.dark .wa-qr-round {
  background: #1d1f1f;
}
.wa-qr-round svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.wa-qr-round:disabled {
  opacity: 0.5;
}
.wa-qr-spacer {
  visibility: hidden;
}
.wa-qr-card {
  position: relative;
  margin-top: 30px;
  padding: 46px 18px 22px;
  border-radius: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.dark .wa-qr-card {
  background: #1d1f1f;
}
.wa-qr-photo {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  background: #e5e7eb;
}
body.dark .wa-qr-photo {
  border-color: #1d1f1f;
}
.wa-qr-card strong {
  font-size: 1.05rem;
}
.wa-qr-card > span {
  color: #667781;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.wa-qr-card .account-qr-image {
  width: min(240px, 62vw);
  height: auto;
  image-rendering: pixelated;
}
.wa-qr-hint {
  text-align: center;
  color: #667781;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 16px 6px;
}
.wa-qr-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-qr-scan,
.wa-qr-reset {
  width: 100%;
  padding: 15px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.wa-qr-scan {
  border: 0;
  background: #1daa61;
  color: #fff;
}
.wa-qr-reset {
  border: 1px solid #d1d7db;
  background: #fff;
  color: #111b21;
}
body.dark .wa-qr-reset {
  background: #1d1f1f;
  border-color: #343535;
  color: #e9edef;
}
.wa-qr .qr-scan-preview {
  border-radius: 18px;
  overflow: hidden;
}
.qr-sheet.wa-qr .wa-qr-round {
  border: 0 !important;
  background: #fff !important;
  color: #111b21 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
  font-size: 1rem;
}
body.dark .qr-sheet.wa-qr .wa-qr-round {
  background: #1d1f1f !important;
  color: #e9edef !important;
}
.qr-sheet.wa-qr .wa-qr-round .back-chevron {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
}
.qr-sheet.wa-qr .wa-qr-round:focus:not(:focus-visible) {
  outline: none;
}
.qr-sheet.wa-qr .wa-qr-round:focus-visible {
  outline: 2px solid #1daa61;
  outline-offset: 2px;
}

/* Message bar: no focus ring around the text (the rounded field already shows it), and the camera hides while
   typing, like WhatsApp. */
.composer-input-wrap input:focus,
.composer-input-wrap input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.composer.has-text #direct-camera-button {
  display: none;
}

/* Installed on the iPhone: the chat header in the page colour (white, as WhatsApp's) so it runs on into the
   clock/battery strip, and no empty strip under the message bar while the keyboard is open (the home-bar space only
   matters without it). */
body.chat-open .topbar {
  background: color-mix(in srgb, var(--list-bg) 94%, transparent);
}
body.chat-open .composer:focus-within {
  padding-bottom: 10px;
}

/* The chat camera fills the whole screen like WhatsApp: the picture edge to edge, a round shutter at the bottom,
   close and flip as round buttons over the picture; the taken photo is shown whole, with edit tools on top and the
   caption and send at the bottom. */
#create-dialog:has(.chat-capture-preview) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  transform: none !important;
  overflow: hidden;
}
#create-dialog:has(.chat-capture-preview) #create-form-root {
  height: 100%;
}
.chat-camera-sheet:has(.chat-capture-preview) {
  position: relative;
  height: 100dvh;
  max-height: none;
  padding: 0 !important;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.chat-camera-sheet:has(.chat-capture-preview) > .sheet-head {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent);
  border: 0;
}
.chat-camera-sheet:has(.chat-capture-preview) > .sheet-head h2 {
  font-size: 0;
}
.chat-camera-sheet:has(.chat-capture-preview) > .sheet-head .close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.1rem;
}
.chat-capture-preview {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #000;
}
.chat-capture-preview > video,
.chat-capture-preview > #captured-photo-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.chat-capture-preview > video {
  object-fit: cover;
}
.chat-capture-preview > #captured-photo-preview {
  object-fit: contain;
  background: #000;
}
.chat-capture-preview > .camera-face {
  display: none;
}
.chat-capture-preview > .flip-camera {
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: calc(34px + env(safe-area-inset-bottom));
  right: 28px;
  left: auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.4rem;
}
.chat-camera-sheet:has(.chat-capture-preview) .capture-actions {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: none;
}
/* The shutter's row spans the whole width: only its buttons take taps, so the flip button beside it stays tappable. */
.chat-camera-sheet:has(.chat-capture-preview) .capture-actions {
  pointer-events: none;
}
.chat-camera-sheet:has(.chat-capture-preview) .capture-actions > * {
  pointer-events: auto;
}
.chat-capture-preview > .flip-camera {
  z-index: 5;
}
/* Switching cameras: the last picture, blurred, until the other camera shows (app.js freezeCamera). */
.camera-freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  filter: blur(14px);
  transform: scale(1.08);
  transition: opacity 0.18s ease;
}
.camera-freeze.gone {
  opacity: 0;
}
.chat-camera-sheet:has(.chat-capture-preview) .capture-actions > .secondary-button {
  display: none;
}
.chat-camera-sheet:has(.chat-capture-preview) [data-capture-photo] {
  width: 76px;
  height: 76px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 5px solid #fff;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.25);
  font-size: 0;
  color: transparent;
}
.chat-camera-sheet:has(.chat-capture-preview) [data-capture-photo]:active {
  background: #fff;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-review {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(64px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-review[hidden] {
  display: none;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-review > * {
  pointer-events: auto;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-edit-toolbar {
  align-self: flex-end;
  display: flex;
  gap: 8px;
  background: none;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-edit-toolbar button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-caption {
  margin: 0 0 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-radius: 999px;
  color: #fff;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-caption input {
  background: transparent;
  color: #fff;
  border: 0;
}
.chat-camera-sheet:has(.chat-capture-preview) .photo-caption input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.chat-camera-sheet:has(.chat-capture-preview) .review-actions {
  display: flex;
  gap: 10px;
  margin: 0;
  background: none;
}
.chat-camera-sheet:has(.chat-capture-preview) .review-actions > button {
  flex: 1;
  border-radius: 999px;
}
.chat-camera-sheet:has(.chat-capture-preview) .review-actions > [data-send-captured-photo] {
  background: #1daa61;
  border-color: #1daa61;
  color: #fff;
}
.chat-camera-sheet:has(.chat-capture-preview) .review-actions > [data-retake-photo] {
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  color: #fff;
}
.chat-camera-sheet:has(.chat-capture-preview) [data-capture-photo] {
  width: 76px !important;
  height: 76px !important;
  flex: none !important;
  max-width: 76px;
}

.qr-loading-box {
  width: min(240px, 62vw);
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(134, 150, 160, 0.12);
}

/* A real chat's messages scroll in their own box between the header and the message bar (real-chat.js sets
   --chat-top / --chat-bottom from the bars), so the scroll bar stops above the bar and nothing hides under it. */
body.chat-open .chat-view .messages[data-real-chat] {
  position: fixed;
  top: var(--chat-top, 62px);
  bottom: var(--chat-bottom, 76px);
  left: max(0px, calc(50% - 380px));
  right: max(0px, calc(50% - 380px));
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 14px;
}
body.chat-open .chat-view:has(.messages[data-real-chat]) {
  padding-bottom: 0;
  min-height: 0;
}
/* Pinned messages (chat-pins.js), like WhatsApp: a bar under the chat header; the messages start below it. The marks
   on the side show how many pins there are and which one is shown. */
.pin-bar {
  position: fixed;
  top: var(--chat-top, 62px);
  left: max(0px, calc(50% - 380px));
  right: max(0px, calc(50% - 380px));
  z-index: 5;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--list-bg, var(--surface));
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.pin-bar > .ui-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.pin-bar-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.92rem;
}
.pin-bar-marks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 30px;
  flex: none;
}
.pin-bar-marks i {
  flex: 1;
  width: 3px;
  border-radius: 2px;
  background: var(--border);
}
.pin-bar-marks i.on {
  background: var(--primary);
}
.pin-bar-marks:has(i:only-child) {
  display: none;
}
body.chat-open.has-pin-bar .chat-view .messages[data-real-chat] {
  top: calc(var(--chat-top, 62px) + 48px);
}
/* Searching inside a chat (chat-search.js): a bar over the chat header, like WhatsApp; the current match is outlined. */
.chat-search-bar {
  position: fixed;
  top: 0;
  left: max(0px, calc(50% - 380px));
  right: max(0px, calc(50% - 380px));
  z-index: 60;
  min-height: var(--chat-top, 62px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: env(safe-area-inset-top) 10px 0;
  background: var(--list-bg, var(--surface));
  border-bottom: 1px solid var(--border);
}
.chat-search-bar input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.chat-search-bar button {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  font-size: 1rem;
  cursor: pointer;
}
.chat-search-bar button:disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}
.chat-search-bar .chat-search-close {
  color: var(--text);
}
.chat-search-count {
  flex: none;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.bubble.search-current {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* The chat page fades in without the pages' slide: a transform on the page would make the fixed message box and bar
   follow the page instead of the screen, so for a moment the messages showed in a thin strip under the header. */
@keyframes fade-only {
  from {
    opacity: 0.35;
  }
}

/* Linked devices, like WhatsApp (scripts/devices.js, migration 023) */
.wa-devices {
  padding-bottom: 28px;
}
.wa-devices-card {
  background: var(--surface);
  border-radius: 22px;
  padding: 18px 18px 20px;
  margin: 12px 0 22px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.wa-devices-art {
  width: 200px;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 4px auto 10px;
}
.wa-devices-card p {
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.wa-link-device {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
  padding: 14px;
  cursor: pointer;
}
.wa-devices-title {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 6px 8px;
  font-weight: 700;
}
.wa-devices-list {
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.wa-device-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  padding: 13px 16px;
  text-align: start;
  cursor: pointer;
  font: inherit;
}
.wa-device-row + .wa-device-row {
  border-top: 1px solid var(--border);
}
.wa-device-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex: none;
}
.wa-device-icon.big {
  width: 64px;
  height: 64px;
  font-size: 2rem;
  margin: 0 auto 10px;
}
.wa-device-copy {
  flex: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.wa-device-copy strong {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-device-copy small {
  color: var(--muted);
}
.wa-device-row .dir-chevron {
  color: var(--muted);
}
.wa-devices-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 8px 6px 0;
}
.wa-devices-lock {
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
  margin: 26px 12px 0;
  line-height: 1.5;
}
.wa-device-detail {
  text-align: center;
  display: grid;
  gap: 4px;
  padding: 6px 0 18px;
}
.wa-device-detail strong {
  font-size: 1.1rem;
}
.wa-device-detail small {
  color: var(--muted);
}
.wa-device-logout {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #fee2e2;
  color: var(--danger);
  font-weight: 800;
  padding: 13px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
body.dark .wa-device-logout {
  background: #3b1d22;
  color: #f87171;
}
.wa-link-password {
  display: grid;
  gap: 10px;
  text-align: center;
}
.wa-link-password .field {
  text-align: start;
}
.wa-link-password h3 {
  margin: 0;
}
.wa-link-password p {
  margin: 0;
}
.wa-link-password .form-error {
  color: var(--danger);
  font-size: 0.9rem;
}
.wa-code-input {
  text-align: center;
  font-size: 1.4rem !important;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}
.wa-scan-sheet {
  display: flex;
  flex-direction: column;
  min-height: min(86vh, 760px);
}
.wa-scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wa-scan-head h2 {
  margin: 0;
  font-size: 1.08rem;
}
.wa-scan-hint {
  color: var(--muted);
  text-align: center;
  margin: 22px 10px 18px;
  line-height: 1.5;
}
.wa-scan-area {
  position: relative;
  flex: 1;
  min-height: 340px;
  background: #000;
  margin: 0 -16px;
  overflow: hidden;
}
.wa-scan-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.wa-scan-intro svg {
  width: 220px;
  max-width: 70%;
}
.wa-scan-intro .primary-button {
  min-width: 200px;
  border-radius: 999px;
}
.wa-scan-status {
  text-align: center;
  min-height: 1.3em;
  margin: 10px 0 0;
}
.wa-scan-phone {
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
/* Computer: the QR sign-in page (WhatsApp Web) */
.wa-web .login-brand {
  margin-bottom: 18px;
}
.wa-web-card {
  background: var(--surface);
  border-radius: 26px;
  padding: 34px 38px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
.wa-web-copy {
  flex: 1;
  min-width: 0;
}
.wa-web-copy h1 {
  font-size: 1.7rem;
  margin: 0 0 20px;
  font-weight: 500;
}
.wa-web-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 16px;
}
.wa-web-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 1.05rem;
}
.wa-web-steps b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--text);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  flex: none;
}
.wa-web-stay {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  margin-bottom: 18px;
  cursor: pointer;
}
.wa-web-stay input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.wa-web-switch,
.wa-web-inline,
.wa-web-password {
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wa-web-password {
  display: block;
  margin: 20px auto 0;
  color: var(--muted);
}
.wa-web-qr {
  flex: none;
}
.wa-web-qr-slot {
  width: 264px;
  height: 264px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 12px;
  position: relative;
}
.wa-web-qr-slot img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.wa-web-reload {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 14px;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
}
.wa-web-reload span {
  font-size: 2rem;
}
.wa-web-phone {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.wa-web-phone .profile-phone-control {
  flex: 1;
  min-width: 240px;
}
.wa-web-phone .primary-button {
  border-radius: 999px;
  padding-inline: 28px;
}
.wa-web-code {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 6px 0 24px;
  flex-wrap: wrap;
}
.wa-web-code span {
  width: 40px;
  height: 52px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--bg);
}
.wa-web-code i {
  font-style: normal;
  font-size: 1.5rem;
  color: var(--muted);
  padding: 0 4px;
}
.qr-login-link {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  padding: 14px 0 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
@media (max-width: 760px) {
  .wa-web-card {
    flex-direction: column-reverse;
    padding: 22px 18px;
    gap: 22px;
  }
  .wa-web-qr-slot {
    width: 230px;
    height: 230px;
  }
  .wa-web-copy h1 {
    font-size: 1.35rem;
  }
}
.wa-face-icon {
  width: 36px;
  height: 36px;
  color: var(--primary);
}
.wa-link-password .auth-alternative {
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.wa-link-password .auth-alternative:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Like an installed app: pulling past the top or the bottom (iPhone's rubber band) does not drag the whole page and its top bar along. */
html,
body {
  overscroll-behavior-y: none;
}
/* The page never zooms, like an installed app (two-finger pinch and double tap); photos zoom in their viewer (zoom.js). */
html {
  touch-action: pan-x pan-y;
}
.chat-view .messages[data-real-chat] {
  overscroll-behavior-y: contain;
}
/* Calls (calls.js): a full-screen layer above the app, dark like a phone's call screen; video fills it once connected. */
.call-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 56px) 24px calc(env(safe-area-inset-bottom) + 44px);
  background: radial-gradient(circle at 50% 30%, #22333d, #0b141a 70%);
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
.call-head {
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.call-avatar {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #2a3942;
  color: #d6e2ea;
  font-size: 2.4rem;
  font-weight: 700;
}
.call-avatar > img.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-name {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
}
.call-status {
  margin: 8px 0 0;
  font-size: 1.02rem;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
}
.call-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.call-button {
  position: relative;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.17);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.call-button .ui-icon {
  width: 28px;
  height: 28px;
}
.call-button.on {
  background: #fff;
  color: #0b141a;
}
.call-button.decline {
  background: #e5383b;
}
.call-button.decline .ui-icon {
  transform: rotate(135deg);
}
.call-button.accept {
  background: #1fa855;
}
.call-button small {
  position: absolute;
  top: 100%;
  margin-top: 9px;
  font-size: 0.88rem;
  white-space: nowrap;
}
.call-screen.incoming .call-controls {
  gap: 96px;
  margin-bottom: 30px;
}
.call-remote-audio {
  display: none;
}
.call-remote-video,
.call-local-video {
  position: absolute;
  object-fit: cover;
  background: #000;
  display: none;
}
.call-remote-video {
  inset: 0;
  width: 100%;
  height: 100%;
}
.call-screen.video.connected .call-remote-video {
  display: block;
}
.call-screen.video.has-local .call-local-video {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}
/* The small video (own camera, or the other person after a tap swaps them): calls.js puts it in one of the four
   corners (left/top) and it can be dragged to another one. */
.call-screen.video.connected:not(.minimized) .call-local-video,
.call-screen.video.connected.swapped:not(.minimized) .call-remote-video {
  inset: auto;
  width: 104px;
  height: 150px;
  border-radius: 14px;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  touch-action: none;
  cursor: grab;
}
.call-screen.video.connected.swapped:not(.minimized) .call-local-video {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;
}
.call-screen .dragging {
  transition: none !important;
  cursor: grabbing;
}
.call-minimize {
  position: absolute;
  z-index: 4;
  top: calc(env(safe-area-inset-top) + 12px);
  inset-inline-start: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.call-minimize .ui-icon {
  width: 26px;
  height: 26px;
}
.call-screen.incoming .call-minimize,
.call-screen.minimized .call-minimize,
.call-mini {
  display: none;
}
.call-screen.video.connected:not(.minimized) .call-head {
  padding-inline-start: 52px;
}
/* Minimized: a small window the app can be used around (video: the other person; voice: a green button with the time). */
.call-screen.minimized {
  inset: auto;
  width: 108px;
  height: 156px;
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  justify-content: center;
  touch-action: none;
  cursor: pointer;
}
.call-screen.minimized:not(.video) {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: #1fa855;
}
.call-screen.minimized .call-head,
.call-screen.minimized .call-controls {
  display: none;
}
.call-screen.minimized:not(.video) .call-mini {
  display: grid;
  place-items: center;
  gap: 2px;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.call-screen.minimized:not(.video) .call-mini .ui-icon {
  width: 26px;
  height: 26px;
}
.call-screen.minimized.video.connected .call-local-video {
  display: none;
}
.call-screen.minimized.video.connected .call-remote-video {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.call-screen.back-camera .call-local-video {
  transform: none;
}
.call-screen.camera-off .call-local-video {
  visibility: hidden;
}
/* Screen sharing (calls.js): my shared screen in the small picture, the other one's shared screen whole (not cut to
   fill the phone), neither of them mirrored; a note while I share, and the warning before it starts. */
.call-screen.sharing .call-local-video {
  visibility: visible;
  transform: none;
  object-fit: contain;
}
.call-screen.remote-screen .call-remote-video {
  object-fit: contain;
}
.call-share-note {
  display: none;
}
.call-screen.sharing:not(.minimized) .call-share-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px auto 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(31, 168, 85, 0.9);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: none;
}
.call-share-note .ui-icon {
  width: 18px;
  height: 18px;
}
.call-share-ask {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}
.call-share-card {
  width: min(100%, 340px);
  padding: 22px 20px 16px;
  border-radius: 18px;
  background: #1f2c34;
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.call-share-card > .ui-icon {
  width: 34px;
  height: 34px;
  color: #53bdeb;
}
.call-share-card p {
  margin: 10px 0 18px;
  line-height: 1.6;
}
.call-share-actions {
  display: flex;
  gap: 10px;
}
.call-share-actions button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.call-share-cancel {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.call-share-go {
  background: #1fa855;
  color: #fff;
}
.call-screen.minimized .call-share-ask {
  display: none;
}
.call-screen.video.connected .call-head .call-avatar {
  display: none;
}
.call-screen.video.connected .call-head {
  align-self: flex-start;
  text-align: start;
}
/* Calls page: turning notifications on, so calls ring a closed app (push.js). */
.push-banner {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--text);
  display: grid;
  gap: 6px;
}
.push-banner strong {
  font-size: 1rem;
}
.push-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.push-banner .primary-button {
  justify-self: start;
  margin-top: 4px;
}

/* A message that couldn't be sent (real chats): a red "!" and a "Retry" button under the time, like WhatsApp. The
   message list's direction is flipped on purpose (see above), so the button sits on the right like the time and
   reads in the language's own direction. On a photo without a caption the time leaves the photo for its own row. */
body .messages .bubble .delivery.failed,
body.dark .messages .bubble .delivery.failed {
  color: #ef4444;
}
.retry-send {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 6px 0 1px auto;
  padding: 4px 12px 4px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .messages .retry-send {
  direction: rtl;
  padding: 4px 9px 4px 12px;
}
[dir="ltr"] .messages .retry-send {
  direction: ltr;
}
.retry-send .ui-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.3;
}
body.dark .retry-send {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}
.photo-message > .retry-send {
  margin: 4px 8px 4px auto;
}
.voice-message > .retry-send {
  grid-column: 1/-1;
  grid-row: 6;
}
body .messages .photo-message:has(> .retry-send) > .message-meta {
  position: static;
  margin-top: 4px;
  padding-inline: 8px;
  color: #667781;
  text-shadow: none;
}
body .messages .photo-message:has(> .retry-send) > .message-meta :is(time, .star-mark, .edited-mark) {
  color: #667781;
}
body.dark .messages .photo-message:has(> .retry-send) > .message-meta :is(time, .star-mark, .edited-mark) {
  color: rgba(233, 237, 239, 0.6);
}
body .messages .photo-message:has(> .retry-send) > .message-meta .delivery.failed {
  color: #ef4444;
}
/* The real market (market.js) */
.mk-card .product-visual {
  overflow: hidden;
}
.mk-card .product-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mk-kind {
  position: absolute;
  bottom: 9px;
  inset-inline-start: 9px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.mk-kind.mk-sold {
  background: var(--danger);
  inset-inline-start: auto;
  inset-inline-end: 9px;
}
.mk-card .product-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 17px;
}
.mk-links .market-inbox {
  margin: 0;
  position: relative;
  padding: 12px;
}
.mk-links .market-inbox small {
  display: none;
}
.mk-buyer-links {
  grid-template-columns: 1fr;
}
.mk-rate-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 15px;
  margin-top: 16px;
  text-align: center;
}
.mk-rate-box[hidden] {
  display: none;
}
.mk-rate-box h3 {
  margin: 0;
  font-size: 1rem;
}
.mk-rate-box .rate-stars button {
  font-size: 2rem;
}
.mk-rate-box textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  padding: 10px 12px;
  resize: vertical;
}
.mk-rate-wait {
  margin: 0;
}
.mk-work-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--surface);
}
.chat-header .mk-work-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.mk-under-review {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.mk-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mk-rules li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.mk-rules li > span:first-child {
  flex: none;
  font-size: 1.15rem;
}
.mk-rules-note {
  margin: 14px 0;
}
.mk-rules-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.mk-rules-link {
  display: block;
  margin: 0 auto 14px;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.mk-review-link {
  width: 100%;
  margin-bottom: 12px;
}
.mk-report-reasons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.mk-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.mk-review-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}
.mk-review-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.mk-review-top img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.mk-review-top > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mk-review-desc {
  margin: 8px 0;
  white-space: pre-wrap;
}
.mk-word-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mk-word-form input {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  padding: 0 12px;
}
.mk-words {
  flex-wrap: wrap;
}
.mk-work-link {
  cursor: pointer;
}
/* "identity checked" mark beside a seller's name (migration 126), market and live */
.id-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: #1d9bf0;
  color: #fff;
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1;
  vertical-align: -0.12em;
}
.mk-work-link .dir-chevron {
  margin-inline-start: auto;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.mk-work-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 16px;
  margin-bottom: 17px;
}
.mk-work-head h2 {
  margin: 4px 0 0;
  font-size: 1.25rem;
}
.mk-work-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 1.6rem;
}
.mk-my-review {
  cursor: pointer;
  border-color: var(--primary) !important;
}
.mk-my-review-label {
  display: block;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 4px;
}
.mk-work-phone {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.mk-head-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.mk-merchant-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mk-merchant-button span {
  font-size: 1.15rem;
  line-height: 1;
}
.mk-merchant-actions {
  grid-template-columns: 1fr 1fr;
  margin-top: 6px;
}
.mk-merchant-country {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 17px;
}
.mk-merchant-country strong,
.mk-merchant-country small {
  display: block;
}
.mk-merchant-country small {
  color: var(--muted);
  margin-top: 3px;
}
.mk-merchant-country select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  padding: 0 12px;
}
.mk-links .market-inbox b.mk-count {
  background: var(--primary-soft);
  color: var(--primary);
}
.mk-links .market-inbox b {
  margin-inline-start: auto;
  background: var(--danger);
  color: #fff;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  padding: 0 6px;
}
.mk-more {
  margin: 16px 0;
}
.mk-loading {
  text-align: center;
  padding: 30px 0;
}
.mk-thumb {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #dbeafe, #eef5ff);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
}
.mk-thumb.small {
  width: 50px;
  height: 50px;
  font-size: 0.8rem;
  color: #64748b;
}
.mk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.dark .mk-thumb {
  background: linear-gradient(145deg, #242626, #1d1f1f);
}
.mk-mine {
  display: grid;
  gap: 10px;
}
.mk-mine .chat-copy span {
  display: block;
}
.mk-role {
  color: var(--primary);
  font-weight: 700;
}
.nav-item .market-badge {
  top: 2px;
  z-index: 2;
}
.mk-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 17px 0 6px;
  border-radius: 18px;
  -webkit-overflow-scrolling: touch;
}
.mk-gallery img {
  flex: 0 0 100%;
  height: 260px;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: 18px;
  background: var(--bg);
  cursor: zoom-in;
}
.mk-gallery-count {
  text-align: center;
  margin: 0 0 8px;
  font-size: 0.8rem;
}
.mk-detail .detail-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mk-detail-heart {
  position: static;
  flex: none;
}
.mk-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}
.mk-facts div {
  background: var(--bg);
  border-radius: 13px;
  padding: 9px 11px;
}
.mk-facts dt {
  font-size: 0.75rem;
  color: var(--muted);
}
.mk-facts dd {
  margin: 2px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.mk-description {
  white-space: pre-wrap;
  line-height: 1.6;
  margin: 0 0 6px;
}
.mk-owner-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mk-owner-actions .block-danger {
  color: var(--danger);
}
.mk-sold-note {
  display: block;
  text-align: center;
  padding: 10px;
}
.mk-report {
  display: block;
  margin: 16px auto 4px;
  border: 0;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.mk-thread-listing {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  border-radius: 15px;
  padding: 9px;
  margin-bottom: 12px;
  text-align: start;
  font: inherit;
  cursor: pointer;
}
.mk-thread-listing img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.mk-thread-listing span {
  flex: 1;
  min-width: 0;
}
.mk-thread-listing strong,
.mk-thread-listing small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-thread .messages {
  padding-bottom: 90px;
}
.mk-failed .message-meta time {
  color: var(--danger);
}
.mk-kept-photos figure {
  position: relative;
  margin: 0;
}
.mk-kept-photos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.mk-kept-photos button {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  cursor: pointer;
}

/* Reports (reports.js): report sheet, admins' review page, suspended-account screen. */
.abuse-explain {
  margin: 0 0 12px;
  line-height: 1.6;
}
.abuse-reasons {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.abuse-reasons legend {
  font-weight: 700;
  margin-bottom: 6px;
}
.abuse-reasons label,
.abuse-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}
.abuse-reasons input,
.abuse-block input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--primary);
}
.abuse-block {
  margin: 0 0 12px;
}
.abuse-report-sheet textarea {
  width: 100%;
  resize: vertical;
}
.settings-menu-row .unread-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-inline-start: auto;
}
.abuse-page {
  padding: 0 16px 24px;
}
.abuse-tabs {
  margin: 12px 0;
}
.abuse-tabs .chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.abuse-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
}
.abuse-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.abuse-card-top time {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.8rem;
}
.abuse-who {
  margin: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.abuse-who > span:first-child {
  color: var(--muted);
}
.abuse-details {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.abuse-details p {
  margin: 6px 0 0;
}
.abuse-copies {
  display: grid;
  gap: 8px;
}
.abuse-copy {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}
.abuse-copy-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.abuse-copy-head time {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.78rem;
}
.abuse-copy p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.abuse-copy img {
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  justify-self: start;
}
.abuse-copy small {
  font-size: 0.76rem;
}
.abuse-checked {
  color: #15803d;
}
.abuse-card .mk-owner-actions {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
#suspended-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.suspended-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px 20px;
  display: grid;
  gap: 14px;
  text-align: center;
}
.suspended-card h1 {
  margin: 0;
  font-size: 1.35rem;
}
.suspended-card p {
  margin: 0;
  line-height: 1.7;
}
.suspended-card form {
  text-align: start;
  display: grid;
  gap: 10px;
}
.suspended-card textarea {
  width: 100%;
  resize: vertical;
}
.suspended-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}
.suspended-icon .ui-icon {
  width: 32px;
  height: 32px;
}
.suspended-actions {
  display: grid;
  gap: 8px;
}
.suspended-actions .block-danger {
  color: var(--danger);
}
.suspended-done {
  padding: 12px;
  border-radius: 14px;
  background: var(--primary-soft);
}
/* Phones: no text selection or iOS "Copy / Look Up / Translate" on long press anywhere in the app (long press opens the
   app's own menus, like WhatsApp); typing fields keep it. */
@media (hover: none) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  input,
  textarea,
  [contenteditable],
  [contenteditable] *,
  .messages .bubble .message-text.editing {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}
:where(html.touch-input) body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:where(html.touch-input) input,
:where(html.touch-input) textarea,
:where(html.touch-input) [contenteditable],
:where(html.touch-input) [contenteditable] *,
:where(html.touch-input) .messages .bubble .message-text.editing {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Star (message menu and the mark next to the time): yellow outline with a white middle; filled yellow once starred. */
.message-actions [data-star-message] b {
  font-weight: inherit;
}
.message-actions [data-star-message] .star-remove,
.bubble:is(.is-starred, .starred-message) .message-actions [data-star-message] .star-add {
  display: none;
}
.bubble:is(.is-starred, .starred-message) .message-actions [data-star-message] .star-remove {
  display: inline;
}
.message-actions [data-star-message] .ui-icon {
  stroke: #eab308;
  fill: #fff;
  stroke-width: 1.8;
}
.bubble:is(.is-starred, .starred-message) .message-actions [data-star-message] .ui-icon {
  fill: #facc15;
  stroke: #eab308;
}
.messages .bubble .message-meta .star-mark {
  color: #eab308 !important;
  opacity: 1;
}
/* Selecting several messages (real-chat.js): a circle by every message, a bar at the bottom (over the message bar). */
.select-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 60;
  min-height: var(--chat-bottom, 64px);
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.select-bar strong {
  font-size: 1.05rem;
  margin-inline-end: auto;
}
.select-bar .select-cancel {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
}
.select-bar .select-action {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.select-bar .select-action.danger-action {
  background: var(--danger);
}
.select-bar .select-action .ui-icon {
  width: 20px;
  height: 20px;
}
body.selecting-messages .messages .bubble[data-real-id] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
body.selecting-messages .messages .bubble[data-real-id]::before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -12px;
  inset-inline-start: -34px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #8696a0;
  background: var(--surface);
  z-index: 3;
}
body.selecting-messages .messages .bubble.selected::before {
  content: "✓";
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
body.selecting-messages .messages .bubble.them {
  margin-inline-start: 40px;
}

/* In the message menu, "Report" is the red option; "Star" keeps the normal text colour with its yellow star. */
.message-actions .secondary-message-actions [data-star-message] {
  color: var(--text) !important;
}
.message-actions .secondary-message-actions [data-report-message] {
  color: var(--danger);
}
/* The front camera is a mirror (app.js isFrontCamera). */
.camera-video.mirrored {
  transform: scaleX(-1);
}

/* Group calls (group-calls.js): the same dark screen as a call between two, with a tile for each person in the call
   (up to 5, me first): their video, or their picture and name. */
.gcall-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 28px);
  background: radial-gradient(circle at 50% 30%, #22333d, #0b141a 70%);
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
.gcall-head {
  text-align: center;
  padding: 0 52px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.gcall-group-avatar {
  display: none;
}
.gcall-screen:not(.in) .gcall-group-avatar {
  display: grid;
  margin-top: 56px;
}
.gcall-group-avatar .ui-icon {
  width: 56px;
  height: 56px;
}
.gcall-kind {
  margin: 0 0 4px;
  font-size: 0.92rem;
  opacity: 0.75;
}
.gcall-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.gcall-screen:not(.in) .gcall-title {
  font-size: 1.65rem;
}
.gcall-status {
  margin: 6px 0 0;
  font-size: 1rem;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
}
.gcall-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.gcall-grid[data-count="0"] {
  display: none;
}
.gcall-grid[data-count="1"],
.gcall-grid[data-count="2"] {
  grid-template-columns: minmax(0, 1fr);
}
.gcall-grid[data-count="3"] .gcall-tile:first-child,
.gcall-grid[data-count="5"] .gcall-tile:first-child {
  grid-column: 1/-1;
}
.gcall-tile {
  position: relative;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #1f2c34;
  display: grid;
  place-items: center;
}
.gcall-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: #000;
}
.gcall-tile.has-video video {
  display: block;
}
.gcall-tile.has-video.mirrored video {
  transform: scaleX(-1);
}
.gcall-tile audio {
  display: none;
}
.gcall-tile-avatar {
  position: relative;
  width: clamp(56px, 22vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #2a3942;
  color: #d6e2ea;
  font-size: 1.6rem;
  font-weight: 700;
}
.gcall-tile-avatar > img.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gcall-tile.has-video .gcall-tile-avatar {
  display: none;
}
.gcall-tile-label {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.9rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.gcall-tile-label b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcall-tile-label small {
  opacity: 0.8;
  white-space: nowrap;
}
.gcall-tile-muted {
  display: none;
}
.gcall-tile.is-muted .gcall-tile-muted {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
}
.gcall-tile-muted .ui-icon {
  width: 14px;
  height: 14px;
}
.gcall-tile.ringing {
  opacity: 0.78;
}
.gcall-tile.ringing .gcall-tile-avatar {
  animation: gcall-ring 1.6s ease-in-out infinite;
}
@keyframes gcall-ring {
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcall-tile.ringing .gcall-tile-avatar {
    animation: none;
  }
}
.gcall-controls {
  margin-top: auto;
  flex-wrap: wrap;
  gap: 14px;
}
.gcall-screen .call-button {
  width: 56px;
  height: 56px;
}
.gcall-screen.incoming .gcall-controls {
  gap: 96px;
  margin-bottom: 30px;
}
.gcall-screen.incoming .call-button {
  width: 62px;
  height: 62px;
}
.gcall-screen.incoming .call-minimize,
.gcall-screen:not(.in) .call-minimize {
  display: none;
}
.gcall-mini {
  display: none;
}
/* Minimized: a green button with the time, above the app's tab bar; a tap brings the call back. */
.gcall-screen.minimized {
  inset: auto;
  inset-inline-end: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 24px;
  background: #1fa855;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.gcall-screen.minimized > :not(.gcall-mini):not(.gcall-grid) {
  display: none !important;
}
.gcall-screen.minimized .gcall-grid {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.gcall-screen.minimized .gcall-mini {
  display: grid;
  place-items: center;
  gap: 2px;
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.gcall-screen.minimized .gcall-mini .ui-icon {
  width: 26px;
  height: 26px;
}
/* The store app's small window over the other apps during a video call (native-call.js, like WhatsApp): only the
   other person's video (a group: the tiles), no buttons; a tap on the window opens the app again. */
html.in-pip .call-minimize,
html.in-pip .call-controls,
html.in-pip .call-share-note,
html.in-pip .call-screen.video.connected .call-head,
html.in-pip .call-screen.video.connected .call-local-video,
html.in-pip .gcall-head,
html.in-pip .gcall-controls {
  display: none !important;
}
html.in-pip .call-screen,
html.in-pip .gcall-screen {
  padding: 0;
}
html.in-pip .call-screen.video.connected .call-remote-video {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html.in-pip .gcall-grid {
  gap: 2px;
}
/* Choosing who to call (a group of more than 5) or who to add to the call. */
.gcall-picker {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.gcall-picker-card {
  width: min(100%, 460px);
  max-height: min(80vh, 620px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  color: var(--text);
}
@media (min-width: 761px) {
  .gcall-picker {
    align-items: center;
  }
  .gcall-picker-card {
    border-radius: 20px;
  }
}
.gcall-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gcall-picker-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.gcall-picker-close {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.gcall-picker-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.gcall-picker-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}
.gcall-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 12px;
  cursor: pointer;
}
.gcall-pick input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--primary);
}
.gcall-pick.disabled {
  opacity: 0.5;
  cursor: default;
}
.gcall-pick .chat-avatar {
  width: 40px;
  height: 40px;
  flex: none;
}
.gcall-pick strong {
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcall-picker-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gcall-picker-go .ui-icon {
  width: 20px;
  height: 20px;
}

/* The browser's own tap colour (a light-blue box on Samsung Internet that could stay on a tab after the page changed):
   off everywhere, on every device; the app shows the chosen tab/row itself. */
html,
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

/* The phone's contacts in "New chat" (phone-contacts.js): on TN TN → a chat; not on it → "+" to invite. */
.phone-invite-row {
  cursor: default;
}
.phone-invite-row > span:nth-child(2) {
  min-width: 0;
}
.phone-invite-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-invite-button {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font:
    600 1.55rem/1 system-ui,
    sans-serif;
  cursor: pointer;
}
.phone-sync-icon {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
.phone-sync-icon .ui-icon {
  width: 22px;
  height: 22px;
}
.phone-sync-note {
  margin: 10px 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.phone-invite-sheet {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.phone-invite-card {
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  color: var(--text);
}
@media (min-width: 761px) {
  .phone-invite-sheet {
    align-items: center;
  }
  .phone-invite-card {
    border-radius: 20px;
  }
}
.phone-invite-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.phone-invite-head > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.phone-invite-head strong {
  font-size: 1.05rem;
}
.phone-invite-head small {
  color: var(--muted);
}
.phone-invite-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.phone-invite-option .ui-icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--primary);
}
.phone-invite-option > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.phone-invite-option small {
  color: var(--muted);
  font-size: 0.85rem;
}
/* A group's members and admins (real-chat.js, migration 054): admin badge, "Add members", a member's options for
   admins, permissions and admins pages, and the line that replaces the composer when only admins send. */
.group-member-row .settings-row-copy {
  flex: 1;
  min-width: 0;
}
.group-member-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-admin-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.group-add-icon {
  background: var(--primary) !important;
  color: #fff !important;
}
.group-add-icon .ui-icon {
  width: 22px;
  height: 22px;
}
.group-add-row strong {
  color: var(--primary);
}
.group-member-actions {
  display: grid;
  gap: 8px;
}
.group-member-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.group-member-action .ui-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--primary);
}
.group-member-action.danger-action,
.group-member-action.danger-action .ui-icon {
  color: var(--danger);
}
.group-add-empty {
  margin: 4px 2px 8px;
  line-height: 1.6;
}
.group-member-option[hidden] {
  display: none;
}
.group-member-option:has(input:disabled) {
  cursor: default;
  opacity: 0.8;
}
.group-admins-hint {
  margin: 4px 4px 14px;
  line-height: 1.6;
  font-size: 0.92rem;
}
.group-admins-page form {
  display: grid;
  gap: 16px;
}
.group-admins-page .group-member-list {
  max-height: none;
  overflow: visible;
}
/* A group's lines ("Ahmad added Sami", migration 055): centred pills between the messages, like WhatsApp. */
.messages .system-line {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  direction: inherit;
}
.messages .system-line span {
  max-width: 85%;
  padding: 5px 12px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.admins-only-composer p {
  flex: 1;
  margin: 0;
  padding: 12px 8px;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

/* Group photos (083): the camera button on the group's photo in its info page, and the group photo page. */
.contact-hero .group-hero-photo {
  position: relative;
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}
.group-hero-photo > .real-group-avatar {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 0;
  font-size: 2.6rem;
  color: #1d4ed8;
}
.group-photo-edit {
  position: absolute;
  inset-inline-end: 4px;
  bottom: 4px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.group-photo-edit .ui-icon {
  width: 20px;
  height: 20px;
}
.group-photos-page #group-photo-button > .chat-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  color: #1d4ed8;
}
.group-photos-page #group-photo-button:disabled {
  cursor: default;
}
.group-photo-loading {
  display: grid;
  place-items: center;
}
.group-photo-loading .spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: group-photo-spin 0.8s linear infinite;
}
@keyframes group-photo-spin {
  to {
    rotate: 360deg;
  }
}
.contact-hero .real-group-avatar[data-avatar-photo]:not([data-avatar-photo=""]) {
  cursor: zoom-in;
}

/* "New group" sheet: the round photo button above the group's name (like WhatsApp). */
.new-group-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0 12px;
}
#new-group-photo-button {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  cursor: pointer;
}
#new-group-photo-button .ui-icon {
  width: 30px;
  height: 30px;
}
#new-group-photo-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo editor before sending (photo-editor.js), like WhatsApp: full screen, black, the whole photo between the tools
   at the top and the caption bar at the bottom. */
#create-dialog:has(.photo-editor),
#create-dialog:has(.chat-cam) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  transform: none !important;
  overflow: hidden;
}
#create-dialog:has(.photo-editor) #create-form-root,
#create-dialog:has(.chat-cam) #create-form-root {
  height: 100%;
}
.photo-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  background: #000;
  color: #fff;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pe-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  flex: none;
}
.pe-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pe-tools[hidden] {
  display: none;
}
.pe-round {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.15rem;
  padding: 0;
  cursor: pointer;
}
.pe-round .ui-icon {
  width: 22px;
  height: 22px;
}
.pe-round b {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.pe-round.active {
  background: #fff;
  color: #000;
}
.pe-round[hidden] {
  display: none;
}
.pe-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 4px;
}
.photo-editor[data-mode="crop"] .pe-stage {
  padding: 22px;
}
.pe-frame {
  position: relative;
}
.pe-frame > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pe-ink {
  pointer-events: none;
}
.photo-editor[data-mode="draw"] .pe-ink {
  pointer-events: auto;
  cursor: crosshair;
}
.pe-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pe-items[hidden] {
  display: none;
}
.pe-item {
  position: absolute;
  white-space: pre;
  line-height: 1.2;
  text-align: center;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.photo-editor:not([data-mode="none"]) .pe-item {
  pointer-events: none;
}
.pe-item-text {
  font-weight: 700;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans Arabic",
    Tahoma,
    sans-serif;
  text-shadow: 0 0 0.12em rgba(0, 0, 0, 0.45);
}
.pe-item-text.with-bg {
  padding: 0.2em 0.35em;
  border-radius: 0.3em;
  text-shadow: none;
}
.pe-cropbox {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  touch-action: none;
  cursor: move;
  background:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 33.33% 0/1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 66.66% 0/1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 0 33.33%/100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 0 66.66%/100% 1px no-repeat;
}
.pe-cropbox[hidden] {
  display: none;
}
.pe-cropbox > i {
  position: absolute;
  width: 34px;
  height: 34px;
  touch-action: none;
}
.pe-cropbox > i::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid #fff;
}
.pe-cropbox > i[data-corner="nw"] {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}
.pe-cropbox > i[data-corner="nw"]::before {
  left: 6px;
  top: 6px;
  border-right: 0;
  border-bottom: 0;
}
.pe-cropbox > i[data-corner="ne"] {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}
.pe-cropbox > i[data-corner="ne"]::before {
  right: 6px;
  top: 6px;
  border-left: 0;
  border-bottom: 0;
}
.pe-cropbox > i[data-corner="sw"] {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}
.pe-cropbox > i[data-corner="sw"]::before {
  left: 6px;
  bottom: 6px;
  border-right: 0;
  border-top: 0;
}
.pe-cropbox > i[data-corner="se"] {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}
.pe-cropbox > i[data-corner="se"]::before {
  right: 6px;
  bottom: 6px;
  border-left: 0;
  border-top: 0;
}
.pe-colors {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}
.pe-colors[hidden] {
  display: none;
}
.pe-colors button,
.pe-text-colors button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  padding: 0;
  cursor: pointer;
}
.pe-colors button.active,
.pe-text-colors button.active {
  transform: scale(1.3);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff;
}
.pe-trash {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition:
    transform 0.12s,
    background 0.12s;
  pointer-events: none;
}
.pe-trash[hidden] {
  display: none;
}
.pe-trash .ui-icon {
  width: 26px;
  height: 26px;
}
.pe-trash.hot {
  background: #ef4444;
  transform: translateX(-50%) scale(1.25);
}
.pe-bottom {
  flex: none;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
}
.pe-send-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pe-send-bar[hidden],
.pe-crop-bar[hidden],
.pe-draw-bar[hidden] {
  display: none;
}
.pe-caption {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 24px;
  background: #1f2c34;
  color: #fff;
  font-size: 1rem;
  outline: none;
}
.pe-caption::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.pe-send {
  width: 52px;
  height: 52px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 0;
}
.pe-send:disabled {
  opacity: 0.6;
}
.pe-recipient {
  margin-top: 8px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-crop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pe-crop-bar button,
.pe-draw-bar button,
.pe-done {
  min-width: 64px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.pe-crop-bar [data-pe="crop-rotate"] {
  font-size: 1.4rem;
  min-width: 52px;
}
.pe-crop-bar [data-pe="crop-done"],
.pe-draw-bar button,
.pe-done {
  background: var(--primary, #2563eb);
}
.pe-draw-bar {
  display: flex;
  justify-content: flex-end;
}
.pe-text-edit {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.65);
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
}
.pe-text-edit[hidden] {
  display: none;
}
.pe-text-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pe-text-input {
  flex: 1;
  margin: auto 0;
  max-height: 50%;
  width: 100%;
  align-self: center;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font:
    700 2rem/1.2 system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans Arabic",
    Tahoma,
    sans-serif;
  text-align: center;
  border-radius: 0.3em;
  padding: 0.2em 0.35em;
  text-shadow: 0 0 0.12em rgba(0, 0, 0, 0.45);
}
.pe-text-colors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
}
.pe-emoji {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text, #111);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.pe-emoji[hidden] {
  display: none;
}
.pe-emoji-head {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px 0;
}
.pe-emoji-head .pe-round {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.pe-emoji .emoji-picker {
  flex: 1;
  min-height: 0;
  position: static;
  width: 100%;
  max-width: none;
  box-shadow: none;
  border: 0;
}
@media (max-width: 380px) {
  .pe-round {
    width: 38px;
    height: 38px;
  }
  .pe-tools {
    gap: 4px;
  }
}
/* Chat camera (chat-camera.js), like WhatsApp: full screen, the round button with "Video · Photo · Video message" under
   it, gallery on one side and switching cameras on the other, zoom steps above, the flash at the top. */
.chat-cam {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: #000;
  color: #fff;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.cc-view {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  touch-action: none;
  background: #000;
}
.cc-lens {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cc-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  background: #000;
}
.cc-freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.08);
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.cc-freeze.gone {
  opacity: 0;
}
.cc-ring {
  display: none;
}
.chat-cam[data-mode="note"] .cc-view {
  background: #0b141a;
}
.chat-cam[data-mode="note"] .cc-lens {
  position: relative;
  inset: auto;
  width: min(80vw, 54dvh);
  height: min(80vw, 54dvh);
  border-radius: 50%;
  overflow: visible;
  margin-top: -14dvh;
}
.chat-cam[data-mode="note"] .cc-video {
  border-radius: 50%;
}
.chat-cam[data-mode="note"] .cc-freeze {
  border-radius: 50%;
}
.chat-cam[data-mode="note"] .cc-ring {
  display: block;
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.cc-ring circle {
  fill: none;
  stroke: #ef4444;
  stroke-width: 2.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s linear;
}
.cc-focus {
  position: absolute;
  width: 72px;
  height: 72px;
  border: 2px solid #facc15;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cc-focus[hidden] {
  display: none;
}
.cc-focus.on {
  animation: cc-focus 0.35s ease;
}
@keyframes cc-focus {
  from {
    transform: translate(-50%, -50%) scale(1.45);
    opacity: 0.4;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.cc-light {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #fff;
}
.cc-light[hidden] {
  display: none;
}
.chat-cam.snap .cc-view {
  animation: cc-snap 0.2s ease;
}
@keyframes cc-snap {
  50% {
    opacity: 0.25;
  }
}
.cc-top {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 22px;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}
.cc-top > * {
  pointer-events: auto;
}
.cc-round {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
}
.cc-round svg {
  width: 24px;
  height: 24px;
}
.cc-flash[hidden] {
  display: grid;
  visibility: hidden;
}
.cc-timer {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.cc-timer i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  animation: cc-blink 1s steps(2) infinite;
}
@keyframes cc-blink {
  50% {
    opacity: 0.2;
  }
}
.chat-cam.recording .cc-timer {
  display: flex;
}
.cc-bottom {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.cc-bottom > * {
  pointer-events: auto;
}
.cc-zooms {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.cc-zooms button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cc-zooms button.active {
  width: 40px;
  height: 40px;
  color: #facc15;
  font-size: 0.8rem;
}
.chat-cam[data-mode="note"] .cc-zooms {
  visibility: hidden;
}
.cc-row {
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-sizing: border-box;
}
.cc-shutter-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}
.cc-shutter {
  width: 78px;
  height: 78px;
  padding: 6px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.2s ease;
  box-sizing: border-box;
}
.cc-shutter i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition:
    transform 0.2s ease,
    border-radius 0.2s ease,
    background 0.15s ease;
}
.cc-shutter:active i {
  background: #fff;
}
.chat-cam:is([data-mode="video"], [data-mode="note"]) .cc-shutter i {
  background: #ef4444;
}
.chat-cam.recording .cc-shutter {
  transform: scale(1.22);
}
.chat-cam.recording .cc-shutter i {
  background: #ef4444;
}
.chat-cam.recording:not(.holding) .cc-shutter i {
  border-radius: 6px;
  transform: scale(0.45);
}
.cc-lock {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cc-lock svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.cc-lock small {
  font-size: 0.9rem;
  opacity: 0.8;
  order: 2;
}
.chat-cam.holding .cc-lock {
  opacity: 1;
}
.chat-cam.locked .cc-lock {
  opacity: 1;
  color: #facc15;
}
.chat-cam.locked .cc-lock small {
  display: none;
}
.chat-cam.recording [data-cc="gallery"],
.chat-cam.recording .cc-modes,
.chat-cam.recording .cc-hint {
  visibility: hidden;
}
.chat-cam.recording[data-mode="note"] [data-cc="flip"] {
  visibility: hidden;
}
.cc-modes {
  display: flex;
  gap: 6px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}
.cc-modes button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cc-modes button.active {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.cc-hint {
  display: none;
  margin: 0;
  padding: 0 16px;
  font-size: 0.78rem;
  opacity: 0.85;
  text-align: center;
}
.chat-cam[data-mode="photo"] .cc-hint[data-for="photo"],
.chat-cam[data-mode="note"] .cc-hint[data-for="note"] {
  display: block;
}
@media (max-width: 360px) {
  .cc-row {
    padding: 0 18px;
  }
  .cc-modes button {
    padding: 7px 10px;
    font-size: 0.82rem;
  }
}
/* A video before sending: plays on a loop; a video message plays round. */
.cc-length {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cc-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cc-preview .pe-bottom {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.cc-play {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cc-note-preview .cc-play {
  width: min(80vw, 56dvh);
  height: min(80vw, 56dvh);
  border-radius: 50%;
  object-fit: cover;
}
.cc-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  font-size: 1.6rem;
  pointer-events: none;
}
.cc-play-icon[hidden] {
  display: none;
}
.cc-note-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
/* A received or sent video message: round, without a bubble, the time under it. */
.bubble.video-note-message {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.bubble.video-note-message::before,
.bubble.video-note-message::after {
  display: none !important;
}
.real-video-note,
.real-video-note-player {
  display: block;
  width: min(220px, 58vw);
  height: min(220px, 58vw);
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  object-fit: cover;
  background: #0f172a;
  cursor: pointer;
}
.real-video-note small {
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
}
.bubble.video-note-message > .message-meta {
  position: static !important;
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding: 2px 8px !important;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35) !important;
  color: #fff;
  width: max-content;
  margin-inline-start: auto;
}
.bubble.video-note-message > .message-meta :is(time, .star-mark, .edited-mark, .delivery:not(.read)) {
  color: #fff;
}

/* Support chat (support.js) and the control panel (admin.js), migration 085. */
.sp-page,
.ad-page {
  max-width: 820px;
  margin: auto;
}
.sp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 2px 16px;
  min-height: 40dvh;
}
.sp-intro {
  margin: 18px 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.sp-intro h3 {
  margin: 0 0 6px;
}
.sp-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.sp-msg {
  align-self: flex-start;
  max-width: 84%;
  padding: 8px 12px 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.sp-msg.own {
  align-self: flex-end;
  background: #d9fdd3;
  border-color: #c5ecbf;
  color: #111b21;
}
body.dark .sp-msg.own {
  background: #005c4b;
  border-color: #005c4b;
  color: #e9edef;
}
.sp-msg p {
  margin: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.sp-msg img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  margin: 2px 0 4px;
  cursor: zoom-in;
}
.sp-msg time {
  display: block;
  font-size: 0.7rem;
  opacity: 0.65;
  text-align: end;
}
.sp-team {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--primary);
}
.sp-diag-note {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
}
.sp-composer {
  position: sticky;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.sp-report {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.sp-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.sp-row textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: none;
  outline: none;
}
.sp-attach {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  cursor: pointer;
}
.sp-attach .ui-icon {
  width: 22px;
  height: 22px;
}
.sp-send {
  width: 46px;
  height: 46px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
}
.sp-send:disabled {
  opacity: 0.5;
}
.sp-photo-preview {
  position: relative;
  align-self: flex-start;
}
.sp-photo-preview[hidden] {
  display: none;
}
.sp-photo-preview img {
  display: block;
  max-height: 110px;
  border-radius: 10px;
}
.sp-photo-preview button {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}
.ad-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 14px;
}
.ad-stats div {
  padding: 14px 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}
.ad-stats b {
  display: block;
  font-size: 1.45rem;
  color: var(--primary);
}
.ad-stats small {
  color: var(--muted);
  font-size: 0.78rem;
}
.ad-link {
  padding: 12px 14px;
}
.ad-link p {
  margin: 0 0 8px;
}
.ad-link code {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.82rem;
  word-break: break-all;
}
.ad-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ad-row:last-child {
  border-bottom: 0;
}
.ad-row.static {
  cursor: default;
}
.ad-row > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ad-row small {
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-row time {
  flex: none;
  font-size: 0.72rem;
  color: var(--muted);
}
.ad-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.ad-actions-row > * {
  flex: 1;
  min-width: 140px;
}
.ad-search {
  display: flex;
  gap: 8px;
  margin: 4px 0 6px;
}
.ad-search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.ad-hint {
  font-size: 0.8rem;
  margin: 4px 4px 8px;
}
.ad-facts {
  margin: 0;
  padding: 4px 14px;
}
.ad-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ad-fact:last-child {
  border-bottom: 0;
}
.ad-fact dt {
  color: var(--muted);
  font-size: 0.85rem;
}
.ad-fact dd {
  margin: 0;
  font-weight: 700;
  text-align: end;
  word-break: break-word;
}
.ad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}
.ad-grid .ad-fact:nth-last-child(2) {
  border-bottom: 0;
}
.ad-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}
.ad-suspend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ad-diag {
  align-self: stretch;
  margin: 2px 0 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  font-size: 0.85rem;
}
.ad-diag summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--primary);
}
.ad-diag summary time {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.75rem;
}
.ad-diag dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 8px 0;
}
.ad-diag dt {
  color: var(--muted);
}
.ad-diag dd {
  margin: 0;
  word-break: break-word;
}
.ad-diag h4 {
  margin: 10px 0 4px;
}
.ad-errors {
  margin: 0;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ad-errors code {
  font-size: 0.72rem;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--bg);
}
.ad-error {
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ad-error summary {
  cursor: pointer;
  list-style: none;
}
.ad-error summary::-webkit-details-marker {
  display: none;
}
.ad-error summary > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ad-error strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}
.ad-error code {
  font-size: 0.72rem;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--bg);
  align-self: flex-start;
}
.ad-error dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  margin: 12px 0;
  font-size: 0.8rem;
}
.ad-error dt {
  color: var(--muted);
}
.ad-error dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.ad-error pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px;
  margin: 0 0 12px;
}
@media (max-width: 420px) {
  .ad-grid {
    grid-template-columns: 1fr;
  }
  .ad-grid .ad-fact:nth-last-child(2) {
    border-bottom: 1px solid var(--border);
  }
}

/* Trade chats (scripts/trade-chat.js): photo and microphone buttons, recording bar, photos and voice in bubbles. */
.tc-composer {
  position: relative;
}
.tc-tool {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}
.tc-tool .ui-icon {
  width: 24px;
  height: 24px;
}
.tc-recording > :not(.tc-rec) {
  visibility: hidden;
}
.tc-rec {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--surface, var(--bg));
}
.tc-rec time {
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.tc-rec button {
  width: auto;
  min-height: 38px;
  padding: 0 14px;
}
.tc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: tc-blink 1s infinite;
}
@keyframes tc-blink {
  50% {
    opacity: 0.25;
  }
}
.tc-photo {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
.tc-photo img {
  display: block;
  width: min(240px, 62vw);
  min-height: 120px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.15);
}
.tc-voice {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-voice audio {
  width: min(230px, 58vw);
  height: 40px;
}
.tc-voice small {
  opacity: 0.7;
}
.tc-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.92);
}
.tc-viewer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tc-notice p {
  margin: 4px 0 16px;
  line-height: 1.7;
}

/* The date of birth (scripts/birth.js): day, month, year in one row; the one-time question for older accounts. */
.birth-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.2fr;
  gap: 8px;
}
.birth-row select {
  min-width: 0;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.birth-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
}
.birth-card {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
  padding: 22px 18px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.birth-card h2,
.birth-card p {
  margin: 0;
}
.birth-problem {
  color: #dc2626;
  font-size: 14px;
}
/* The app's books (accounts.js): filters, summary tiles, the revenue/expense chart, tables and forms. */
.acc-page {
  --acc-rev: #2a78d6;
  --acc-exp: #eb6834;
  --acc-ok: #0f7a3a;
  --acc-bad: #c2410c;
}
body.dark .acc-page {
  --acc-rev: #3987e5;
  --acc-exp: #d95926;
  --acc-ok: #22c55e;
  --acc-bad: #fb923c;
}
.acc-filters {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.acc-filters .chips,
.acc-kinds {
  padding: 6px 0;
}
.acc-mode .chip {
  font-weight: 700;
}
.acc-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 2px 0 6px;
}
.acc-custom label,
.acc-currency {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
.acc-custom input,
.acc-currency select,
.acc-field input,
.acc-field select,
.acc-rate input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.acc-currency {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}
.acc-currency select {
  flex: 1;
  min-width: 0;
}
.acc-body.stale {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.acc-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 8px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  font-size: 0.88rem;
}
.acc-note strong {
  flex-basis: 100%;
}
.acc-note span {
  flex: 1;
  min-width: 200px;
  color: var(--muted);
}
.acc-note.warn {
  background: color-mix(in srgb, var(--acc-bad) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--acc-bad) 35%, var(--border));
}
.acc-note .secondary-button {
  padding: 9px 14px;
}
.acc-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.acc-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.acc-tile.main {
  grid-column: 1 / -1;
}
.acc-tile small {
  color: var(--muted);
  font-size: 0.8rem;
}
.acc-tile b {
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}
.acc-tile.main b {
  font-size: 1.7rem;
  color: var(--primary);
}
.acc-tile.main b.neg {
  color: var(--acc-bad);
}
.acc-tile .muted {
  font-size: 0.78rem;
}
@media (min-width: 640px) {
  .acc-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.acc-money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
}
.acc-line .acc-money,
.acc-entry .acc-money {
  flex: none;
}
.acc-sub,
.acc-empty {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.82rem;
}
.acc-foot {
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 10px 4px 18px;
}
.acc-chart {
  padding: 12px 12px 8px;
}
.acc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.acc-legend .muted {
  margin-inline-start: auto;
}
.acc-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-inline-end: 6px;
  vertical-align: -1px;
}
.acc-swatch.rev,
.acc-bar.rev {
  background: var(--acc-rev);
  fill: var(--acc-rev);
}
.acc-swatch.exp,
.acc-bar.exp {
  background: var(--acc-exp);
  fill: var(--acc-exp);
}
.acc-plot {
  position: relative;
}
.acc-plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
.acc-grid {
  stroke: var(--border);
  stroke-width: 1;
}
.acc-base {
  stroke: var(--muted);
  stroke-width: 1;
  opacity: 0.6;
}
.acc-axis {
  fill: var(--muted);
  font-size: 11px;
  font-family: inherit;
}
.acc-hit {
  fill: transparent;
  cursor: pointer;
}
.acc-bucket.on .acc-hit {
  fill: color-mix(in srgb, var(--text) 6%, transparent);
}
.acc-tooltip {
  position: absolute;
  top: 4px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  font-size: 0.78rem;
  pointer-events: none;
  direction: rtl;
}
.acc-tooltip[hidden] {
  display: none;
}
.acc-table-view summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 0.85rem;
  padding: 6px 2px;
}
.acc-table-wrap {
  overflow-x: auto;
}
.acc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.acc-table th,
.acc-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: start;
  white-space: nowrap;
}
.acc-table thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
}
.acc-table tbody tr:last-child > * {
  border-bottom: 0;
}
.acc-checks .acc-check-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.acc-check-head.ok {
  color: var(--acc-ok);
}
.acc-check-head.bad,
.acc-check.bad small {
  color: var(--acc-bad);
}
.acc-check-head .ui-icon {
  width: 20px;
  height: 20px;
}
.ad-row > .acc-check-nums {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 0.8rem;
}
.acc-jline small {
  font-size: 0.78rem;
}
.ad-row > .acc-cur-profit {
  flex: none;
  align-items: flex-end;
  gap: 2px;
}
.acc-cur small .acc-money {
  font-weight: 600;
}
.acc-entry time {
  margin-top: 2px;
}
.acc-tag {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc-bad) 14%, var(--surface));
  color: var(--acc-bad);
}
.acc-more {
  margin: 10px 0 18px;
}
.acc-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 2px;
}
.acc-entry-head .acc-money {
  font-size: 1.5rem;
}
.acc-memo {
  padding: 12px 14px;
}
.acc-memo p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.acc-reverse {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-top: 16px;
}
.acc-reverse label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.acc-reverse input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.acc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.acc-types {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
}
.acc-types legend {
  padding: 0 6px;
}
.acc-type {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.acc-type:last-child {
  border-bottom: 0;
}
.acc-type span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc-type small {
  color: var(--muted);
  font-size: 0.8rem;
}
.acc-type input,
.acc-from input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  flex: none;
}
.acc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.acc-from {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.acc-from legend {
  width: 100%;
  margin-bottom: 6px;
}
.acc-from label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
}
.acc-row2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
}
.acc-rate {
  gap: 8px;
}
.acc-rate input[name="rate"] {
  width: 120px;
  flex: none;
}
.acc-rate input[name="currency"] {
  width: 90px;
  text-transform: uppercase;
}
.acc-rate .secondary-button {
  flex: none;
  padding: 10px 14px;
}
.acc-rate.missing {
  background: color-mix(in srgb, var(--acc-bad) 8%, transparent);
}
.ad-row .acc-from-to {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
}
.acc-from-to b {
  color: var(--muted);
}
/* A location in real chats (chat-media.js locationMarkup), like WhatsApp: the map's picture with the pin, a line under it. */
.location-message {
  padding: 3px 3px 5px;
}
.real-location {
  position: relative;
  display: block;
  width: min(260px, 64vw);
  aspect-ratio: 2 / 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #e8eef3;
  cursor: pointer;
}
body.dark .real-location {
  background: #2a3036;
}
.real-location img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-location-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 36px;
  margin: -36px 0 0 -12px;
  fill: #e53935;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%));
}
.real-location-pin circle {
  fill: #fff;
}
.real-location-label {
  display: block;
  padding: 6px 8px 0;
  font-weight: 600;
}
.location-message > .message-meta {
  padding-inline: 8px;
}
/* A location with its place: the name, the address under it. */
.real-location-name {
  display: block;
  font-weight: 600;
}
.real-location-address {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}
/* A QR code in the chat camera's view (chat-camera.js): a chip above the zoom buttons, like WhatsApp; a tap opens it. */
.cc-code {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 48px);
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: #ffd60a;
  color: #111;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: cc-code-in 0.18s ease-out;
}
.cc-code[hidden] {
  display: none;
}
.cc-code .ui-icon {
  flex: none;
  width: 20px;
  height: 20px;
}
.cc-code span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@keyframes cc-code-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Calls tab (calls.js callsView): cards on the grey page, like the approved preview «الناعم المصلّح». */
.calls-page {
  max-width: 760px;
  margin: auto;
  padding-top: 16px;
}
.calls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.calls-head h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}
.calls-tools {
  display: flex;
  gap: 6px;
}
.calls-tool {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}
.calls-tool.on {
  background: var(--primary);
  color: #fff;
}
.calls-tool .ui-icon {
  width: 21px;
  height: 21px;
}
.calls-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.calls-search .ui-icon {
  width: 19px;
  height: 19px;
  flex: none;
}
.calls-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font-size: 16px;
}
.calls-filter {
  display: flex;
  height: 40px;
  margin-bottom: 12px;
  padding: 3px;
  border-radius: 12px;
  background: #e8eaf0;
}
.calls-filter button {
  flex: 1;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.calls-filter button.on {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.calls-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.calls-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.calls-action {
  height: 64px;
  border: 0;
  border-radius: 18px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: start;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}
.calls-tile {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
}
.calls-tile .ui-icon {
  width: 20px;
  height: 20px;
}
.calls-title {
  margin: 0 4px 8px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.calls-list,
.calls-empty-card {
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.calls-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 72px;
  padding-inline: 14px 10px;
}
.calls-row[hidden] {
  display: none;
}
.calls-row + .calls-row::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 76px 0;
  border-top: 1px solid var(--border);
}
.calls-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.calls-row .chat-avatar {
  position: relative;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 600;
}
.calls-row .chat-avatar[class*="calls-tone-"] {
  color: #fff;
}
.calls-tone-1 { background: linear-gradient(135deg, #ff8a65, #f4511e); }
.calls-tone-2 { background: linear-gradient(135deg, #7c4dff, #536dfe); }
.calls-tone-3 { background: linear-gradient(135deg, #26c6da, #00897b); }
.calls-tone-4 { background: linear-gradient(135deg, #ec407a, #ab47bc); }
.calls-tone-5 { background: linear-gradient(135deg, #ffca28, #fb8c00); }
.calls-tone-6 { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.calls-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.calls-copy strong {
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calls-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
}
.calls-direction {
  display: grid;
  color: #059669;
}
.calls-direction .ui-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}
.calls-row.missed strong,
.calls-row.missed .calls-direction {
  color: #ef4444;
}
.calls-again,
.calls-again-space {
  flex: none;
  width: 44px;
  height: 44px;
}
.calls-again {
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  cursor: pointer;
}
.calls-again .ui-icon {
  width: 20px;
  height: 20px;
}
.calls-none {
  margin: 0;
  padding: 22px 16px;
  text-align: center;
}
.calls-none[hidden] {
  display: none;
}
/* Loading: still grey rows (no shimmer, nothing to animate). */
.calls-loading .chat-avatar {
  background: var(--border);
}
.calls-loading .calls-copy {
  flex: 1;
  gap: 8px;
  margin-inline-start: 6px;
}
.calls-loading i {
  display: block;
  height: 10px;
  width: 45%;
  border-radius: 5px;
  background: var(--border);
}
.calls-loading i + i {
  width: 70%;
}
.calls-empty-card {
  padding: 40px 24px;
  text-align: center;
}
.calls-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
}
.calls-empty-icon .ui-icon {
  width: 32px;
  height: 32px;
}
.calls-empty-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.calls-empty-card p {
  margin: 6px 0 20px;
}
.calls-empty-card .primary-button {
  padding-inline: 24px;
}
body.dark .calls-tool,
body.dark .calls-search,
body.dark .calls-action,
body.dark .calls-list,
body.dark .calls-empty-card {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
body.dark .calls-filter {
  background: #26292a;
}
body.dark .calls-filter button.on,
body.dark .calls-tool.on {
  background: #3b82f6;
}
body.dark .calls-tile,
body.dark .calls-again,
body.dark .calls-empty-icon {
  background: rgba(96, 165, 250, 0.14);
  color: #60a5fa;
}
body.dark .calls-direction {
  color: #34d399;
}
/* «مكالمة جديدة» sheet (chat-call-links.js). */
.new-call-search {
  width: 100%;
  height: 44px;
  margin: 0 0 12px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}
.new-call-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.new-call-row[hidden] {
  display: none;
}
.new-call-row strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.new-call-row .chat-avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}
.calls-page .push-banner {
  margin: 0 0 12px;
}
/* ⋮ menu and calls chosen with a long press (calls.js initCallLogEditing). */
.calls-more {
  position: relative;
}
.calls-more .chat-overflow {
  top: 50px;
}
.calls-more.menu-open .chat-overflow {
  display: grid;
}
.calls-row {
  -webkit-touch-callout: none;
  user-select: none;
}
.calls-row.chosen {
  background: var(--primary-soft);
}
.calls-check {
  position: absolute;
  z-index: 1;
  inset-inline-start: 48px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #059669;
  color: #fff;
  border: 2px solid var(--surface);
  pointer-events: none;
}
.calls-check .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.calls-choosing {
  height: 44px;
}
.calls-choosing strong {
  flex: 1;
  font-size: 1.2rem;
}

/* ===== Chat refresh (2026-10-26, the owner approved the preview /assets/preview/chat): WhatsApp-like compact bubbles
   with the time in the last line, runs of messages, drawn ticks, day separators, plain header and message-bar icons,
   and the message menu next to the pressed message (app-menu.js positionMessageMenu). ===== */
.chat-view .messages {
  gap: 2px;
}
.chat-view .messages > .bubble {
  margin-top: 6px;
}
.chat-view:not(.group-chat) .messages > .bubble.me + .bubble.me,
.chat-view:not(.group-chat) .messages > .bubble.them + .bubble.them {
  margin-top: 0;
}
body .chat-view .messages .bubble {
  padding: 6px 9px 8px;
  line-height: 1.4;
  border-radius: 8px;
}
body .chat-view .messages .bubble.me,
body .chat-view .messages .bubble.them {
  border-radius: 8px;
}
/* The square corner only on the first message of a run (in groups on every message of others, as their names show). */
body .chat-view .messages .bubble.me:not(.bubble.me + .bubble.me) {
  border-top-right-radius: 0;
}
body .chat-view .messages .bubble.them:not(.bubble.them + .bubble.them),
body .chat-view.group-chat .messages .bubble.them {
  border-top-left-radius: 0;
}
/* The space once kept for a menu arrow that no longer exists. */
body .chat-view .messages .bubble.message-own,
body .chat-view .messages .bubble.message-context {
  padding-inline-end: 9px;
  padding-bottom: 8px;
}
body .chat-view .messages .message-text {
  padding-inline-end: 0;
}
/* The time (and ticks) sit in the bubble's bottom corner; a blank as wide as them ends the text, so a short message
   stays on one line and a long one gets a line for the time only when its last line is full. */
.chat-view .messages .bubble:has(> .message-text):not(:has(.message-translation)) {
  position: relative;
  --meta-room: 66px;
}
.chat-view .messages .bubble.them:has(> .message-text) {
  --meta-room: 48px;
}
.chat-view .messages .bubble.is-starred:has(> .message-text) {
  --meta-room: 82px;
}
.chat-view .messages .bubble:has(> .message-meta .edited-mark) {
  --meta-room: 118px;
}
.chat-view .messages .bubble:has(> .message-text):not(:has(.message-translation)) > .message-text::after {
  content: "";
  display: inline-block;
  width: var(--meta-room);
  height: 1px;
}
.chat-view .messages .bubble:has(> .message-text):not(:has(.message-translation)) > .message-meta {
  position: absolute;
  bottom: 4px;
  left: 9px;
  margin: 0;
  min-height: 0;
  line-height: 15px;
}
.chat-view .messages .bubble:has(> .message-text:dir(ltr)):not(:has(.message-translation)) > .message-meta {
  left: auto;
  right: 9px;
}
body .chat-view .messages .bubble .message-meta {
  direction: ltr;
  gap: 3px;
  font-size: 11px;
}
body .messages .bubble .delivery {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0;
}
.tick-icon {
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tick-icon.tick-one {
  width: 12px;
}
.tick-icon.tick-two {
  width: 16px;
}
.tick-icon.msg-clock {
  width: 12px;
  height: 12px;
  stroke-width: 1.4;
}
/* Day separators (chat-open.js placeDayChips): stay on top while scrolling through that day. */
.day-chip {
  align-self: center;
  position: sticky;
  top: 6px;
  z-index: 3;
  margin: 8px 0 4px;
  direction: rtl;
}
.day-chip span {
  display: block;
  padding: 5px 12px;
  border-radius: 8px;
  background: #fff;
  color: #54656f;
  font-size: 12.5px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
body.dark .day-chip span {
  background: #1d1f1f;
  color: #aebac1;
}
.chat-view .e2e-notice {
  max-width: 310px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
}
.chat-view .e2e-notice .ui-icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
  vertical-align: -1px;
}
.chat-view .messages[data-real-chat] {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
body.dark .chat-view .messages[data-real-chat] {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
/* Header: a plain back arrow with the count next to it and plain call icons, like WhatsApp on the iPhone. */
body.chat-open .topbar > .chat-header .chat-back {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  width: auto !important;
  min-width: 36px;
  display: flex !important;
  align-items: center;
  gap: 0;
  color: var(--text);
}
body.chat-open .topbar > .chat-header .chat-back .chat-back-count {
  position: static;
  min-width: 0;
  height: auto;
  padding: 0 2px;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
}
body.chat-open .topbar > .call-actions button {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
body.chat-open .topbar > .call-actions .ui-icon {
  width: 25px;
  height: 25px;
}
/* Message bar: plain icons, a round input, only the voice/send button filled. */
body.chat-open .composer {
  background: #f6f6f6;
  backdrop-filter: none;
  box-shadow: none;
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
body.dark.chat-open .composer {
  background: #1d1f1f;
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.chat-open .composer-tools > #attach-button,
body.chat-open .composer .camera-button {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #54656f !important;
}
body.dark.chat-open .composer-tools > #attach-button,
body.dark.chat-open .composer .camera-button,
body.dark.chat-open .composer-input-wrap > #emoji-button {
  color: #aebac1 !important;
}
body.chat-open .composer-tools > #attach-button .ui-icon,
body.chat-open .composer .camera-button .ui-icon {
  width: 26px;
  height: 26px;
}
body.chat-open .composer-input-wrap {
  height: 38px !important;
  border-radius: 19px !important;
  background: #fff !important;
  border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}
body.dark.chat-open .composer-input-wrap {
  background: #2a2d2d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.chat-open .composer-input-wrap > #emoji-button {
  background: none !important;
  border: 0 !important;
  color: #54656f !important;
}
body.chat-open .composer-input-wrap > #emoji-button .ui-icon {
  width: 22px;
  height: 22px;
}
body.chat-open .composer .voice-button,
body.chat-open .composer .send-message-button {
  width: 40px;
  height: 40px;
}
body.chat-open .composer .send-message-button .ui-icon {
  width: 20px;
  height: 20px;
}
/* The message menu next to the pressed message (positions from app-menu.js). */
.messages .bubble.menu-open > .message-actions {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  transform: none !important;
  translate: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-height: none !important;
  z-index: 50 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none;
  direction: rtl;
}
.messages .bubble.menu-open > .message-actions > .reaction-bar,
.messages .bubble.menu-open > .message-actions > .message-action-list {
  position: fixed !important;
  inset: auto;
  bottom: auto !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: auto;
}
.messages .bubble.menu-open > .message-actions > .reaction-bar {
  display: flex !important;
  gap: 2px;
  width: auto !important;
  max-width: calc(100vw - 16px);
  padding: 5px 6px !important;
  border-radius: 26px !important;
  background: var(--surface) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
  overflow: visible !important;
  direction: ltr;
}
.messages .bubble.menu-open > .message-actions > .reaction-bar button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
}
.messages .bubble.menu-open > .message-actions > .reaction-bar button[data-more-reactions] {
  background: var(--bg);
  color: var(--muted);
}
.messages .bubble.menu-open > .message-actions > .reaction-bar img {
  width: 28px;
  height: 28px;
}
.messages .bubble.menu-open > .message-actions > .message-action-list {
  display: block !important;
  width: min(250px, calc(100vw - 16px)) !important;
  min-height: 0 !important;
  border-radius: 13px !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.messages .bubble.menu-open .message-action-list::after {
  display: none !important;
}
.messages .bubble.menu-open .message-action-list button {
  width: 100%;
  height: 42px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 15.5px !important;
  text-align: start;
}
.messages .bubble.menu-open .message-action-list button .action-ui-icon {
  width: 19px;
  height: 19px;
  color: var(--muted);
}
.messages .bubble.menu-open .primary-message-actions .danger-action {
  color: var(--danger) !important;
  border-top: 6px solid var(--bg) !important;
  border-bottom: 0 !important;
}
.messages .bubble.menu-open .primary-message-actions .danger-action .action-ui-icon,
.messages .bubble.menu-open .secondary-message-actions [data-report-message] .action-ui-icon {
  color: var(--danger);
}
.messages .bubble.menu-open .secondary-message-actions [data-report-message] {
  color: var(--danger) !important;
}
.messages .bubble.menu-open .secondary-message-actions button:last-child {
  border-bottom: 0 !important;
}
.messages .bubble.menu-open .previous-options-button {
  justify-content: flex-start !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
/* Emoji in message text drawn as Google's (emoji-picker.js emojifyText); a message of 1-3 emoji only shows them big. */
.text-emoji {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.3em;
  overflow: hidden;
  color: transparent;
  background: var(--emoji) center / contain no-repeat;
  line-height: 1.3em;
  text-align: center;
}
.messages .bubble.emoji-only .text-emoji {
  width: 2.4em;
  height: 2.4em;
  line-height: 2.4em;
  margin: 2px 1px;
}
/* TN TN's own look for my messages (the owner picked «سماوي زاهي», 2026-10-26): a bright sky-blue with white text;
   unread ticks faded white, read ticks full white. Everything inside (quotes, links, voice notes) turns light to match. */
body .chat-view .messages .bubble.me {
  background: linear-gradient(135deg, #46b3ff 0%, #2f86ff 100%);
  color: #fff;
}
body.dark .chat-view .messages .bubble.me {
  background: linear-gradient(135deg, #2f8cff 0%, #2563eb 100%);
  color: #fff;
}
body .chat-view .messages .bubble.me .message-meta,
body .chat-view .messages .bubble.me .delivery {
  color: rgba(255, 255, 255, 0.78);
}
body .chat-view .messages .bubble.me .delivery {
  color: rgba(255, 255, 255, 0.55);
}
body .chat-view .messages .bubble.me .delivery.read {
  color: #fff;
}
body.hide-read-receipts .chat-view:not(.group-chat) .messages .bubble.me .delivery.read {
  color: rgba(255, 255, 255, 0.55);
}
body .chat-view .messages .bubble.me .delivery.failed {
  color: #ffd2d2;
}
body .chat-view .messages .bubble.me .reply-quote {
  background: rgba(255, 255, 255, 0.18);
  border-inline-start-color: #fff;
}
body .chat-view .messages .bubble.me .reply-quote strong {
  color: #fff;
}
body .chat-view .messages .bubble.me .reply-quote-text,
body .chat-view .messages .bubble.me .forwarded-label,
body .chat-view .messages .bubble.me .message-translation {
  color: rgba(255, 255, 255, 0.85);
}
body .chat-view .messages .bubble.me .message-translation {
  border-top-color: rgba(255, 255, 255, 0.3);
}
body .chat-view .messages .bubble.me .attachment-file-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
body .chat-view .messages .bubble.me .message-link,
body .chat-view .messages .bubble.me a {
  color: #fff;
  text-decoration: underline;
}
body .chat-view .messages .bubble.me .smart-word {
  text-decoration-color: rgba(255, 255, 255, 0.8);
}
body .chat-view .messages .bubble.me.voice-message .audio-play,
body.dark .chat-view .messages .bubble.me.voice-message .audio-play {
  color: #fff;
}
body .chat-view .messages .bubble.me.voice-message .audio-wave i,
body.dark .chat-view .messages .bubble.me.voice-message .audio-wave i {
  background: rgba(255, 255, 255, 0.45);
}
body .chat-view .messages .bubble.me.voice-message .audio-wave i.played,
body.dark .chat-view .messages .bubble.me.voice-message .audio-wave i.played,
body .chat-view .messages .bubble.me .audio-thumb {
  background: #fff;
}
body .chat-view .messages .bubble.me.voice-message .audio-speed,
body.dark .chat-view .messages .bubble.me.voice-message .audio-speed {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
body .chat-view .messages .bubble.me .voice-mic {
  background: none;
}
body.chat-open .composer .voice-button,
body.chat-open .composer .send-message-button {
  background: var(--primary);
}
/* A message I send comes in with a small spring (chat-open.js upsertBubble). */
@keyframes bubble-in {
  from {
    opacity: 0;
    scale: 0.92;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
.messages .bubble.bubble-in {
  animation: bubble-in 0.18s ease-out;
  transform-origin: bottom right;
}
/* «N رسائل غير مقروءة» above the first unread message (chat-open.js markUnread). */
.unread-line {
  align-self: stretch;
  margin: 8px 0 4px;
  padding: 5px 0;
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
  direction: rtl;
}
.unread-line span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 8px;
  background: #fff;
  color: #54656f;
  font-size: 12.5px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
body.dark .unread-line {
  background: rgba(0, 0, 0, 0.25);
}
body.dark .unread-line span {
  background: #1d1f1f;
  color: #aebac1;
}
/* The round ⌄ button back to the newest message, with the count of messages that came meanwhile. */
.jump-end {
  position: fixed;
  z-index: 30;
  left: 12px;
  bottom: calc(66px + env(safe-area-inset-bottom));
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(11, 20, 26, 0.2);
  cursor: pointer;
}
.jump-end[hidden] {
  display: none;
}
.jump-end .ui-icon {
  width: 22px;
  height: 22px;
}
.jump-end b {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
}
.jump-end b[hidden] {
  display: none;
}
.message-options-open .jump-end {
  display: none;
}
/* ❤️ from a double tap: grows over the message and fades (real-chat.js heartPop). */
@keyframes heart-pop {
  0% {
    opacity: 0;
    scale: 0.3;
  }
  35% {
    opacity: 1;
    scale: 1.25;
  }
  70% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.1;
  }
}
.heart-pop {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: none;
  animation: heart-pop 0.7s ease-out forwards;
}
.heart-pop img {
  width: 100%;
  height: 100%;
}
.messages .bubble[data-real-id] {
  position: relative;
}
/* Times, phone numbers and places in messages (chat-smart.js): underlined, a tap acts on them. */
.smart-word {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--primary) 70%, transparent);
  cursor: pointer;
}