:root {
  --ink: #102236;
  --muted: #718096;
  --line: #e5e9ee;
  --paper: #fffdf9;
  --canvas: #f6f4ef;
  --navy: #10283e;
  --navy-2: #173a56;
  --aqua: #36c2ad;
  --aqua-dark: #149783;
  --coral: #f27b68;
  --shadow: 0 18px 60px rgba(20, 42, 60, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(54, 194, 173, .35);
  outline-offset: 2px;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-content: center;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(2rem, 7vw, 8rem);
  background:
    radial-gradient(circle at 18% 22%, rgba(54,194,173,.2), transparent 25rem),
    linear-gradient(135deg, #10283e 0 52%, #f6f4ef 52%);
}
.auth-copy { max-width: 680px; color: white; }
.auth-copy h1 {
  margin: .6rem 0 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 5vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.auth-copy > p:nth-of-type(2) { max-width: 35rem; color: #bfd0dc; font-size: 1.05rem; line-height: 1.7; }
.eyebrow { margin: 0; color: var(--aqua); font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.auth-card {
  grid-column: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.auth-card h2 { margin-top: 0; font-family: Georgia, serif; font-size: 2rem; }
.auth-card label, .new-chat label { display: grid; gap: .45rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
}
input { min-height: 44px; padding: .7rem .85rem; }
select { min-height: 44px; padding: .7rem .85rem; }
.auth-card button, .new-chat button, .composer > button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: .7rem 1rem;
  color: white;
  background: var(--aqua-dark);
  font-weight: 800;
}

.messenger {
  height: 100dvh;
  display: grid;
  grid-template-columns: 68px minmax(340px, 400px) minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper);
}
.sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #eef7fb;
  background: var(--navy);
  border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.2rem .9rem;
}
.brand-lockup { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  color: var(--navy);
  background: var(--aqua);
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 900;
}
.sidebar h2 { margin: .16rem 0 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; white-space: nowrap; }
.icon-button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: inherit;
  background: rgba(255,255,255,.06);
}
.search-box {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .4rem 1.2rem 1rem;
  padding: 0 .8rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #9fb3c2;
  background: rgba(255,255,255,.07);
}
.search-box input {
  min-height: 42px;
  padding: 0;
  border: 0;
  color: white;
  background: transparent;
  outline: none;
}
.search-box input::placeholder { color: #90a5b5; }
.actions-panel { margin: 0 1.2rem .8rem; }
.actions-panel > summary {
  padding: .72rem .8rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  color: white;
  background: rgba(255,255,255,.055);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 800;
}
.actions-panel[open] > summary { margin-bottom: .65rem; }
.actions-panel .security-panel, .actions-panel .new-chat { margin-left: 0; margin-right: 0; }

.security-panel, .new-chat {
  margin: 0 1.2rem .65rem;
  padding: .7rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #c8d7e1;
  background: rgba(255,255,255,.045);
}
.security-panel summary { color: white; cursor: pointer; font-size: .78rem; font-weight: 800; }
.security-panel .quiet { margin: .5rem .25rem 0 0; }
.security-panel h3 { color: #8fa9ba; }
.security-item { border-color: rgba(255,255,255,.1); background: rgba(0,0,0,.1); }
.new-chat input { margin-top: .35rem; border-color: rgba(255,255,255,.12); color: white; background: rgba(255,255,255,.08); }
.new-chat input::placeholder { color: #91a6b6; }
.inline { display: flex; gap: .45rem; }
.sidebar .quiet {
  min-height: 32px;
  padding: .35rem .6rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: white;
  background: transparent;
}
#conversation-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: .35rem .7rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.conversation {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  margin: .14rem 0;
  padding: .7rem;
  border: 0;
  border-radius: 14px;
  color: #e8f0f5;
  text-align: left;
  background: transparent;
  transition: background .18s, transform .18s;
}
.conversation:hover { background: rgba(255,255,255,.07); transform: translateX(2px); }
.conversation.active { color: white; background: var(--navy-2); box-shadow: inset 3px 0 var(--aqua); }
.avatar {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: #0e3446;
  background: linear-gradient(145deg, #a8e7dd, #59c9b7);
  font-size: .75rem;
  font-weight: 900;
}
.conversation strong, .conversation small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation strong { margin-bottom: .2rem; font-size: .9rem; }
.conversation small { color: #8fa6b6; font-size: .73rem; }

.chat { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr auto auto; background: var(--paper); }
.chat-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,249,.92);
  backdrop-filter: blur(16px);
}
.chat-head h2 { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; }
.chat-head p { margin: .25rem 0 0; color: var(--muted); font-size: .75rem; }
.call-actions { display: flex; gap: .5rem; }
.call-start {
  min-height: 40px;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: white;
  font-weight: 800;
}
.primary-call { color: white; border-color: var(--aqua-dark); background: var(--aqua-dark); }
.mobile-back { display: none; color: var(--ink); border-color: var(--line); background: white; }

.messages {
  min-height: 0;
  overflow-y: auto;
  padding: 2rem clamp(1rem, 5vw, 5rem);
  background:
    linear-gradient(rgba(255,253,249,.94), rgba(255,253,249,.94)),
    radial-gradient(circle, #adc9c4 1px, transparent 1px);
  background-size: auto, 22px 22px;
}
.message { max-width: min(68%, 680px); margin: .3rem auto .3rem 0; }
.message.mine { margin-left: auto; margin-right: 0; }
.bubble {
  padding: .72rem .9rem;
  border: 1px solid var(--line);
  border-radius: 7px 18px 18px 18px;
  background: white;
  box-shadow: 0 5px 16px rgba(20,42,60,.055);
}
.message.mine .bubble {
  border-color: #c7eee7;
  border-radius: 18px 7px 18px 18px;
  background: #dcf7f1;
}
.message-meta { margin: .25rem .35rem .75rem; color: var(--muted); font-size: .68rem; }
.message.mine .message-meta { text-align: right; }
.welcome {
  max-width: 440px;
  margin: 14vh auto;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  text-align: center;
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
}
.welcome h3 { margin: 0 0 .7rem; font-family: Georgia, serif; font-size: 1.7rem; }
.welcome p { color: var(--muted); line-height: 1.65; }

.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: .65rem;
  margin: .8rem clamp(1rem, 4vw, 4rem) 1rem;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: 0 12px 34px rgba(20,42,60,.1);
}
.composer textarea { min-height: 46px; max-height: 150px; padding: .75rem .3rem; resize: none; border: 0; outline: none; }
.attachment-picker {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 1.45rem;
  cursor: pointer;
}
.attachment-picker input { display: none; }
.composer > button { min-width: 80px; }
.chat-status { min-height: 20px; margin: -.55rem 4rem .35rem; color: var(--muted); font-size: .72rem; }

.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(5,16,27,.82);
  backdrop-filter: blur(16px);
}
.call-panel { width: min(1100px, 96vw); padding: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; color: white; background: #0c1d2b; box-shadow: 0 30px 100px #0008; }
.call-panel h2 { margin-bottom: .2rem; font-family: Georgia, serif; font-size: 2rem; }
.call-state { color: #9eb3c1; }
.video-stage { position: relative; min-height: 420px; overflow: hidden; border-radius: 20px; background: #06121c; }
.remote-grid { height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .5rem; }
.remote-grid video { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
#local-video { position: absolute; right: 1rem; bottom: 1rem; width: min(23%, 220px); aspect-ratio: 3/4; object-fit: cover; border: 2px solid #fff8; border-radius: 16px; background: #10283e; }
.call-controls { display: flex; justify-content: center; gap: .75rem; margin-top: 1.1rem; }
.call-controls button { min-height: 46px; padding: .7rem 1.15rem; border: 0; border-radius: 13px; color: white; background: #244257; font-weight: 800; }
.call-controls .danger { background: #d94c4c; }
#accept-call-button { background: var(--aqua-dark); }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.empty { padding: 1rem; color: #8fa6b6; font-size: .82rem; text-align: center; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; align-content: start; padding: 2rem 1.2rem; background: linear-gradient(180deg, #10283e 0 42%, #f6f4ef 42%); }
  .auth-copy { padding: 2rem 0; }
  .auth-copy h1 { font-size: clamp(2.6rem, 13vw, 4.5rem); }
  .auth-card { grid-column: 1; }
  .messenger { grid-template-columns: 58px minmax(0, 1fr); }
  .product-rail { grid-column:1; grid-row:1; }
  .sidebar { grid-column:2; grid-row:1; }
  .messenger.chat-open .product-rail { display:none; }
  .chat { display: none; position: fixed; inset: 0; z-index: 10; }
  .messenger.chat-open .sidebar { display: none; }
  .messenger.chat-open .chat { display: grid; }
  .mobile-back { display: grid; flex: 0 0 40px; }
  .chat-head { padding: .7rem; }
  .chat-head > div:first-of-type { min-width: 0; }
  .chat-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .call-start { width: 40px; overflow: hidden; padding: .5rem; color: transparent; font-size: 0; }
  .call-start::first-letter { color: white; font-size: 1rem; }
  .messages { padding: 1rem .8rem; }
  .message { max-width: 86%; }
  .composer { margin: .5rem; }
  .composer > button { min-width: 60px; }
  .chat-status { margin: 0 .75rem .25rem; }
  .video-stage { min-height: 60vh; }
  .remote-grid video { min-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Scrollable navigation and full settings experience */
.sidebar { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255,255,255,.24); }
.sidebar-head, .search-box, .actions-panel { flex: 0 0 auto; }
#conversation-list { min-height: 84px; flex: 0 0 auto; overflow: visible; }
.settings-overlay { position: fixed; z-index: 25; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5,16,27,.68); backdrop-filter: blur(10px); }
.settings-shell { width: min(980px,100%); height: min(760px,calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: 0 28px 100px #06111c66; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.settings-head h2 { margin: 4px 0 0; font-family: Georgia,serif; font-size: 1.7rem; }
.settings-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--canvas); font-size: 1.65rem; }
.settings-layout { min-height: 0; display: grid; grid-template-columns: 230px minmax(0,1fr); }
.settings-nav { padding: 16px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--canvas); }
.settings-tab { width: 100%; min-height: 44px; margin-bottom: 5px; padding: 0 14px; border: 0; border-radius: 11px; color: var(--ink); text-align: left; background: transparent; font-weight: 750; }
.settings-tab:hover, .settings-tab.active { color: white; background: var(--navy); }
.settings-content { min-width: 0; overflow-y: auto; padding: 26px; }
.settings-section { display: grid; gap: 16px; }
.profile-summary { display: flex; align-items: center; gap: 16px; padding: 4px 2px 10px; }
.settings-avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 21px; color: var(--navy); background: var(--aqua); font-family: Georgia,serif; font-size: 1.75rem; font-weight: 900; }
.profile-summary h3, .profile-summary p, .setting-card h3 { margin: 0; }
.profile-summary p, .setting-card p { color: var(--muted); line-height: 1.55; }
.setting-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.setting-card > p { margin: 7px 0 16px; }
.setting-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.setting-title p { margin: 6px 0 14px; }
.settings-list { margin: 12px 0; }
.settings-list .security-item { padding: 11px; border-color: var(--line); color: var(--ink); background: var(--canvas); }
.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); }
.setting-toggle:first-of-type { margin-top: 12px; }
.setting-toggle span, .setting-toggle small { display: block; }
.setting-toggle small { margin-top: 4px; color: var(--muted); font-weight: 500; }
.setting-toggle input { width: 20px; min-height: 20px; accent-color: var(--aqua-dark); }
.secondary-button, .danger-button, .danger-zone button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--canvas); font-weight: 750; }
.danger-button, .danger-zone button { color: #b13232; border-color: #e7bcbc; background: #fff7f7; }
.theme-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.theme-choice { min-height: 72px; border: 2px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--canvas); font-weight: 800; }
.theme-choice.active { border-color: var(--aqua-dark); box-shadow: inset 0 0 0 2px var(--aqua-dark); }
.about-grid { display: grid; gap: 10px; margin: 0; }
.about-grid div { display: flex; justify-content: space-between; gap: 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.about-grid dt { color: var(--muted); }
.about-grid dd { margin: 0; font-weight: 750; }
.settings-feedback { min-height: 20px; margin-bottom: 0 !important; }
body[data-theme="dim"] { --paper:#152331; --surface:#1c3041; --canvas:#10202d; --ink:#edf5f8; --muted:#a8bbc7; --line:#314858; }
body[data-theme="dark"] { --paper:#090f14; --surface:#111b23; --canvas:#060b0f; --ink:#f4f7f8; --muted:#9db0bb; --line:#263640; }
body[data-theme="system"] { color-scheme: light dark; }
body.high-contrast { --line:#657985; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { transition:none !important;animation:none !important; }
body.text-small { font-size:14px; } body.text-large { font-size:17px; } body.text-extra_large { font-size:19px; }
body.compact .conversation { padding-top: .4rem; padding-bottom: .4rem; }
.setting-actions { display:flex;flex-wrap:wrap;gap:9px; }
#mfa-recovery-codes { white-space:pre-wrap;padding:12px;border-radius:10px;background:var(--canvas);line-height:1.7; }
.contact-results { display: grid; gap: 9px; margin-top: 16px; }
.contact-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.contact-result strong, .contact-result small { display: block; }
.contact-result small { margin-top: 3px; color: var(--muted); }
.invite-result { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-top: 12px; }
.setting-card form { margin-top: 14px; }
@media (max-width:860px) {
  .settings-overlay { padding: 0; }
  .settings-shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .settings-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-tab { width: auto; flex: 0 0 auto; margin: 0 4px 0 0; }
  .settings-content { padding: 18px; }
}

/* Mobile-first settings hierarchy based on the supplied reference screens. */
.settings-shell { width:min(720px,100%); background:#f3f4f6; }
.settings-layout { display:block; }
.settings-nav { display:none !important; }
.settings-content { height:100%; padding:18px; background:#f3f4f6; }
.settings-head { gap:10px; background:#fff; }
.settings-heading { flex:1; }
.settings-back, .settings-search { width:42px;height:42px;border:0;border-radius:50%;color:var(--ink);background:transparent;font-size:1.5rem; }
.settings-search { font-size:1.8rem; }
.settings-profile-hero { display:grid;justify-items:center;gap:8px;padding:18px 12px 6px; }
.settings-profile-hero small { color:var(--muted); }
.settings-hero-avatar { width:116px;height:116px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ff79a6,#ed3d79);font:800 2.4rem Georgia,serif; }
.settings-confirm-card { padding:22px;border-radius:22px;background:#fff;text-align:center; }
.settings-confirm-card p { color:var(--muted); }
.settings-menu-card { overflow:hidden;border-radius:22px;background:#fff; }
.settings-menu-row { width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px;padding:10px 18px;border:0;border-bottom:1px solid #e8eaed;color:#17191c;text-align:left;background:#fff; }
.settings-menu-row:last-child { border-bottom:0; }
.settings-menu-row:hover { background:#f7fafc; }
.settings-menu-row span:nth-child(2),.settings-menu-row strong,.settings-menu-row small { display:block; }
.settings-menu-row strong { font-size:1rem;font-weight:650; }
.settings-menu-row small { margin-top:4px;color:#81878c;font-size:.83rem; }
.settings-menu-row b { color:#abb1b5;font-size:1.5rem;font-weight:400; }
.menu-icon { width:40px;height:40px;display:grid !important;place-items:center;border-radius:13px;color:#fff;font-weight:850; }
.menu-icon.blue{background:#1aa8e8}.menu-icon.orange{background:#ff990f}.menu-icon.green{background:#10bd39}.menu-icon.coral{background:#f34f6e}.menu-icon.indigo{background:#477ce5}.menu-icon.cyan{background:#10acd9}.menu-icon.teal{background:#11b7bd}.menu-icon.purple{background:#b14ee8}
.menu-card-label { margin:0;padding:16px 18px 6px;color:#079ed3;font-weight:750; }
.settings-section { gap:16px; }
.setting-card { border:0;border-radius:22px;background:#fff;box-shadow:none; }
.setting-card h3 { color:#069bcf; }
.chat-preview-card { overflow:hidden; }
.chat-preview-card h3,.setting-card h3 { display:flex;justify-content:space-between; }
.settings-range { width:100%;accent-color:#09a4db; }
.chat-preview { display:grid;gap:8px;margin:16px -20px;background:linear-gradient(135deg,#c9e97d,#71c887);padding:28px 18px; }
.preview-bubble { max-width:82%;padding:10px 13px;border-radius:17px;background:#fff;box-shadow:0 2px 5px #0002; }
.preview-bubble.sent { justify-self:end;background:#e8ffd6; }
.settings-link { width:100%;min-height:54px;border:0;border-top:1px solid #eceff1;color:#079fd5;text-align:left;background:#fff;font-size:1rem;font-weight:650; }
.color-theme-strip,.app-icon-strip { display:flex;gap:12px;overflow-x:auto;padding:14px 0; }
.color-swatch { flex:0 0 96px;height:130px;border:3px solid transparent;border-radius:16px;color:#223;font-size:1.5rem;background:#dcebf5; }
.color-swatch.active { border-color:#0aa5dc; }.color-swatch.botanical{background:#b9dd75}.color-swatch.lime{background:#d8ed91}.color-swatch.blue{background:#b7d8ef}.color-swatch.rose{background:#efb9dc}.color-swatch.aqua{background:#92dce0}
.choice-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px; }.choice-grid label{color:var(--ink);text-align:center}.choice-grid input{width:auto;min-height:auto}.list-preview{display:grid;place-items:center;height:90px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(#d5dadd 0 14%,transparent 14% 35%,#d5dadd 35% 49%,transparent 49%);}
.app-icon-strip button { flex:0 0 78px;display:grid;gap:7px;justify-items:center;border:0;background:transparent;color:var(--ink); }.icon-preview{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;color:#fff;background:#0aa5dc;font:800 1.3rem Georgia}.icon-preview.vintage{background:#167fb0}.icon-preview.aqua{background:#16bcb7}.icon-preview.midnight{background:#20384f}
.optional-label { color:var(--muted);font-weight:500; }
.auth-card .legal-consent { grid-template-columns:20px 1fr;align-items:start;gap:10px;color:#344b5b;font-size:.78rem;line-height:1.45;font-weight:600; }
.auth-card .legal-consent input { width:18px;min-height:18px;height:18px;margin:1px 0 0;accent-color:#079985; }
.preauth-legal{display:grid;grid-template-columns:repeat(4,max-content);align-items:center;gap:10px;margin-top:24px}.preauth-legal a{color:#d9fffb;text-decoration:none;font-size:.76rem;font-weight:700;padding:7px 11px;border:1px solid #ffffff38;border-radius:999px;text-align:center}.preauth-legal a:hover,.preauth-legal a:focus-visible{background:#ffffff16;border-color:#72ded0}.auth-card .legal-consent a{color:#087f72}
@media(max-width:700px){.preauth-legal{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:14px}.preauth-legal a{padding:7px 6px}}
@media(max-width:860px){.settings-content{padding:14px}.settings-head{padding:12px 14px}.settings-head .eyebrow{display:none}.settings-shell{background:#f3f4f6}}
.account-name-card label { display:grid;gap:6px;color:var(--muted);font-size:.82rem; }
.account-info-row { width:100%;display:flex;align-items:center;gap:14px;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left; }
.account-info-row:last-child { border-bottom:0; }
.account-info-row > span:last-child { display:grid;gap:3px;flex:1; }
.account-info-row small { color:var(--muted);font-size:.8rem; }
.account-info-row input { margin-top:6px; }
.logout-row,.logout-row strong { color:#d75c67; }
.profile-photo-button { position:relative;width:72px;height:72px;flex:0 0 72px;padding:0;border:0;border-radius:50%;overflow:visible;color:#fff;background:linear-gradient(145deg,#ff79a6,#ed3d79);box-shadow:0 10px 28px #d72f6b35; }
.profile-photo-button.hero-photo { width:116px;height:116px;flex-basis:116px; }
.profile-photo-image,.profile-photo-initial { width:100%;height:100%;border-radius:50%;object-fit:cover; }
.profile-photo-initial { display:grid;place-items:center;font:800 2rem Georgia,serif; }
.hero-photo .profile-photo-initial { font-size:2.7rem; }
.profile-camera-badge { position:absolute;right:-1px;bottom:2px;width:30px;height:30px;display:grid;place-items:center;border:3px solid #f3f4f6;border-radius:50%;color:#fff;background:#079fd5;font-size:1.05rem;box-shadow:0 4px 12px #0002; }
.hero-photo .profile-camera-badge { right:2px;bottom:5px;width:36px;height:36px; }
.profile-photo-button:hover { transform:translateY(-1px);box-shadow:0 14px 34px #d72f6b45; }
.account-profile-hero { align-items:center;padding:18px 20px;border-radius:22px;background:#fff; }
.profile-photo-text-action { width:auto;margin-top:5px;padding:0;border:0;color:#079fd5;background:transparent;font-weight:700; }
.profile-photo-sheet { position:fixed;inset:0;z-index:80;display:grid;place-items:end center; }
.profile-photo-sheet-backdrop { position:absolute;inset:0;width:100%;height:100%;border:0;background:#071d2f99;backdrop-filter:blur(3px); }
.profile-photo-sheet-card { position:relative;width:min(520px,calc(100% - 24px));margin:12px;padding:12px 18px 20px;border-radius:26px;background:#fff;box-shadow:0 24px 80px #061d3050;animation:sheet-up .22s ease-out; }
.sheet-handle { display:block;width:44px;height:5px;margin:0 auto 14px;border-radius:10px;background:#d7dce0; }
.profile-photo-sheet-card h3 { margin:0;color:var(--ink);font-size:1.25rem; }
.profile-photo-sheet-card > p { margin:6px 0 14px;color:var(--muted); }
.profile-photo-sheet-card > button { width:100%;display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;padding:14px 4px;border:0;border-top:1px solid #edf0f2;color:var(--ink);text-align:left;background:#fff; }
.profile-photo-sheet-card > button span { grid-row:1 / 3;width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:#fff;background:#079fd5; }
.profile-photo-sheet-card > button strong,.profile-photo-sheet-card > button small { grid-column:2; }
.profile-photo-sheet-card > button small { color:var(--muted); }
.profile-photo-sheet-card .danger-photo-action { color:#d94f5e; }
.profile-photo-sheet-card .danger-photo-action span { background:#f05a67; }
.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
@keyframes sheet-up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* Cohesive member-app shell: calm, chat-first, and consistent across desktop/mobile. */
.messenger { background:#eef2f5; }
.sidebar { color:#172432;background:#fff;border-right:1px solid #dce3e8;box-shadow:8px 0 28px #19344a0a; }
.sidebar-head { min-height:78px;padding:14px 16px;border-bottom:1px solid #edf1f4;background:#fff; }
.brand-mark { color:#fff;background:linear-gradient(145deg,#20bfb5,#079fd5);box-shadow:0 7px 18px #079fd530; }
.sidebar .eyebrow { color:#079fd5;letter-spacing:.16em; }
.sidebar h2 { color:#172432; }
.sidebar .icon-button { color:#49606f;border:1px solid #dce5ea;background:#f7fafc; }
.sidebar .icon-button:hover { color:#079fd5;background:#edf8fc; }
.search-box { margin:12px 14px;padding:0 13px;border:1px solid transparent;border-radius:22px;color:#728895;background:#f0f4f7;transition:.18s ease; }
.search-box:focus-within { border-color:#6fcbe7;background:#fff;box-shadow:0 0 0 3px #079fd514; }
.search-box input { color:#172432;background:transparent; }
.actions-panel { margin:0 14px 10px;border:1px solid #e1e8ed;border-radius:16px;background:#fff;box-shadow:0 6px 20px #233e5208; }
.actions-panel summary { color:#167fa8; }
.new-chat { border-top:1px solid #edf1f4; }
.new-chat label { color:#5e7482; }
.new-chat input { color:#172432;border-color:#dbe4e9;background:#f7fafb; }
#conversation-list { padding:4px 8px 20px; }
.conversation { margin:2px 0;padding:10px 11px;border-radius:14px;color:#1d2d38;transition:background .14s ease,transform .14s ease; }
.conversation:hover { color:#172432;background:#f0f6f9;transform:none; }
.conversation.active { color:#163242;background:#dff2fa;box-shadow:inset 3px 0 #079fd5; }
.conversation small,.conversation.active small { color:#718692; }
.conversation .avatar { width:48px;height:48px;font-size:.8rem;background:linear-gradient(145deg,#32c3b9,#168bc2); }
.chat { background:#e8eef1; }
.chat-head { min-height:78px;padding:12px 20px;border-bottom:1px solid #dce4e8;background:#fff;box-shadow:0 3px 18px #17384b0b; }
.chat-head h2 { color:#172b38;font-size:1.05rem; }
.chat-head p { color:#738793; }
.messages { background-color:#e9f0f2;background-image:radial-gradient(#6f94a00d 1.2px,transparent 1.2px);background-size:20px 20px; }
.welcome { border:1px solid #d8e1e6;border-radius:22px;background:#ffffffee;box-shadow:0 18px 55px #17394d12; }
.welcome h3 { color:#142d3e; }
.message { max-width:min(72%,680px);border-radius:18px;box-shadow:0 2px 8px #183b4d12; }
.message.own { background:#dff7ee; }
.composer { margin:10px 14px 14px;padding:7px 8px 7px 14px;border:1px solid #d6e0e5;border-radius:24px;background:#fff;box-shadow:0 10px 32px #17384c18; }
.composer textarea { color:#182c38;background:transparent; }
.attachment-picker { width:40px;height:40px;border-radius:50%;color:#617884;background:#f0f5f7; }
.composer > button { min-width:46px;width:46px;height:46px;padding:0;border-radius:50%;color:transparent;font-size:0;background:linear-gradient(145deg,#16b9ae,#078fc3);box-shadow:0 7px 18px #078fc334; }
.composer > button::after { content:'➤';color:#fff;font-size:1rem; }
.call-start { border-radius:18px;color:#287a9d;border-color:#cfe0e7;background:#f4f9fb; }
.primary-call { color:#fff;border-color:#079fd5;background:#079fd5; }
.auth-shell { background:#f4f6f7; }
.auth-card { border:1px solid #e0e6ea;border-radius:26px;box-shadow:0 24px 70px #17384a18; }
.auth-card input { border-radius:14px;background:#f9fbfc; }
.auth-card button { border-radius:14px;background:linear-gradient(135deg,#16b9ae,#078fc3);box-shadow:0 9px 24px #078fc32a; }
@media(max-width:860px){.sidebar{border-right:0}.sidebar-head,.chat-head{min-height:68px}.conversation{padding:10px 8px}.messages{padding-bottom:82px}.composer{position:absolute;left:0;right:0;bottom:0;z-index:5}}
.privacy-page { gap:14px;background:#f3f4f6; }
.privacy-card { overflow:hidden;padding:0; }
.privacy-card > h3 { margin:0;padding:18px 20px 10px;color:#079bcf;font:750 1rem/1.2 inherit; }
.privacy-row { width:100%;min-height:68px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin:0;padding:12px 20px;border:0;border-bottom:1px solid #e8ecef;color:#171b1e;text-align:left;background:#fff;font-size:1rem; }
.privacy-row:last-child { border-bottom:0; }
.privacy-row:hover { background:#f8fbfc; }
.privacy-row:has(.privacy-glyph) { grid-template-columns:42px minmax(0,1fr) auto; }
.privacy-row strong { font-weight:550; }
.privacy-row b { color:#079bcf;font-weight:500; }
.privacy-row select { width:auto;min-width:122px;margin:0;padding:7px 28px 7px 8px;border:0;color:#079bcf;text-align:right;background:transparent;font-size:.98rem; }
.privacy-row input[type="checkbox"] { position:relative;width:48px;height:28px;min-height:28px;margin:0;appearance:none;border:0;border-radius:20px;background:#aeb9bf;cursor:pointer;transition:.18s ease; }
.privacy-row input[type="checkbox"]::after { content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transition:.18s ease; }
.privacy-row input[type="checkbox"]:checked { background:#0aa8dd; }
.privacy-row input[type="checkbox"]:checked::after { transform:translateX(20px); }
.privacy-glyph { width:36px;height:36px;display:grid;place-items:center;color:#222;font-size:1.45rem; }
.privacy-help { margin:0 20px 4px;color:#747b80;line-height:1.35; }
.privacy-search-visibility span:nth-child(2){display:grid;gap:4px}.privacy-search-visibility small{max-width:560px;color:#747b80;font-size:.82rem;font-weight:400;line-height:1.35}
@media(max-width:560px){.privacy-row{padding:11px 16px;min-height:62px}.privacy-row select{min-width:108px;font-size:.9rem}.privacy-card>h3{padding-left:16px}.privacy-help{margin-left:16px;margin-right:16px}}
.security-setup-sheet { position:fixed;inset:0;z-index:90;display:grid;place-items:center; }
.security-setup-card { position:relative;width:min(430px,calc(100% - 28px));padding:24px;border-radius:24px;background:#fff;box-shadow:0 28px 90px #071d3055; }
.security-setup-card h3 { margin:0 0 6px;color:#142d3e;font-size:1.35rem; }
.security-setup-card > p { color:var(--muted); }
.security-setup-actions { display:grid;gap:10px;margin-top:14px; }
.app-lock-options { display:grid;gap:12px;margin:16px 0;padding:14px;border:1px solid #dce7e4;border-radius:16px;background:#f7faf9; }
.app-lock-options>label:first-child { display:grid;gap:7px;color:#334f5c;font-size:.84rem;font-weight:800; }
.app-lock-options select { width:100%;min-height:42px;border:1px solid #cedbd8;border-radius:11px;background:#fff; }
.app-is-locked body { overflow:hidden!important; }
.device-lock { position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#0e2a3d,#071824); }
.device-lock-card { width:min(390px,100%);padding:34px 28px;border:1px solid #ffffff18;border-radius:28px;color:#fff;text-align:center;background:#ffffff0d;box-shadow:0 30px 100px #0007;backdrop-filter:blur(16px); }
.device-lock-card .brand-mark { width:72px;height:72px;margin:0 auto 20px;font-size:1.8rem; }
.device-lock-card h2 { margin:0 0 8px;font-family:Georgia,serif; }
.device-lock-card p { color:#afc2cf; }
.device-lock-card input { color:#142d3e;background:#fff; }
.device-lock-card form { display:grid;gap:10px;margin:22px 0 10px; }
.device-lock-card button { min-height:44px; }
.device-lock-card .settings-feedback { min-height:20px;margin:12px 0 0;color:#ffd7d7; }
.composer-link-preview { position:absolute;left:18px;right:18px;bottom:82px;z-index:6;display:grid;gap:3px;padding:12px 42px 12px 15px;border-left:4px solid #079fd5;border-radius:12px;background:#fff;box-shadow:0 10px 30px #17384c20; }

/* Phone application shell: one focused surface, thumb navigation and native density. */
@media (max-width: 600px) {
  html, body, main { width:100%;height:100%;overflow:hidden; }
  body { min-height:100dvh;background:#fff; }
  button { -webkit-tap-highlight-color:transparent; }

  .auth-shell { display:block;width:100%;height:100dvh;margin:0;padding:0;overflow-y:auto;background:#f2f4f5; }
  .auth-copy { min-height:270px;margin:0;padding:46px 24px 34px;border-radius:0 0 28px 28px;box-shadow:none; }
  .auth-copy h1 { max-width:350px;margin-bottom:16px;font-size:38px;line-height:1.02;letter-spacing:-.035em; }
  .auth-copy>p:last-child { margin-bottom:0;font-size:15px;line-height:1.5; }
  .auth-card { width:calc(100% - 24px);margin:14px auto 0;padding:22px 18px;border-radius:22px;box-shadow:0 14px 38px #17384a12; }
  .auth-card h2 { font-size:23px; }
  .auth-card form { margin-top:17px; }
  .auth-card input { min-height:48px;font-size:16px; }
  .auth-card button { width:100%;min-height:48px; }
  .auth-shell>.status { width:calc(100% - 32px);margin:10px auto; }

  .messenger { position:relative;display:block;width:100%;height:100dvh;padding-bottom:66px;background:#fff; }
  .product-rail { position:fixed;z-index:24;left:0;right:0;bottom:0;height:66px;display:flex;flex-direction:row;justify-content:space-around;gap:0;padding:4px 3px max(4px,env(safe-area-inset-bottom));border:0;border-top:1px solid #e2e6e8;background:#fff;box-shadow:0 -6px 24px #17384a0d; }
  .rail-button { flex:1;width:auto;min-width:0;min-height:55px;padding:4px 1px;border-radius:12px;color:#70787d;background:transparent; }
  .rail-button span { font-size:20px; }
  .rail-button small { max-width:100%;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
  .rail-button:hover,.rail-button.active { color:#078c67;background:#e8f8f1; }
  .rail-spacer,.rail-button#rail-new-chat { display:none; }

  .sidebar { position:absolute;inset:0 0 66px;display:flex;width:100%;height:auto;overflow:hidden;color:#172432;background:#fff; }
  .sidebar-head { min-height:68px;flex-direction:row;align-items:center;padding:9px 14px;border:0;background:#fff; }
  .brand-lockup { min-width:0; }
  .brand-lockup .brand-mark { width:44px;height:44px;flex:0 0 44px;border-radius:50%; }
  .sidebar-head .eyebrow { margin-bottom:2px;font-size:9px; }
  .sidebar-head h2 { max-width:210px;font-size:16px;white-space:nowrap; }
  .sidebar .icon-button { width:42px;min-height:42px;padding:0;border:0;border-radius:50%;font-size:19px;background:#f1f4f5; }
  .workspace-page { margin:0 12px 8px;padding:11px 13px;border-radius:15px; }
  .workspace-icon { width:42px;height:42px;border-radius:14px; }
  .search-box { min-height:44px;margin:2px 13px 9px;border-radius:24px; }
  .quick-filters { padding:0 13px 10px; }
  .quick-filters button { min-height:34px; }
  .notification-banner { margin:0 10px 8px;padding:10px; }
  .actions-panel { margin:0 12px 8px;border-radius:15px; }
  .new-chat { padding:10px 12px; }
  .inline { display:flex; }
  #conversation-list { flex:1;min-height:0;padding:2px 7px 14px;overflow-y:auto;overscroll-behavior:contain; }
  .conversation { display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;width:100%;min-height:68px;margin:0;padding:8px 10px;border-radius:12px; }
  .conversation > span:last-child { display:block;min-width:0; }
  .conversation .avatar { width:52px;height:52px;font-size:13px; }
  .conversation strong { padding-top:3px;font-size:15px; }
  .conversation small { margin-top:5px;font-size:12px; }
  .conversation.active { box-shadow:none;background:#e8f5f0; }

  .messenger.chat-open { padding:0; }
  .messenger.chat-open .product-rail { display:none; }
  .chat { display:none;position:fixed;z-index:20;inset:0;width:100%;height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto;background:#e9f0ed; }
  .messenger.chat-open .chat { display:grid; }
  .chat-head { min-height:64px;padding:7px 8px;gap:7px;box-shadow:0 1px 3px #0002; }
  .mobile-back { width:40px;min-height:40px;padding:0;border-radius:50%;color:#1c2d34;background:transparent;font-size:23px; }
  .chat-head h2 { font-size:15px; }
  .chat-head p { margin-top:2px;font-size:11px; }
  .call-actions { margin-left:auto;gap:1px; }
  .call-start,.chat-head-action { width:39px;min-width:39px;min-height:39px;height:39px;padding:0;border:0;border-radius:50%; }
  .messages { min-height:0;padding:12px 8px 86px; }
  .message { max-width:88%;padding:8px 10px 6px;border-radius:14px 14px 14px 4px;font-size:14px; }
  .message.mine,.message.own { border-radius:14px 14px 4px 14px; }
  .composer { position:absolute;z-index:5;left:5px;right:5px;bottom:max(5px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto auto;gap:4px;margin:0;padding:5px 6px 5px 11px;border-radius:24px; }
  .composer textarea { min-height:42px;max-height:112px;padding:10px 5px;border:0; }
  .composer > button { min-width:42px;width:42px;height:42px; }
  .composer-tool,.attachment-picker { width:38px;height:38px;min-height:38px; }
  .chat-status { position:absolute;z-index:6;left:14px;right:14px;bottom:58px;padding:0;background:transparent; }
  .attachment-menu { left:8px;bottom:61px;max-height:calc(100dvh - 130px);overflow:auto; }
  .conversation-menu { top:58px;right:7px;width:min(255px,calc(100vw - 14px)); }

  .settings-overlay { z-index:60;padding:0;background:#f2f3f5;backdrop-filter:none; }
  .settings-shell { width:100%;height:100dvh;border:0;border-radius:0;background:#f2f3f5;box-shadow:none; }
  .settings-head { position:sticky;z-index:4;top:0;min-height:72px;padding:10px 12px;border-bottom:1px solid #dfe2e4;background:#fff; }
  .settings-head h2 { margin:0;color:#16191b;font-family:inherit;font-size:23px;font-weight:650;letter-spacing:-.02em; }
  .settings-heading .eyebrow { display:none; }
  .settings-back,.settings-search,.settings-close { width:44px;height:44px;min-height:44px;padding:0;border:0;color:#171b1d;background:transparent;font-size:25px; }
  .settings-close { font-size:30px; }
  .settings-content { height:calc(100dvh - 72px);padding:12px 10px 32px;overflow-y:auto;overscroll-behavior:contain;background:#f2f3f5; }
  .settings-section { gap:12px; }
  .setting-card,.settings-menu-card,.settings-confirm-card,.account-profile-hero { border-radius:20px; }
  .setting-card { padding:17px 14px; }
  .setting-card h3 { font-size:14px; }
  .settings-menu-row { grid-template-columns:43px minmax(0,1fr) auto;min-height:67px;padding:9px 14px; }
  .settings-menu-row strong { font-size:16px; }
  .settings-menu-row small { font-size:12px; }
  .menu-icon { width:38px;height:38px;border-radius:12px; }
  .settings-profile-hero { padding-top:10px; }
  .profile-photo-button.hero-photo { width:104px;height:104px;flex-basis:104px; }
  .settings-confirm-card { padding:18px 14px; }
  .privacy-row,.reference-row,.reference-select,.notification-card .setting-toggle,.notification-select { min-height:64px;padding:11px 15px; }
  .privacy-row strong,.reference-row strong,.reference-select span,.notification-card .setting-toggle strong,.notification-select strong { font-size:15px; }
  .privacy-help { margin:0 15px 3px;font-size:13px; }
  .language-notice { padding:15px; }
  .language-card { padding:0;overflow:hidden; }
  .language-card > h3 { padding:18px 18px 10px; }
  .language-search-label { padding:0 14px 12px; }
  .language-search-label input { min-height:43px;border-radius:22px;background:#f1f3f4; }
  .language-choice { min-height:72px;padding:10px 18px;gap:18px; }
  .language-choice input { width:24px;height:24px; }
  .language-choice strong { color:#1b1e20;font-size:17px;font-weight:500; }
  .language-choice small { margin-top:2px;font-size:13px; }
  .profile-photo-sheet-card { width:calc(100% - 16px);margin:8px;border-radius:24px; }

  .around-us-view { z-index:65;background:#f4f6f5; }
  .around-us-head { position:sticky;z-index:5;top:0;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:10px 11px;background:#fff;box-shadow:0 1px 3px #0002; }
  .around-us-head>button:first-child { width:42px;min-height:42px;color:#172c28;background:#eef2f0; }
  .around-us-head .eyebrow,.around-us-head>div>p:last-child { display:none; }
  .around-us-head h1 { color:#172c28;font-size:21px; }
  .business-entry { min-height:40px;padding:0 10px;border:0;color:#087e5e;background:#e5f7ef;font-size:11px; }
  .around-us-toolbar { position:static;grid-template-columns:1fr auto;gap:8px;padding:10px 11px;border:0;background:#f4f6f5; }
  .around-search { grid-column:1/-1;min-height:44px;border:0;border-radius:23px; }
  .around-city { min-height:42px; }
  .around-us-toolbar>button { min-height:42px;padding:0 10px; }
  .around-categories { padding:1px 11px 9px; }
  .around-content { padding:10px 11px 28px; }
  .around-section-title { margin-bottom:10px; }
  .around-section-title h2 { font-size:20px; }
  .around-grid { grid-template-columns:1fr;gap:12px; }
  .around-card { display:grid;grid-template-columns:112px minmax(0,1fr);border-radius:17px; }
  .around-card-art { height:100%;min-height:150px;font-size:44px; }
  .around-card-content { padding:13px; }
  .around-card p { min-height:0; }
  .business-panel { z-index:75;width:100%;padding:10px;background:#f4f6f5; }
  .business-panel>header { position:sticky;z-index:3;top:0;border-radius:18px; }
  .business-panel form { padding:15px;border-radius:18px; }
  .business-form-grid { grid-template-columns:1fr; }
}

/* The packaged Capacitor client identifies itself with NihowMobile/1.0. Keep
   the public website desktop/web-first while giving the installed app a
   focused, native-style entry and navigation hierarchy. */
@media (max-width: 600px) {
  .native-app .auth-shell { display:flex;min-height:100dvh;flex-direction:column;background:radial-gradient(circle at 12% 58%,#dff4f0 0,transparent 34%),linear-gradient(180deg,#0b8f80 0 164px,#f3f5f5 164px); }
  .native-app .auth-copy { display:flex;min-height:164px;align-items:center;justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 20px 14px;border-radius:0;background:transparent; }
  .native-app .auth-copy .auth-logo { width:108px;max-height:108px;margin:0;filter:drop-shadow(0 12px 24px #064d4650); }
  .native-app .auth-copy .eyebrow,.native-app .auth-copy h1,.native-app .auth-copy>p,.native-app .preauth-legal { display:none; }
  .native-app .auth-card { width:calc(100% - 32px);max-width:430px;margin:clamp(20px,5dvh,48px) auto;padding:22px 20px;border:0;border-radius:26px;background:#fff;box-shadow:0 20px 52px #153b4a1b; }
  .native-app .auth-card .eyebrow { color:#087f71; }
  .native-app .auth-card h2 { color:#122b3b;font-family:inherit;font-size:23px;font-weight:750;letter-spacing:-.02em; }
  .native-app .auth-method-card .hint { margin:12px auto 18px;padding:13px 14px;font-size:14px;line-height:1.45; }
  .native-app .auth-method-card button { min-height:50px;border-radius:16px; }
  .native-app .auth-divider { margin:15px 0; }
  .native-app .auth-method-help { display:block;margin-top:12px;text-align:center;font-size:12px; }
  .native-auth-trust { display:none; }
  .native-app .native-auth-trust { display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:auto auto calc(18px + env(safe-area-inset-bottom));padding:0 22px;color:#72817f;font-size:10px;font-weight:750;letter-spacing:.02em;text-align:center; }
  .native-app .native-auth-trust span:not(:last-child)::after { content:"•";margin-left:14px;color:#0b9b8c; }

  @media (max-height: 680px) {
    .native-app .auth-copy { min-height:132px; }
    .native-app .auth-copy .auth-logo { width:88px;max-height:88px; }
    .native-app .auth-card { margin:14px auto;padding:18px; }
    .native-app .native-auth-trust { margin-bottom:10px; }
  }

  .native-app .messenger { padding-top:env(safe-area-inset-top);padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .native-app .product-rail { height:calc(66px + env(safe-area-inset-bottom)); }
  .native-app .rail-button[data-workspace="direct"],.native-app .rail-button[data-workspace="channel"] { display:none; }
  .native-app .rail-button { min-height:58px; }
  .native-app .sidebar { top:env(safe-area-inset-top);bottom:calc(66px + env(safe-area-inset-bottom)); }
  .native-app .brand-lockup .brand-mark { color:transparent;background:#fff url('/assets/nihow-logo.png') center/cover no-repeat;box-shadow:0 4px 14px #0c66572b; }
  .native-app .notification-banner small { display:none; }
  .native-app .notification-banner strong { font-size:13px; }
  .native-app .chat { padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom); }
}

/* Authentication viewport: keep both panels reachable on short desktop screens. */
@media (min-width: 701px) {
  body:has(.auth-shell:not(.hidden)) { min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; }
  .auth-shell {
    width:100%;
    max-width:none;
    height:auto;
    min-height:100dvh;
    margin:0;
    padding:clamp(18px,4vh,44px) clamp(24px,5vw,72px);
    grid-template-columns:minmax(330px,1fr) minmax(320px,440px);
    align-items:center;
    align-content:stretch;
    gap:clamp(28px,5vw,76px);
    overflow:visible;
    background:linear-gradient(120deg,#eef3f4 0 51%,#f7f6f2 51%);
  }
  .auth-copy {
    width:100%;
    max-width:720px;
    height:auto;
    min-height:min(720px,calc(100dvh - 36px));
    margin:0;
    padding:clamp(30px,5vw,62px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:visible;
    border-radius:30px;
  }
  .auth-logo { flex:0 0 auto; aspect-ratio:1; }
  .auth-copy h1 {
    max-width:100%;
    margin:.7rem 0 1.25rem;
    font-size:clamp(2.7rem,5.2vw,5.25rem);
    line-height:.98;
    overflow-wrap:break-word;
  }
  .auth-copy>p:nth-of-type(2) { max-width:30rem; margin-bottom:0; font-size:clamp(.9rem,1.35vw,1.05rem); }
  .auth-copy .preauth-legal { margin-top:auto; }
  .auth-card {
    grid-column:2;
    width:100%;
    max-width:440px;
    max-height:none;
    margin:0;
    align-self:center;
    overflow:visible;
  }
  .auth-shell>.status { position:fixed; left:50%; bottom:10px; width:min(520px,80vw); margin:0; transform:translateX(-50%); text-align:center; }
}

@media (min-width:701px) and (max-width:920px) {
  .auth-shell { padding:18px 28px; grid-template-columns:minmax(300px,1fr) minmax(300px,340px); gap:28px; }
  .auth-copy { padding:34px; }
  .auth-copy h1 { font-size:clamp(2.65rem,5.7vw,3.55rem); }
  .auth-card { padding:28px; }
}
.composer-link-preview strong { color:#173244; }
.composer-link-preview small { overflow:hidden;color:#6e818d;text-overflow:ellipsis;white-space:nowrap; }
.composer-link-preview button { position:absolute;right:8px;top:8px;width:28px;height:28px;padding:0;border:0;border-radius:50%;color:#6e818d;background:#edf2f4; }