/* Mobile app UI foundation. Scoped to the Capacitor shell and mobile preview. */
:root.native-mobile {
  --ui-canvas: #f7f6fb;
  --ui-surface: #ffffff;
  --ui-subtle: #f0edf6;
  --ui-text: #241d32;
  --ui-muted: #625a70;
  --ui-border: #ded8e8;
  --ui-accent: #6d28d9;
  --ui-accent-soft: #eee6ff;
  --ui-focus: #7c3aed;
  --ui-danger: #b91c1c;
}

:root.native-mobile[data-theme="dark"] {
  --ui-canvas: #121b22;
  --ui-surface: #1c2832;
  --ui-subtle: #24333e;
  --ui-text: #f1f0f7;
  --ui-muted: #b5bdce;
  --ui-border: #394651;
  --ui-accent: #c4a7ff;
  --ui-accent-soft: #36264d;
  --ui-focus: #c4a7ff;
  --ui-danger: #fca5a5;
}
:root.native-mobile body :is(#app, #overlay) *,
:root.native-mobile body :is(#app, #overlay) *::before,
:root.native-mobile body :is(#app, #overlay) *::after {
  box-sizing: border-box;
}
:root.native-mobile
  body
  :is(#app, #overlay)
  :is(button, input, textarea, select, a):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
:root.native-mobile body #overlay .panel {
  color: var(--ui-text);
}
:root.native-mobile body #overlay.navigation-view .panel > header {
  color: var(--ui-text);
  background: var(--ui-canvas);
  border-bottom: 1px solid var(--ui-border);
}
:root.native-mobile body #overlay.navigation-view #panel-body {
  color: var(--ui-text);
  background: var(--ui-canvas);
  min-width: 0;
  scrollbar-gutter: stable;
}
:root.native-mobile
  body
  #panel-body
  :is(.panel-content, .settings-detail, .workspace-content) {
  min-width: 0;
}
:root.native-mobile body #panel-body :is(h2, h3, h4) {
  line-height: 1.3;
  text-wrap: balance;
}
:root.native-mobile body #panel-body :is(p, small) {
  line-height: 1.55;
}
:root.native-mobile body #panel-body .empty {
  color: var(--ui-muted);
  padding: 32px 20px;
  text-align: center;
  line-height: 1.6;
}
:root.native-mobile body #panel-body .empty :is(span, p, small, svg) {
  color: var(--ui-muted);
}
:root.native-mobile body #panel-body .empty > span:first-child {
  display: block;
  font-weight: 600;
}
:root.native-mobile
  body
  #panel-body
  :is(
    .settings-form,
    .settings-detail,
    #settings-detail,
    .workspace-panel,
    .workspace-company-page,
    .business-tool-card,
    .workspace-payment-center
  )
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="color"]),
    select,
    textarea
  ) {
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 12px;
}
:root.native-mobile body #panel-body .settings-form {
  gap: 18px;
}
:root.native-mobile body #panel-body .settings-form label {
  font-size: 14px;
  color: var(--ui-muted);
  gap: 8px;
}
:root.native-mobile body #panel-body .settings-form small {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile body #panel-body :is(.settings-clone-row, .privacy-row) {
  min-height: 64px;
  gap: 12px;
}
:root.native-mobile
  body
  #panel-body
  :is(.settings-clone-row, .privacy-row)
  :is(b, strong) {
  font-size: 15px;
}
:root.native-mobile
  body
  #panel-body
  :is(.settings-clone-row, .privacy-row)
  small {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #panel-body
  :is(.profile-security, .media-library-header)
  :is(p, small) {
  color: var(--ui-muted);
  font-size: 13px;
}
:root.native-mobile body #panel-body .profile-hero {
  border-radius: 20px;
  padding: 24px 20px;
}
:root.native-mobile body #panel-body .profile-hero p {
  font-size: 13px;
  color: #fff;
  max-width: 36ch;
  margin: 12px auto 0;
}
:root.native-mobile body #panel-body .profile-presence {
  font-size: 12px;
  padding: 4px 9px;
}
:root.native-mobile body #panel-body .profile-security {
  padding: 18px;
  border-radius: 16px;
}
:root.native-mobile
  body
  #overlay[data-panel="profile"]
  #panel-body
  .profile-hero
  p {
  font-size: 13px;
  color: #fff;
}
:root.native-mobile
  body
  #overlay[data-panel="profile"]
  #panel-body
  .profile-presence {
  font-size: 12px;
  padding: 4px 9px;
}
:root.native-mobile
  body
  #overlay[data-panel="profile"]
  #panel-body
  #profile-form
  .privacy-note {
  font-size: 13px;
  color: var(--ui-muted);
  line-height: 1.55;
}
:root.native-mobile
  body
  #overlay[data-panel="profile"]
  #panel-body
  .profile-security
  :is(p, small, span) {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile body #panel-body .media-library-tabs button {
  color: var(--ui-muted);
  min-height: 48px;
}
:root.native-mobile body #panel-body .media-library-tabs button.active {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
}
:root.native-mobile body #panel-body .media-library-header button {
  color: var(--ui-muted);
}
:root.native-mobile body #panel-body .my-status-row {
  min-height: 92px;
  padding: 18px;
  border-radius: 16px;
}
:root.native-mobile body #panel-body .my-status-row small {
  font-size: 13px;
  color: var(--ui-muted);
  margin-top: 5px;
}
:root.native-mobile body #panel-body .my-status-row em {
  color: var(--ui-accent);
}
:root.native-mobile
  body
  #overlay[data-panel="status"]
  #panel-body
  .status-person
  small {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #panel-body
  :is(.call-history-row, .call-contact-row)
  small {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #overlay[data-panel="calls"]
  :is(.call-history-row time, .calls-security) {
  color: var(--ui-muted);
  font-size: 13px;
}
:root.native-mobile
  body
  #overlay[data-panel="calls"]
  :is(
    .calls-directory-header button,
    .call-contact-row button,
    .call-history-row > button
  ) {
  min-width: 44px;
  min-height: 44px;
}
:root.native-mobile body #panel-body .calls-search input {
  font-size: 16px;
}
:root.native-mobile body #panel-body .news-ai-safety small {
  font-size: 12px;
}
:root.native-mobile body #panel-body .news-ai-safety strong {
  font-size: 13px;
}
:root.native-mobile body #panel-body .news-source-info small {
  font-size: 12px;
  color: var(--ui-muted);
}
:root.native-mobile body #panel-body :is(.workspace-tabs, .media-library-tabs) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
:root.native-mobile body #panel-body .workspace-tabs button {
  min-height: 48px;
  flex-shrink: 0;
}
:root.native-mobile
  body
  #panel-body
  :is(.workspace-section-intro, .workspace-upgrade-intro)
  p {
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #panel-body
  :is(.workspace-upgrade-intro, .workspace-company-page) {
  max-width: 100%;
}
:root.native-mobile
  body
  #panel-body
  :is(.workspace-members-table, .billing-invoices) {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 760px) {
  :root.native-mobile body #overlay.navigation-view .panel > header {
    min-height: 72px;
    padding: 12px 16px;
  }
  :root.native-mobile body #overlay.navigation-view #panel-title {
    font-size: 26px !important;
    line-height: 1.2;
    letter-spacing: -0.6px;
  }
  :root.native-mobile body #overlay.navigation-view .panel > header button {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  :root.native-mobile body #overlay.navigation-view #panel-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ui-subtle);
    color: var(--ui-muted);
  }
  :root.native-mobile body #panel-body .profile-panel {
    padding: 16px;
    display: grid;
    gap: 16px;
  }
  :root.native-mobile body #panel-body #profile-form {
    padding: 18px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
  }
  :root.native-mobile body #panel-body .profile-security button {
    min-height: 48px;
  }
  :root.native-mobile body #panel-body .media-library-header {
    padding: 16px;
    gap: 12px;
  }
  :root.native-mobile body #panel-body .media-library-header h2 {
    display: none;
  }
  :root.native-mobile body #panel-body .media-library-header p {
    margin: 0;
  }
  :root.native-mobile body #panel-body .media-library-header button {
    min-width: 44px;
    min-height: 44px;
  }
  :root.native-mobile body #panel-body #settings-detail {
    padding: 20px 16px 28px;
  }
  :root.native-mobile body #panel-body #settings-detail > h2 {
    font-size: 22px;
    margin: 0 0 20px;
  }
  :root.native-mobile body #panel-body .workspace-upgrade-intro {
    padding: 28px 20px;
    text-align: left;
  }
  :root.native-mobile body #panel-body .workspace-upgrade-intro h2 {
    font-size: 26px;
  }
  :root.native-mobile body #panel-body .workspace-upgrade-intro li {
    line-height: 1.6;
    padding-block: 6px;
  }
  :root.native-mobile body #panel-body .workspace-upgrade-intro .primary {
    width: 100%;
    min-height: 48px;
  }
  :root.native-mobile body #panel-body .workspace-hero {
    padding: 20px 16px;
    border-radius: 18px;
  }
  :root.native-mobile body #panel-body .workspace-hero-brand {
    min-width: 0;
    gap: 12px;
  }
  :root.native-mobile body #panel-body .workspace-hero-brand h3 {
    overflow-wrap: anywhere;
  }
  :root.native-mobile body #panel-body .workspace-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  :root.native-mobile body #panel-body .workspace-hero-metrics span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
  }
  :root.native-mobile body #panel-body .workspace-tabs {
    display: flex;
    flex-wrap: nowrap;
    padding: 8px 0;
    gap: 8px;
  }
  :root.native-mobile body #panel-body .workspace-tabs button {
    padding: 10px 14px;
    border-radius: 12px;
  }
  :root.native-mobile body #native-mobile-nav button small {
    font-size: 12px;
    line-height: 1.25;
  }
  :root.native-mobile body #native-mobile-nav button {
    min-width: 0;
  }
  :root.native-mobile body #app-rail.mobile-open {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  :root.native-mobile body #app-rail.mobile-open button {
    min-height: 56px;
  }
  :root.native-mobile body #app-rail.mobile-open button small {
    white-space: normal;
    line-height: 1.35;
  }
  :root.native-mobile body #panel-body :is(.news-post-card, .news-card) {
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root.native-mobile body :is(#app, #overlay) *,
  :root.native-mobile body :is(#app, #overlay) *::before,
  :root.native-mobile body :is(#app, #overlay) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep legacy detail pages on the same palette as the navigation shell. */
:root.native-mobile
  body
  #overlay[data-panel="tools"]
  #panel-body
  :is([data-delete-list], [data-delete-catalog], [data-delete-reply]) {
  color: var(--ui-danger);
}
:root.native-mobile
  body
  #overlay[data-panel="tools"]
  #panel-body
  :is(.business-tool-card, .business-tool-placeholder, #chat-lists article) {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
:root.native-mobile
  body
  #overlay[data-panel="tools"]
  #panel-body
  :is(.business-tool-card, #chat-lists article)
  :is(h3, h4, b, label) {
  color: var(--ui-text);
}
:root.native-mobile
  body
  #overlay[data-panel="tools"]
  #panel-body
  .business-tool-card
  :is(p, small) {
  color: var(--ui-muted);
  font-size: 13px;
}
:root.native-mobile
  body
  #overlay[data-panel="tools"]
  #panel-body
  .business-ai-badge {
  color: var(--ui-accent);
  font-size: 11px;
}
:root.native-mobile body #overlay[data-panel="tools"] #tools-detail button {
  min-height: 44px;
  font-size: 14px;
}
:root.native-mobile body #overlay[data-panel="tools"] #tools-detail .primary {
  color: #fff;
  background: #6d28d9;
  min-height: 48px;
}
:root.native-mobile body #overlay[data-panel="tools"] #chat-lists label {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--ui-text);
  background: var(--ui-subtle);
  font-size: 14px;
}
:root.native-mobile
  body
  #overlay[data-panel="tools"]
  #chat-lists
  input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #6d28d9;
}
:root.native-mobile body #overlay[data-panel="tools"] .tool-list-form input {
  min-height: 48px;
  font-size: 16px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  :is(
    .settings-clone-row,
    .settings-clone-switch,
    .settings-clone-choice,
    .privacy-row
  ) {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  min-height: 64px;
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  :is(b, strong, label, h2, h3, h4) {
  color: var(--ui-text);
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  small {
  color: var(--ui-muted);
  font-size: 13px;
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  .settings-device-select
  select {
  padding-left: 44px !important;
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  .settings-device-page
  > label {
  font-size: 14px;
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  :is(
    .settings-clone-note,
    .settings-info-card > span,
    .ai-settings-note small
  ) {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  .shortcut-dialog
  > h2 {
  display: none;
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  .settings-clone-page:has([data-business-tool])
  > h3:first-child {
  display: none;
}
:root.native-mobile
  body
  #overlay[data-panel="settings"]
  #settings-detail
  :is(
    .settings-info-card a,
    .settings-info-card button,
    .linked-device-row > i
  ) {
  color: var(--ui-accent);
}
:root.native-mobile body #overlay.navigation-view[data-panel="workspace"] {
  --ws-bg: var(--ui-canvas);
  --ws-surface: var(--ui-surface);
  --ws-surface-2: var(--ui-subtle);
  --ws-border: var(--ui-border);
  --ws-text: var(--ui-text);
  --ws-muted: var(--ui-muted);
  --ws-purple: var(--ui-accent);
  --workspace-surface: var(--ui-surface);
  --workspace-surface-raised: var(--ui-subtle);
  --workspace-border: var(--ui-border);
  --workspace-text: var(--ui-text);
  --workspace-muted: var(--ui-muted);
  --workspace-subtle: var(--ui-muted);
  --workspace-accent: var(--ui-accent);
}
:root.native-mobile
  body
  #overlay[data-panel="workspace"]
  #workspace-content
  :is(small, p, label) {
  font-size: 13px;
  line-height: 1.55;
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .workspace-tabs {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .workspace-tabs
  button {
  font-size: 14px;
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .workspace-tabs
  button
  span {
  font-size: 14px;
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .workspace-tabs
  button.active {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: var(--ui-border);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .workspace-hero-brand
  p {
  font-size: 13px;
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  :is(
    .workspace-form,
    .workspace-invite,
    .employee-invite-card,
    .company-directory > section,
    .workspace-team-list article,
    .attendance-section,
    .member-list > div
  ) {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  #workspace-content
  :is(h3, h4, strong, label) {
  color: var(--ui-text);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  #workspace-content
  :is(p, small) {
  color: var(--ui-muted);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .workspace-section-intro {
  background: linear-gradient(135deg, #4c1d95, #173e4b);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .attendance-summary {
  color: var(--ui-text);
  background: var(--ui-accent-soft);
  border-color: var(--ui-border);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  .attendance-summary
  strong {
  color: var(--ui-accent);
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  #workspace-content
  button {
  min-height: 44px;
  font-size: 14px;
  padding: 10px 12px;
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  :is(.team-actions, .channel-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:root.native-mobile
  body
  #overlay.navigation-view[data-panel="workspace"]
  #workspace-content
  :is(.workspace-section-intro, .workspace-billing > header)
  :is(h2, h3, h4, p, small, strong, span) {
  color: #fff;
}
:root.native-mobile[data-theme="light"]
  body
  #overlay.navigation-view[data-panel="workspace"]
  :is(input, select, textarea) {
  color-scheme: light;
}
:root.native-mobile
  body
  #panel-body
  :is(.business-tool-row, .workspace-payment-center)
  small {
  color: var(--ui-muted);
  font-size: 13px;
}
:root.native-mobile
  body
  #panel-body
  :is(.business-tool-card, .workspace-payment-center)
  label {
  color: var(--ui-text);
  font-size: 14px;
  line-height: 1.5;
}
:root.native-mobile
  body
  #overlay[data-panel="payments"]
  #panel-body
  .payment-center-heading
  > div
  > span {
  color: var(--ui-accent);
  font-size: 11px;
}
:root.native-mobile
  body
  #overlay[data-panel="workspace"]
  :is(.workspace-hero, .workspace-section-intro)
  :is(h2, h3, p, small, strong, span) {
  color: #fff;
}
@media (max-width: 760px) {
  :root.native-mobile body #panel-body .business-tools-heading {
    display: none;
  }
  :root.native-mobile
    body
    #overlay.navigation-view[data-panel="workspace"]
    .workspace-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 0;
    gap: 8px;
    scrollbar-width: thin;
  }
  :root.native-mobile
    body
    #overlay.navigation-view[data-panel="workspace"]
    .workspace-tabs
    button {
    flex: 0 0 auto;
    min-height: 48px;
  }
  :root.native-mobile
    body
    #overlay.navigation-view[data-panel="workspace"]
    .workspace-hero-metrics
    span {
    padding: 10px 6px;
    overflow-wrap: normal;
  }
  :root.native-mobile
    body
    #overlay.navigation-view[data-panel="workspace"]
    .workspace-hero-metrics
    strong {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-plan-card
    :is(.plan-heading p, li) {
    font-size: 13px;
    line-height: 1.55;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-plan-card
    ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-plan-card
    li:nth-child(n + 5) {
    display: flex;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-plan-card
    button {
    min-height: 48px;
    font-size: 15px;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    :is(.plan-price > span, .plan-limits span, .workspace-flow-steps) {
    font-size: 12px;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-flow-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-flow-steps
    > span {
    flex: 1 1 120px;
  }
  :root.native-mobile
    body
    #overlay[data-panel="workspace"]
    .workspace-flow-steps
    > i {
    display: none;
  }
}

/* Conversation ergonomics: native fonts, readable text and reachable controls. */
:root.native-mobile body #messages .mobile-reaction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
:root.native-mobile body #messages .mobile-reaction-chips button {
  min-height: 44px;
  min-width: 44px;
  padding: 4px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  color: var(--ui-text);
  background: var(--ui-surface);
  font-size: 16px;
}
:root.native-mobile
  body
  #messages
  .mobile-reaction-chips
  button[aria-pressed="true"] {
  border-color: var(--ui-accent);
}
:root.native-mobile.native-android
  body
  #messages
  .mobile-reaction-chips
  button {
  min-height: 48px;
  min-width: 48px;
}
:root.native-mobile {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
}
:root.native-mobile body :is(button, input, textarea, select) {
  font-family: inherit;
}
:root.native-mobile body #sidebar .chat strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
:root.native-mobile body #sidebar .chat small {
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.4;
}
:root.native-mobile body #sidebar .chat time {
  color: var(--ui-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
:root.native-mobile body #workspace-switcher strong {
  font-size: 14px;
}
:root.native-mobile body #workspace-switcher small {
  font-size: 12px;
  color: var(--ui-muted);
}
:root.native-mobile body #messages .message {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  border-radius: 18px 18px 18px 6px;
  padding: 12px 14px 8px;
  overflow-wrap: anywhere;
  touch-action: pan-y;
  transform: translateX(var(--reply-swipe-offset, 0px));
  transition: transform 160ms ease;
}
:root.native-mobile body #messages .message.reply-swiping {
  transition: none;
}
:root.native-mobile body #messages .message.mine {
  background: var(--ui-accent-soft);
  border-radius: 18px 18px 6px 18px;
}
:root.native-mobile body #messages .message > strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-accent);
}
:root.native-mobile body #messages .message > p {
  font-size: 16px;
  line-height: 1.5;
}
:root.native-mobile body #active-name {
  font-size: 17px;
  font-weight: 600;
}
:root.native-mobile body #active-subtitle {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile body #messages .message-meta {
  min-height: 28px;
  padding: 5px 0;
  color: var(--ui-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
:root.native-mobile body #messages .message-menu,
:root.native-mobile body #messages .message-reaction-trigger {
  min-width: 44px;
  min-height: 44px;
}
:root.native-mobile body #message-reply-preview {
  background: var(--ui-accent-soft);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
:root.native-mobile body #message-reply-preview strong {
  font-size: 14px;
  color: var(--ui-accent);
}
:root.native-mobile body #message-reply-preview small {
  font-size: 13px;
  color: var(--ui-muted);
}
:root.native-mobile body #messages .message-quoted-reply {
  background: var(--ui-subtle);
  border-color: var(--ui-accent);
  min-height: 44px;
}
:root.native-mobile body #messages .message-quoted-reply span {
  font-size: 13px;
}
:root.native-mobile body .conversation .encryption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-muted);
  background: var(--ui-canvas);
}
:root.native-mobile
  body
  #panel-body
  :is(.message-edit-form, .report-message-card, .message-info-card) {
  color: var(--ui-text);
}
:root.native-mobile body #panel-body .message-edit-form textarea {
  min-height: 140px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 12px;
}
:root.native-mobile body #panel-body .message-edit-actions button {
  min-height: 48px;
  font-size: 15px;
}
:root.native-mobile body #overlay.message-actions-popover .panel {
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 24px));
  margin-inline: auto;
  max-height: calc(100dvh - 100px);
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  overflow: hidden;
}
:root.native-mobile body #overlay.message-actions-popover .panel > header {
  display: flex !important;
  align-items: center;
  min-height: 60px;
  padding: 8px 16px;
  background: var(--ui-surface);
  color: var(--ui-text);
  border-bottom: 1px solid var(--ui-border);
}
:root.native-mobile
  body
  #overlay.message-actions-popover
  .panel
  > header
  :is(
    small,
    #panel-mobile-menu,
    #panel-back,
    #panel-live-media,
    #panel-weather
  ) {
  display: none !important;
}
:root.native-mobile body #overlay.message-actions-popover #panel-title {
  font-size: 18px;
  font-weight: 600;
}
:root.native-mobile body #overlay.message-actions-popover #panel-close {
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ui-subtle);
  color: var(--ui-text);
}
:root.native-mobile body #overlay.message-actions-popover #panel-body {
  overflow: auto;
  max-height: calc(100dvh - 160px);
}
:root.native-mobile body #overlay.message-actions-popover .quick-reactions {
  position: static;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  gap: 2px;
  padding: 10px 12px 4px;
  border: 0;
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
}
:root.native-mobile
  body
  #overlay.message-actions-popover
  .quick-reactions
  button {
  min-width: 0;
  width: 100%;
  height: 44px;
  font-size: 24px;
  background: transparent;
  color: var(--ui-text);
}
:root.native-mobile
  body
  #overlay.message-actions-popover
  .mobile-reaction-note {
  margin: 0;
  padding: 4px 16px 12px;
  font-size: 12px;
  color: var(--ui-muted);
}
:root.native-mobile body #overlay.message-actions-popover .action-list {
  max-height: none;
  border-top: 1px solid var(--ui-border);
}
:root.native-mobile body #overlay.message-actions-popover .action-list button {
  min-height: 48px;
  font-size: 16px;
  padding: 12px 18px;
  color: var(--ui-text);
  background: var(--ui-surface);
}
:root.native-mobile
  body
  #overlay.message-actions-popover
  .action-list
  button:hover,
:root.native-mobile
  body
  #overlay.message-actions-popover
  .action-list
  button:focus-visible {
  background: var(--ui-subtle);
}
:root.native-mobile body #overlay.message-actions-popover .action-list .danger {
  color: var(--ui-danger) !important;
}
:root.native-mobile body #inline-reaction-picker {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
  border-radius: 18px;
}
:root.native-mobile body #inline-reaction-picker button {
  min-width: 0;
  min-height: 44px;
  font-size: 24px;
  color: var(--ui-text);
}
:root.native-mobile body #inline-reaction-picker button:hover,
:root.native-mobile body #inline-reaction-picker button:focus-visible {
  background: var(--ui-subtle);
}
@media (max-width: 760px) {
  :root.native-mobile
    body
    :is(#sidebar > header strong, #overlay.navigation-view #panel-title) {
    font-size: clamp(24px, 7vw, 28px) !important;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }
  :root.native-mobile body #sidebar .search {
    min-height: 48px;
  }
  :root.native-mobile body #sidebar .search input {
    font-size: 16px;
  }
  :root.native-mobile body #chat-filters button {
    min-height: 44px;
  }
  :root.native-mobile body #sidebar .chat-menu-button {
    min-width: 44px;
    min-height: 44px;
  }
  :root.native-mobile body #messages .message {
    max-width: 88%;
  }
  :root.native-mobile body .conversation > header .actions button,
  :root.native-mobile body #composer > button,
  :root.native-mobile body #message-selection-bar > button {
    min-width: 44px;
    min-height: 44px;
  }
  :root.native-mobile body #composer {
    gap: 4px;
    padding: 8px;
  }
  :root.native-mobile body #composer #message-input {
    font-size: 16px;
    line-height: 1.45;
    min-height: 44px;
    padding: 10px 12px;
  }
}
@media (max-width: 360px) {
  :root.native-mobile body #overlay.message-actions-popover .quick-reactions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root.native-mobile
    body
    #inline-reaction-picker
    :is(.inline-reaction-quick, .inline-reaction-all) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root.native-mobile body #message-selection-count {
    flex: 1 1 100%;
  }
  :root.native-mobile body #message-selection-bar {
    flex-wrap: wrap;
  }
}
:root.native-mobile.native-android
  body
  :is(
    #composer > button,
    .conversation > header .actions button,
    #message-selection-bar > button,
    #overlay.message-actions-popover #panel-close,
    #overlay.message-actions-popover .quick-reactions button,
    #inline-reaction-picker button
  ) {
  min-width: 48px;
  min-height: 48px;
}
@media (max-width: 420px) {
  :root.native-mobile.native-android
    body
    :is(
      #overlay.message-actions-popover .quick-reactions,
      #inline-reaction-picker .inline-reaction-quick,
      #inline-reaction-picker .inline-reaction-all
    ) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Active calls must fit the phone viewport, including the persistent tab bar. */
:root.native-mobile body #active-call {
  position: fixed;
  inset: calc(64px + env(safe-area-inset-top, 0px)) 0 calc(72px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  height: auto;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  color: #f1f0f7;
  background: #10191e;
}
:root.native-mobile body #active-call .active-call-main {
  grid-template-rows: 44px 58px minmax(0, 1fr) 68px;
}
:root.native-mobile body #active-call .active-call-info,
:root.native-mobile body #active-call :is(#share-call-screen, #show-call-people, #call-effects, #call-reactions) {
  display: none;
}
:root.native-mobile body #active-call #remote-call-media {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #10191e;
}
:root.native-mobile body #active-call #local-call-media {
  position: absolute;
  inset: auto 12px 12px auto;
  width: 110px;
  height: 82px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 5px 18px #0007;
}
:root.native-mobile body #active-call :is(.active-call-main > header, .active-call-main > footer) button {
  width: 48px;
  height: 48px;
}
:root.native-mobile body #active-call #mobile-end-call {
  margin: 0;
  color: #ffffff;
  background: #b91c1c;
}
:root.native-mobile body #active-call #resume-call-audio {
  min-height: 32px;
  padding: 4px 14px;
  border-radius: 16px;
  color: #ffffff;
  background: #6d28d9;
}
:root.native-mobile body #active-call.voice-call :is(#local-call-media, #remote-call-media, #toggle-call-video) {
  display: none;
}
:root.native-mobile body #active-call.voice-call .call-stage::before {
  content: 'Voice call';
  display: grid;
  height: 100%;
  place-items: center;
  color: #f1f0f7;
  font-size: 24px;
}
:root.native-mobile body #active-call.minimized {
  inset: auto 12px calc(80px + env(safe-area-inset-bottom, 0px)) auto;
  width: min(320px, calc(100% - 24px));
  height: 72px;
  border-radius: 16px;
}
:root.native-mobile body #active-call.minimized .active-call-main {
  grid-template-rows: 1fr;
}
:root.native-mobile body #calls-content.has-active-call > :is(.calls-directory, .calls-launchpad) {
  visibility: hidden;
}

/* Saved Favorites and per-user call history controls. */
:root.native-mobile body #calls-content .calls-manager-hidden { display: none !important; }
:root.native-mobile body #calls-content :is(.call-contact-row, .call-history-row) {
  min-width: 0;
  gap: 10px;
  min-height: 80px;
  color: var(--ui-text);
}
:root.native-mobile body #calls-content .call-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #fff;
  background: #6d28d9;
  font-size: 15px;
}
:root.native-mobile body #calls-content .call-contact-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}
:root.native-mobile body #calls-content .call-history-row { display: flex; }
:root.native-mobile body #calls-content .calls-history-detail {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}
:root.native-mobile body #calls-content .calls-history-detail strong { font-size: 15px; overflow-wrap: anywhere; }
:root.native-mobile body #calls-content .calls-history-detail small { white-space: normal; font-size: 12px; }
:root.native-mobile body #calls-content .calls-history-detail time { font-size: 12px; }
:root.native-mobile body #calls-content .call-missed .calls-history-detail strong { color: var(--ui-danger); }
:root.native-mobile body #calls-content :is(.calls-record-actions, .call-contact-row > div) { display: flex; gap: 0; flex-shrink: 0; }
:root.native-mobile body #calls-content button {
  min-height: 44px;
  color: var(--ui-accent);
}
:root.native-mobile body #calls-content :is(.calls-record-actions button, .call-contact-row button, .calls-favorites-manager header > button:first-child) {
  display: grid;
  width: 44px;
  min-width: 44px;
  padding: 10px;
  place-items: center;
  background: transparent;
  border-radius: 12px;
}
:root.native-mobile body #calls-content button svg { width: 21px; height: 21px; }
:root.native-mobile body #calls-content :is([data-delete-call], [data-call-favorite-toggle], [data-call-history-clear], [data-call-history-delete-selected]) { color: var(--ui-danger); }
:root.native-mobile body #calls-content button:disabled { opacity: .5; cursor: default; }
:root.native-mobile body #calls-content :is(.calls-favorites-manager > header, .calls-history-toolbar, .calls-history-feedback) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
:root.native-mobile body #calls-content .calls-favorites-manager > header h3 { margin: 0; flex: 1; }
:root.native-mobile body #calls-content .calls-empty-note { color: var(--ui-muted); font-size: 14px; line-height: 1.5; }
:root.native-mobile body #calls-content .calls-history-toolbar { flex-wrap: wrap; border-bottom: 1px solid var(--ui-border); padding-bottom: 8px; }
:root.native-mobile body #calls-content :is(.calls-history-toolbar button, .calls-history-feedback button, .calls-favorites-manager > header > button:last-child) {
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 14px;
}
:root.native-mobile body #calls-content .calls-history-feedback {
  background: var(--ui-subtle);
  color: var(--ui-text);
  padding: 6px 12px;
  border-radius: 14px;
  margin-top: 8px;
  font-size: 14px;
}
:root.native-mobile body #calls-content .calls-select-target { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; }
:root.native-mobile body #calls-content .calls-select-target input { width: 22px; height: 22px; accent-color: #6d28d9; margin: 0; }
:root.native-mobile body #calls-content .calls-clear-prompt { padding: 12px; margin-top: 8px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); }
:root.native-mobile body #calls-content .calls-clear-prompt p { margin: 0 0 8px; font-size: 14px; color: var(--ui-text); }
:root.native-mobile body #calls-content .calls-clear-prompt > div { display: flex; justify-content: flex-end; gap: 8px; }
:root.native-mobile body #calls-content .calls-clear-prompt button { padding: 8px 12px; background: var(--ui-subtle); border-radius: 12px; font-size: 14px; }

/* iPhone focus zoom is triggered by small text in editable controls. Keep all
   mobile fields readable, including dynamically opened contact searches. */
:root.native-mobile body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  textarea, select, [contenteditable="true"]
) {
  font-size: 16px !important;
}
:root.native-mobile body #panel-body .contact-search {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-muted);
  background: transparent;
}
:root.native-mobile body #panel-body .contact-search input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
:root.native-mobile body #panel-body .privacy-note {
  color: var(--ui-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
:root.native-mobile body #panel-body .contact-result {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 68px;
  padding: 12px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
:root.native-mobile body #panel-body .contact-result:disabled {
  opacity: 1;
  cursor: default;
}
:root.native-mobile body #panel-body .contact-result span { min-width: 0; }
:root.native-mobile body #panel-body .contact-result strong {
  color: var(--ui-text);
  font-size: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
}
:root.native-mobile body #panel-body .contact-result small {
  color: var(--ui-muted);
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
}
:root.native-mobile body #panel-body .contact-result > b {
  color: var(--ui-accent);
  font-size: 13px;
}
:root.native-mobile body #panel-body .contact-result:disabled > b { color: var(--ui-muted); }
:root.native-mobile body #panel-body .contact-result:not(:disabled):hover,
:root.native-mobile body #panel-body .contact-result.selected {
  background: var(--ui-accent-soft);
}
:root.native-mobile body #calls-content [data-call-history-confirm-clear] { color: var(--ui-danger); }