/* New website shell. Component styles are migrated separately; this file owns
   navigation and the profile hub, independent of extension layout conventions. */
:root {
  --next-bg: #f8f9fb;
  --next-surface: #fff;
  --next-text: #17191e;
  --next-muted: #666d78;
  --next-line: #e5e7ec;
  --next-blue: #2864e8;
  --next-selected: #eaf0ff;
  --next-nav-height: 68px;
}
:root[data-theme="dark"] {
  --next-bg: #090b10;
  --next-surface: #11141b;
  --next-text: #f3f4f7;
  --next-muted: #969ca9;
  --next-line: #252932;
  --next-blue: #79a6ff;
  --next-selected: #172742;
}
html.web-runtime body { background: var(--next-bg); color: var(--next-text); }
#app .rail {
  background: var(--next-bg) !important;
  border: 0 !important;
  border-right: 1px solid var(--next-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 20px 8px !important;
  gap: 8px !important;
}
#app .rail-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 6px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--next-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}
#app .rail-button::before, #app .rail-button::after,
#app .rail-icon::before, #app .rail-icon::after { content: none !important; }
#app .rail-button.active { color: var(--next-blue) !important; background: var(--next-selected) !important; }
#app .rail-icon { display: grid !important; place-items: center; width: 24px !important; height: 24px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#app .rail-icon svg { width: 23px !important; height: 23px !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#app .rail-label { display: block !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; font: 500 10px/14px system-ui, sans-serif !important; letter-spacing: 0 !important; }
#app .rail-new-badge { display: none !important; }
#app .rail .glass-surface-layer { display: none !important; }
#app #menuSidebar { background: var(--next-bg); color: var(--next-text); padding: 24px !important; max-width: 640px !important; }
.next-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
#app .next-page-heading h1 { margin: 0 !important; font: 700 24px/32px system-ui, sans-serif !important; letter-spacing: 0 !important; }
#app .next-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--next-text) !important; }
.next-icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#app .menu-account-hub { display: flex !important; flex-direction: column !important; background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; gap: 0 !important; }
#app .menu-profile-header { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 0 0 20px !important; border: 0 !important; background: none !important; }
#app #menuProfileAvatar { width: 80px !important; height: 80px !important; border-radius: 50% !important; object-fit: cover; border: 0 !important; }
#app .menu-profile-copy { min-width: 0; width: 100%; text-align: center; }
#app #menuProfileName { font: 700 24px/32px system-ui, sans-serif !important; color: var(--next-text) !important; margin: 0 !important; overflow-wrap: anywhere; }
#app .menu-code-row { display: flex !important; align-items: center; justify-content: center; gap: 4px; }
#app #ownId { width: 164px !important; max-width: 65%; padding: 0 !important; height: 44px !important; text-align: right; color: var(--next-muted) !important; background: none !important; border: none !important; box-shadow: none !important; font: 400 14px/20px system-ui !important; }
#app #copyOwnId { width: 44px !important; height: 44px !important; background: none !important; color: var(--next-muted) !important; border: 0 !important; box-shadow: none !important; }
#app #arcadeWallet { display: none !important; }
#app .profile-social-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(360px,100%); margin: -4px auto 16px; }
#app .profile-social-summary > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px 8px; }
#app .profile-social-summary strong { color: var(--next-text); font: 700 18px/24px system-ui,sans-serif; }
#app .profile-social-summary span { color: var(--next-muted); font: 500 12px/18px system-ui,sans-serif; }
#app .profile-primary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: min(420px,100%); margin: 0 auto 12px; }
#app .profile-primary-actions button { min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; color: #fff; background: #2864e8; box-shadow: none; font: 600 14px/20px system-ui,sans-serif; }
#app .profile-primary-actions button.secondary { color: var(--next-text); background: var(--next-line); }
#app .menu-presence-toggle { display: flex !important; justify-content: space-between !important; padding: 12px 0 !important; min-height: 48px; border: 0 !important; background: transparent !important; color: var(--next-text) !important; }
#app .menu-presence-copy strong { font: 500 14px/20px system-ui !important; }
#app .menu-quick-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; padding: 4px 0 24px !important; margin: 0 !important; }
#app .menu-quick-actions button { min-height: 44px !important; border-radius: 12px !important; border: 0 !important; box-shadow: none !important; font: 600 14px/20px system-ui !important; color: var(--next-text) !important; background: var(--next-line) !important; }
#app #toggleMenuAddContact { background: #2864e8 !important; color: #fff !important; }
#app .profile-content-section { width: 100%; margin: 4px 0 24px; }
#app .profile-content-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
#app .profile-content-heading h2 { margin: 0; color: var(--next-text); font: 700 18px/24px system-ui,sans-serif; }
#app #profileCreateContent { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: var(--next-text); background: transparent; box-shadow: none; }
#app #profileCreateContent svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
#app .profile-content-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--next-line); }
#app .profile-content-tabs button { position: relative; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; color: var(--next-muted); background: transparent; box-shadow: none; font: 600 13px/20px system-ui,sans-serif; }
#app .profile-content-tabs button.active { color: var(--next-text); }
#app .profile-content-tabs button.active::after { content: ""; position: absolute; right: 24%; bottom: -1px; left: 24%; height: 2px; border-radius: 2px; background: #2864e8; }
#app .profile-content-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; width: 100%; padding-top: 2px; }
#app .profile-content-tile { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 3/4; padding: 0; border: 0; border-radius: 2px; background: var(--next-surface); box-shadow: none; overflow: hidden; }
#app .profile-content-tile :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; }
#app .profile-content-tile .profile-content-fallback { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; color: var(--next-text); background: var(--next-selected); font: 600 12px/16px system-ui,sans-serif; overflow-wrap: anywhere; }
#app .profile-content-play { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; color: #fff; border-radius: 50%; background: #080b12a8; }
#app .profile-content-play svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#app .profile-content-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; padding: 24px; color: var(--next-muted); text-align: center; }
#app .profile-content-empty svg { width: 36px; height: 36px; margin-bottom: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#app .profile-content-empty strong { color: var(--next-text); font: 650 15px/22px system-ui,sans-serif; }
#app .profile-content-empty span { margin-top: 2px; font: 400 13px/18px system-ui,sans-serif; }
#app .profile-content-empty button { min-height: 44px; margin-top: 16px; padding: 0 20px; border: 0; border-radius: 12px; color: #fff; background: #2864e8; font: 600 14px/20px system-ui,sans-serif; }
#app .menu-shortcuts { display: flex !important; flex-direction: column !important; gap: 0 !important; border-top: 1px solid var(--next-line) !important; }
#app .menu-shortcuts > button { display: grid !important; grid-template-columns: 40px minmax(0,1fr) 20px !important; align-items: center; gap: 12px !important; min-height: 76px !important; padding: 12px 0 !important; margin: 0 !important; color: var(--next-text) !important; border: 0 !important; border-bottom: 1px solid var(--next-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-align: left; }
#app .menu-shortcuts strong { display: block; color: var(--next-text) !important; font: 600 16px/22px system-ui !important; }
#app .menu-shortcuts small { display: block; margin-top: 2px; color: var(--next-muted) !important; font: 400 12px/18px system-ui !important; }
#app .menu-shortcut-icon { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; background: var(--next-selected) !important; color: var(--next-blue) !important; border: 0 !important; border-radius: 12px !important; }
#app .menu-shortcut-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#app .menu-chevron { color: var(--next-muted) !important; }
#app #websiteButton { display: none !important; }
@media (max-width: 760px) {
  html.web-runtime #app.app-shell { display: grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: minmax(0,1fr) calc(var(--next-nav-height) + env(safe-area-inset-bottom)) !important; height: var(--mobile-viewport-height, 100dvh) !important; padding: 0 !important; gap: 0 !important; }
  #app > .sidebar, #app > .content { grid-column: 1 !important; grid-row: 1 !important; height: 100% !important; min-height: 0 !important; width: 100% !important; padding: 0 !important; overflow: hidden !important; background: var(--next-bg) !important; }
  #app > .rail { position: relative !important; inset: auto !important; grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; grid-template-rows: 56px !important; align-items: center !important; width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important; gap: 4px !important; border: 0 !important; border-top: 1px solid var(--next-line) !important; z-index: 50 !important; }
  #app .rail > #railWalletButton, #app .rail > [data-sidebar="contacts"], #app .rail > [data-view="settings"], #app .rail > .rail-spacer { display: none !important; }
  #app .rail > .message-button { order: 1; }
  #app .rail > #discoverButton { order: 2; }
  #app .rail > #arcadeButton { display: flex !important; order: 3; }
  #app .rail > #activityButton { order: 4; }
  #app .rail > [data-sidebar="menu"] { order: 5; }
  #app.app-shell.discover-mode.reels-active.reel-focus-mode > .rail { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
  #app #menuSidebar { height: 100% !important; min-height: 0 !important; overflow-y: auto !important; overflow-anchor: none; overscroll-behavior: contain; padding: calc(16px + env(safe-area-inset-top)) 20px 24px !important; }
  #app #arcadeView { height: 100% !important; padding: 0 !important; }
  #app #arcadeFrame { height: 100% !important; width: 100% !important; border: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { #app .rail-button { transition: none !important; } }

@media (max-width: 760px) and (pointer: coarse) {
  html.web-runtime.mobile-device #app #settingsView.active-view {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--next-bg) !important;
  }
  html.web-runtime.mobile-device #app #settingsView > .panel-heading {
    position: relative !important;
    z-index: 2 !important;
    min-height: calc(56px + env(safe-area-inset-top)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(16px + env(safe-area-inset-top)) 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--next-line) !important;
    border-radius: 0 !important;
    background: var(--next-bg) !important;
    box-shadow: none !important;
  }
  html.web-runtime.mobile-device #app #settingsView > .panel-heading h2 { margin: 0 !important; font: 700 20px/28px system-ui !important; }
  html.web-runtime.mobile-device #app #settingsView .settings-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px 0 !important;
    overflow: hidden !important;
  }
  html.web-runtime.mobile-device #app #settingsView .settings-tabs {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(84px, 1fr) !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
  }
  html.web-runtime.mobile-device #app #settingsView .settings-tabs::-webkit-scrollbar { display: none !important; }
  html.web-runtime.mobile-device #app #settingsView .settings-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  html.web-runtime.mobile-device #app #settingsView .settings-panel::-webkit-scrollbar { display: none !important; }
  html.web-runtime.mobile-device #app #settingsView .settings-tab,
  html.web-runtime.mobile-device #app #settingsView .settings-panel button,
  html.web-runtime.mobile-device #app #settingsView .settings-panel input:not([type="hidden"]),
  html.web-runtime.mobile-device #app #settingsView .settings-panel select,
  html.web-runtime.mobile-device #app #settingsView .settings-panel textarea {
    min-height: 44px !important;
  }
  html.web-runtime.mobile-device #app #settingsView .settings-tab { width: 100% !important; height: 44px !important; padding-inline: 8px !important; font-size: 11px !important; white-space: nowrap !important; }
  html.web-runtime.mobile-device #app #settingsView .settings-panel :is(input,select,textarea) { font-size: 16px !important; }
  html.web-runtime.mobile-device #app #settingsView .settings-panel input[type="range"] { height: 44px !important; padding-block: 12px !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .settings-panel-heading { min-height: 52px !important; height: auto !important; max-height: none !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel #refreshAccountStatus { min-height: 44px !important; height: 44px !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .account-avatar-editor { width: 88px !important; height: 88px !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .account-avatar-editor .account-edit-button { right: -8px !important; bottom: -4px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; background-clip: padding-box !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .account-name-line .account-edit-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .account-profile-copy .account-history-button { position: static !important; width: auto !important; min-height: 44px !important; margin-top: 4px !important; padding: 0 14px !important; white-space: nowrap !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel :is(.copy-row input,.copy-row button,.account-primary-actions button,.account-secondary-actions button) { min-height: 44px !important; height: 44px !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .account-safety-card:not([open]) { min-height: 44px !important; height: 44px !important; max-height: 44px !important; }
  html.web-runtime.mobile-device #app #accountsSettingsPanel .account-safety-card summary { min-height: 44px !important; padding: 12px !important; }

  html.web-runtime.mobile-device #app #personalisationSidebar.active-sidebar-view {
    display: grid !important;
    align-content: start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
  }
  html.web-runtime.mobile-device #app #personalisationSidebar::-webkit-scrollbar { display: none !important; }
  html.web-runtime.mobile-device #app #personalisationSidebar .appearance-studio-heading { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 10px !important; }
  html.web-runtime.mobile-device #app #personalisationSidebar #closeAppearanceSettings {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  html.web-runtime.mobile-device #app #personalisationSidebar :is(select,input[type="range"],#resetPalette) {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  html.web-runtime.mobile-device #app #personalisationSidebar input[type="range"] { height: 44px !important; padding-block: 12px !important; }
  html.web-runtime.mobile-device #app #personalisationSidebar .message-color-presets { gap: 6px !important; }
  html.web-runtime.mobile-device #app #personalisationSidebar .message-color-presets button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-width: 6px !important;
    background-clip: padding-box !important;
  }
  html.web-runtime.mobile-device #app #personalisationSidebar .theme-preset { min-height: 52px !important; }
  html.web-runtime.mobile-device #app #personalisationSidebar .sidebar-actions button { min-height: 46px !important; height: 46px !important; }

  html.web-runtime.mobile-device #app #messageForm:has(#voiceRecordingBar:not(.hidden)) {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px !important;
  }
  html.web-runtime.mobile-device #app #messageForm:has(#voiceRecordingBar:not(.hidden)) > :is(.composer-tool-bar,#messageInput,#sendMessageButton) { display: none !important; }
  html.web-runtime.mobile-device #app #voiceRecordingBar:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px 10px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 8px 8px 8px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--next-text) !important;
    background: var(--next-selected) !important;
    box-shadow: none !important;
  }
  html.web-runtime.mobile-device #app #voiceRecordingBar .voice-recording-status { min-height: 44px !important; font: 650 14px/20px system-ui !important; }
  html.web-runtime.mobile-device #app #voiceRecordingBar .voice-recording-status i { width: 8px !important; height: 8px !important; flex-basis: 8px !important; background: #f0646d !important; }
  html.web-runtime.mobile-device #app #voiceRecordingBar .voice-recording-actions { gap: 4px !important; }
  html.web-runtime.mobile-device #app #voiceRecordingBar .voice-recording-actions button {
    min-width: 52px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--next-line) !important;
    color: var(--next-text) !important;
    box-shadow: none !important;
    font: 600 12px/16px system-ui !important;
  }
  html.web-runtime.mobile-device #app #voiceRecordingBar #finishVoiceRecording { background: var(--next-blue) !important; color: #fff !important; }
  html.web-runtime.mobile-device #app #voiceRecordingBar .voice-transcript-preview {
    grid-column: 1 / -1 !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--next-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 500 12px/18px system-ui !important;
  }

  html.web-runtime.mobile-device #storyShareDialog[open] {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
  }
  html.web-runtime.mobile-device #storyShareDialog::backdrop { background: rgb(0 0 0 / 58%) !important; backdrop-filter: blur(3px) !important; }
  html.web-runtime.mobile-device #storyShareDialog[open] > .story-share-card {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(76dvh, 660px) !important;
    margin: 0 !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--next-surface) !important;
    box-shadow: 0 -18px 48px rgb(0 0 0 / 38%) !important;
    overflow: hidden !important;
  }
  html.web-runtime.mobile-device #storyShareDialog .story-dialog-heading { grid-template-columns: minmax(0, 1fr) 44px !important; min-height: 48px !important; }
  html.web-runtime.mobile-device #storyShareDialog .story-dialog-heading h2 { font-size: 20px !important; line-height: 26px !important; }
  html.web-runtime.mobile-device #storyShareDialog #cancelStoryShare { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; border: 0 !important; border-radius: 50% !important; background: var(--next-line) !important; }
  html.web-runtime.mobile-device #storyShareDialog .dialog-member-picker { display: grid !important; gap: 4px !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-y: auto !important; }
  html.web-runtime.mobile-device #storyShareDialog .member-option { display: grid !important; grid-template-columns: 24px 44px minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; min-height: 56px !important; margin: 0 !important; padding: 6px 8px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; }
  html.web-runtime.mobile-device #storyShareDialog .member-option:has(input:checked) { background: var(--next-selected) !important; }
  html.web-runtime.mobile-device #storyShareDialog #confirmStoryShare { min-height: 48px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-blue) !important; color: #fff !important; box-shadow: none !important; }
  html.web-runtime.mobile-device #toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; width: max-content !important; max-width: calc(100vw - 24px) !important; min-height: 44px !important; padding: 10px 14px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-surface) !important; color: var(--next-text) !important; box-shadow: 0 10px 28px rgb(0 0 0 / 36%) !important; }

  html.web-runtime #app .reel-actions { width: 54px !important; gap: 8px !important; }
  html.web-runtime #app .reel-actions > button { width: 54px !important; min-width: 54px !important; background: transparent !important; }
  html.web-runtime #app .reel-actions > button b { width: 44px !important; height: 44px !important; border: 1px solid rgb(255 255 255 / 12%) !important; border-radius: 14px !important; background: rgb(7 10 16 / 62%) !important; box-shadow: none !important; backdrop-filter: blur(10px) !important; }
  html.web-runtime #app .reel-actions .reel-profile-action { display: grid !important; place-items: center !important; width: 54px !important; min-height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  html.web-runtime #app .reel-actions .reel-profile-avatar { width: 44px !important; height: 44px !important; border: 2px solid #fff !important; border-radius: 50% !important; background: #2864e8 !important; box-shadow: 0 3px 14px #0006 !important; overflow: hidden !important; }
  html.web-runtime #app .reel-actions .reel-profile-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html.web-runtime #app .reel-actions .reel-profile-action > i { right: 0 !important; bottom: 0 !important; display: grid !important; place-items: center !important; width: 18px !important; height: 18px !important; border: 2px solid #05070b !important; border-radius: 50% !important; color: #fff !important; background: #2864e8 !important; font: 700 13px/1 system-ui !important; }
  html.web-runtime #app .reel-copy { padding: 0 0 12px !important; background: transparent !important; text-shadow: 0 1px 4px #000, 0 2px 10px #000a !important; }
  html.web-runtime #app .reel-copy strong { font: 700 16px/22px system-ui,sans-serif !important; letter-spacing: 0 !important; }
  html.web-runtime #app .reel-copy p { margin: 4px 0 !important; font: 400 13px/18px system-ui,sans-serif !important; }
  html.web-runtime #app .reel-copy > span { color: #d5d9e1 !important; font: 500 10px/14px system-ui,sans-serif !important; }
}

/* Wallet is one surface, with stable native dialog semantics and no glass lens. */
html.web-runtime #walletDialog { width: min(480px, calc(100vw - 32px)) !important; max-width: none !important; max-height: calc(100dvh - 32px) !important; padding: 0 !important; border: 1px solid var(--next-line) !important; border-radius: 20px !important; background: var(--next-surface) !important; color: var(--next-text) !important; box-shadow: 0 24px 80px #0004 !important; overflow: auto !important; }
html.web-runtime #walletDialog::backdrop { background: #0008; backdrop-filter: blur(6px); }
html.web-runtime #walletDialog .wallet-sheet { width: 100% !important; max-width: none !important; padding: 24px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html.web-runtime #walletDialog .wallet-sheet > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
html.web-runtime #walletDialog h2 { display: flex; align-items: center; gap: 8px; margin: 8px 0 24px !important; font: 700 28px/36px system-ui !important; color: var(--next-text) !important; }
html.web-runtime #walletDialog h2 span { font: 700 22px/28px system-ui; color: var(--next-blue); }
html.web-runtime #walletDialog small { color: var(--next-muted) !important; font: 500 12px/18px system-ui !important; }
html.web-runtime #walletDialog #closeWalletDialog { width: 44px !important; height: 44px !important; padding: 12px !important; border: 0 !important; background: var(--next-line) !important; color: var(--next-text) !important; box-shadow: none !important; }
html.web-runtime #walletDialog .wallet-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.web-runtime #walletDialog .wallet-choice-grid button { min-height: 112px !important; padding: 16px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-selected) !important; color: var(--next-text) !important; box-shadow: none !important; text-align: left; }
html.web-runtime #walletDialog .wallet-action-icon { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px; color: var(--next-blue); border: 0 !important; background: none !important; }
html.web-runtime #walletDialog .wallet-history-section { margin-top: 24px !important; padding-top: 20px !important; border-top: 1px solid var(--next-line) !important; }
html.web-runtime #walletDialog .text-button { min-height: 44px; background: transparent !important; color: var(--next-blue) !important; box-shadow: none !important; border: 0 !important; }
html.web-runtime #walletDialog .muted { color: var(--next-muted) !important; }

/* Wide website: a real two-pane messenger instead of stretched side-panel UI. */
@media (min-width: 761px) {
  html.web-runtime #app #settingsView.active-view { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 68px minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; height: 100dvh !important; overflow: hidden !important; }
  html.web-runtime #app #settingsView > .panel-heading { position: relative !important; min-height: 68px !important; height: 68px !important; margin: 0 !important; padding: 16px 28px !important; border: 0 !important; border-bottom: 1px solid var(--next-line) !important; border-radius: 0 !important; background: var(--next-bg) !important; backdrop-filter: none !important; }
  html.web-runtime #app #settingsView > .panel-heading h2 { margin: 0 !important; color: var(--next-text) !important; font: 700 24px/32px system-ui !important; }
  html.web-runtime #app #settingsView .settings-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 16px !important; width: min(100%, 980px) !important; height: 100% !important; margin: 0 auto !important; padding: 16px 24px 28px !important; overflow: hidden !important; }
  html.web-runtime #app #settingsView .settings-tabs { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; min-height: 48px !important; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-surface) !important; box-shadow: none !important; }
  html.web-runtime #app #settingsView .settings-tab { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; border: 0 !important; border-radius: 9px !important; color: var(--next-muted) !important; background: transparent !important; box-shadow: none !important; font: 600 13px/18px system-ui !important; }
  html.web-runtime #app #settingsView .settings-tab.active { color: var(--next-text) !important; background: var(--next-selected) !important; }
  html.web-runtime #app #settingsView .settings-panel { min-height: 0 !important; padding: 0 8px 24px !important; overflow-x: hidden !important; overflow-y: auto !important; }
  html.web-runtime #app #accountsSettingsPanel { display: none !important; align-content: start !important; gap: 14px !important; width: min(100%, 760px) !important; margin: 0 auto !important; }
  html.web-runtime #app #accountsSettingsPanel.active-settings-panel { display: grid !important; }
  html.web-runtime #app #accountsSettingsPanel .settings-panel-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; min-height: 52px !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--next-line) !important; }
  html.web-runtime #app #accountsSettingsPanel .settings-panel-heading h3 { margin: 0 !important; color: var(--next-text) !important; font: 650 18px/24px system-ui !important; }
  html.web-runtime #app #refreshAccountStatus { min-width: 84px !important; min-height: 40px !important; height: 40px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; color: var(--next-blue) !important; background: var(--next-line) !important; box-shadow: none !important; font-size: 13px !important; }
  html.web-runtime #app #accountsSettingsPanel .account-settings-card { gap: 16px !important; padding: 20px !important; border: 1px solid var(--next-line) !important; border-radius: 16px !important; background: var(--next-surface) !important; box-shadow: none !important; }
  html.web-runtime #app #accountsSettingsPanel .account-profile-row { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) !important; align-items: center !important; gap: 20px !important; padding: 0 !important; text-align: left !important; }
  html.web-runtime #app #accountsSettingsPanel .account-avatar-editor { width: 88px !important; height: 88px !important; }
  html.web-runtime #app #accountsSettingsPanel .account-profile-row img { width: 88px !important; height: 88px !important; border: 2px solid color-mix(in srgb, var(--next-blue) 68%, white) !important; border-radius: 50% !important; box-shadow: none !important; }
  html.web-runtime #app #accountsSettingsPanel .account-profile-copy { display: grid !important; justify-items: start !important; gap: 4px !important; text-align: left !important; }
  html.web-runtime #app #accountsSettingsPanel .account-profile-copy .account-history-button { position: static !important; width: auto !important; min-width: 0 !important; min-height: 36px !important; margin-top: 4px !important; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: var(--next-line) !important; color: var(--next-text) !important; box-shadow: none !important; font: 600 12px/16px system-ui !important; }
  html.web-runtime #app #accountsSettingsPanel .account-name-line { justify-content: start !important; width: 100% !important; }
  html.web-runtime #app #accountsSettingsPanel .account-name-line h4 { margin: 0 !important; color: var(--next-text) !important; font: 700 22px/28px system-ui !important; }
  html.web-runtime #app #accountsSettingsPanel .account-profile-row p { margin: 0 !important; color: var(--next-muted) !important; font: 400 13px/19px system-ui !important; }
  html.web-runtime #app #accountsSettingsPanel .copy-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; margin: 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--next-line) !important; }
  html.web-runtime #app #accountsSettingsPanel .copy-row :is(input,button) { min-height: 44px !important; height: 44px !important; border-radius: 10px !important; }
  html.web-runtime #app #accountsSettingsPanel .copy-row input { padding: 0 12px !important; border: 1px solid var(--next-line) !important; background: var(--next-bg) !important; color: var(--next-text) !important; font-size: 14px !important; }
  html.web-runtime #app #copyAccountCode { min-width: 72px !important; border: 0 !important; background: var(--next-line) !important; color: var(--next-blue) !important; }
  html.web-runtime #app #accountsSettingsPanel :is(.account-primary-actions,.account-secondary-actions) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html.web-runtime #app #accountsSettingsPanel :is(.account-primary-actions,.account-secondary-actions) button { min-height: 44px !important; height: 44px !important; padding: 0 14px !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; font: 600 13px/18px system-ui !important; }
  html.web-runtime #app #accountsSettingsPanel .account-primary-actions button { background: var(--next-blue) !important; color: #fff !important; }
  html.web-runtime #app #accountsSettingsPanel .account-secondary-actions button { background: var(--next-line) !important; color: var(--next-text) !important; }
  html.web-runtime #app #accountsSettingsPanel #deleteAccountButton { background: color-mix(in srgb, #ef5350 18%, var(--next-surface)) !important; color: #ff7774 !important; }
  html.web-runtime #app #accountsSettingsPanel button:disabled { opacity: .42 !important; }
  html.web-runtime #app #accountsSettingsPanel .account-safety-card:not([open]) { height: 48px !important; max-height: 48px !important; }
  html.web-runtime #app #accountsSettingsPanel .account-safety-card summary { padding: 13px 16px !important; color: var(--next-text) !important; font: 600 14px/20px system-ui !important; }

  html.web-runtime #app #activityView.active-view { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) !important; gap: 10px !important; height: 100dvh !important; padding: 16px 20px 20px !important; overflow: hidden !important; }
  html.web-runtime #app #activityView .activity-heading { min-height: 68px !important; margin: 0 !important; padding: 12px 16px !important; border: 1px solid var(--next-line) !important; border-radius: 12px !important; background: var(--next-surface) !important; box-shadow: none !important; }
  html.web-runtime #app #activityView .activity-heading h2 { margin: 0 !important; color: var(--next-text) !important; font: 700 22px/28px system-ui !important; }
  html.web-runtime #app #activityView .activity-heading :is(.destination-eyebrow,span) { display: none !important; }
  html.web-runtime #app #clearActivity { min-width: 88px !important; min-height: 40px !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; color: var(--next-muted) !important; background: var(--next-line) !important; box-shadow: none !important; }
  html.web-runtime #app #activityFilters { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-surface) !important; box-shadow: none !important; }
  html.web-runtime #app #activityFilters button { display: grid !important; place-items: center !important; width: 100% !important; min-height: 40px !important; height: 40px !important; padding: 0 12px !important; border: 0 !important; border-radius: 9px !important; color: var(--next-muted) !important; background: transparent !important; box-shadow: none !important; font: 600 13px/18px system-ui !important; }
  html.web-runtime #app #activityFilters button.active { color: var(--next-text) !important; background: var(--next-selected) !important; }
  html.web-runtime #app #activityList { min-height: 0 !important; padding: 0 !important; overflow-y: auto !important; }
  html.web-runtime #app .activity-empty { display: grid !important; place-content: center !important; justify-items: center !important; gap: 8px !important; min-height: 100% !important; padding: 32px !important; color: var(--next-muted) !important; text-align: center !important; }
  html.web-runtime #app .activity-empty svg { width: 44px !important; height: 44px !important; margin-bottom: 4px !important; fill: none !important; stroke: var(--next-muted) !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  html.web-runtime #app .activity-empty strong { color: var(--next-text) !important; font: 650 18px/24px system-ui !important; }
  html.web-runtime #app .activity-empty span { color: var(--next-muted) !important; font: 400 13px/18px system-ui !important; }
  html.web-runtime #app .mobile-activity-heading-actions { display: none !important; }

  html.web-runtime #app .mobile-header-profile,
  html.web-runtime #app .mobile-contact-swipe-actions { display: none !important; }
  html.web-runtime #app #chatView.active-view {
    display: grid !important;
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--next-bg) !important;
  }
  html.web-runtime #app #contactPickerScreen,
  html.web-runtime #app #conversationScreen,
  html.web-runtime #app.messages-mode:not(.conversation-open) #contactPickerScreen,
  html.web-runtime #app.messages-mode:not(.conversation-open) #conversationScreen,
  html.web-runtime #app.messages-mode.conversation-open #contactPickerScreen,
  html.web-runtime #app.messages-mode.conversation-open #conversationScreen {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--next-bg) !important;
  }
  html.web-runtime #app #contactPickerScreen {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    padding: 0 14px 14px !important;
    border-right: 1px solid var(--next-line) !important;
  }
  html.web-runtime #app #conversationScreen {
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }
  html.web-runtime #app .message-picker-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 14px 2px 10px !important;
    border: 0 !important;
    background: transparent !important;
  }
  html.web-runtime #app .message-picker-heading h2 { margin: 0 !important; color: var(--next-text) !important; font: 700 24px/30px system-ui !important; letter-spacing: 0 !important; }
  html.web-runtime #app .message-picker-heading p { display: none !important; }
  html.web-runtime #app .message-picker-tools { display: flex !important; align-items: center !important; gap: 4px !important; }
  html.web-runtime #app .message-picker-tools > * { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 8px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; }
  html.web-runtime #app .message-picker-tools .presence-toggle { display: none !important; }
  html.web-runtime #app .message-picker-tools .sync-command { display: none !important; }
  html.web-runtime #app .message-picker-tools .compact-multi-send { font-size: 0 !important; }
  html.web-runtime #app .message-picker-tools .compact-multi-send::before { content: "+"; color: var(--next-text); font: 500 23px/1 system-ui; }
  html.web-runtime #app .stories-panel { display: grid !important; gap: 8px !important; min-height: 78px !important; padding: 2px 2px 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  html.web-runtime #app .stories-heading { min-height: 36px !important; }
  html.web-runtime #app .stories-heading strong { color: var(--next-text) !important; font: 650 13px/18px system-ui !important; }
  html.web-runtime #app .stories-heading span { display: none !important; }
  html.web-runtime #app #createStoryButton { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; color: var(--next-blue) !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; }
  html.web-runtime #app #createStoryButton::before { content: "+"; font: 400 24px/1 system-ui; }
  html.web-runtime #app .stories-strip { display: flex !important; align-items: flex-start !important; gap: 8px !important; min-height: 64px !important; max-height: 74px !important; padding: 2px 0 6px !important; overflow-x: auto !important; overflow-y: hidden !important; }
  html.web-runtime #app .story-chip { flex: 0 0 54px !important; width: 54px !important; min-width: 54px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  html.web-runtime #app .story-chip-avatar { width: 46px !important; height: 46px !important; padding: 2px !important; }
  html.web-runtime #app .story-chip-label { font-size: 9px !important; line-height: 12px !important; }
  html.web-runtime #app .message-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; min-height: 44px !important; margin: 0 0 8px !important; padding: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-surface) !important; box-shadow: none !important; }
  html.web-runtime #app .message-tabs button { min-height: 36px !important; height: 36px !important; padding: 0 8px !important; border: 0 !important; border-radius: 9px !important; color: var(--next-muted) !important; background: transparent !important; box-shadow: none !important; font: 600 12px/18px system-ui !important; }
  html.web-runtime #app .message-tabs button.active { color: var(--next-text) !important; background: var(--next-selected) !important; }
  html.web-runtime #app .tab-label-full { display: none !important; }
  html.web-runtime #app .tab-label-short { display: inline !important; }
  html.web-runtime #app #messageContacts { display: flex !important; flex-direction: column !important; gap: 2px !important; min-height: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; }
  html.web-runtime #app #messageContacts > .message-contact { min-height: 68px !important; height: 68px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; }
  html.web-runtime #app #messageContacts > .message-contact:hover { background: var(--next-surface) !important; }
  html.web-runtime #app #messageContacts .message-contact-summary { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 68px !important; padding: 8px !important; }
  html.web-runtime #app #messageContacts :is(.avatar-wrap,.avatar),
  html.web-runtime #app #messageContacts .avatar img { width: 46px !important; min-width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover !important; }
  html.web-runtime #app #messageContacts .contact-main { min-width: 0 !important; }
  html.web-runtime #app #messageContacts .contact-main strong { display: block !important; overflow: hidden !important; color: var(--next-text) !important; font: 600 14px/20px system-ui !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html.web-runtime #app #messageContacts .contact-main small { display: block !important; overflow: hidden !important; color: var(--next-muted) !important; font: 400 12px/18px system-ui !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html.web-runtime #app #messageContacts .message-row-actions { display: flex !important; align-items: center !important; gap: 0 !important; }
  html.web-runtime #app #messageContacts .message-row-actions button { position: static !important; display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 8px !important; border: 0 !important; border-radius: 10px !important; color: var(--next-muted) !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
  html.web-runtime #app #messageContacts .message-row-actions .message-call-button { display: none !important; }
  html.web-runtime #app #messageContacts .message-row-actions svg { width: 18px !important; height: 18px !important; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html.web-runtime #app #messageContacts .message-pin-toggle.active svg { fill: currentColor; color: var(--next-blue); }
  html.web-runtime #app #conversationScreen > .topbar {
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 76px !important;
    height: 76px !important;
    max-height: 76px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--next-line) !important;
    background: var(--next-bg) !important;
    box-shadow: none !important;
  }
  html.web-runtime #app #backToContacts { display: none !important; }
  html.web-runtime #app .chat-identity { grid-column: 1 !important; grid-row: 1 !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
  html.web-runtime #app #activeAvatar { display: grid !important; place-items: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; overflow: hidden !important; border-radius: 50% !important; color: #fff !important; background: var(--next-blue) !important; font: 700 16px/1 system-ui !important; }
  html.web-runtime #app #activeAvatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html.web-runtime #app .chat-heading { min-width: 0 !important; }
  html.web-runtime #app .chat-heading h2 { margin: 0 !important; overflow: hidden !important; color: var(--next-text) !important; font: 650 16px/22px system-ui !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html.web-runtime #app .chat-heading p { margin: 1px 0 0 !important; overflow: hidden !important; color: var(--next-muted) !important; font: 400 12px/17px system-ui !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html.web-runtime #app #conversationScreen .toolbar { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: auto !important; min-width: 0 !important; }
  html.web-runtime #app #conversationScreen .toolbar,
  html.web-runtime #app #conversationScreen .toolbar-row { display: flex !important; align-items: center !important; gap: 4px !important; }
  html.web-runtime #app #conversationScreen .toolbar button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 8px !important; overflow: hidden !important; border: 0 !important; border-radius: 10px !important; color: var(--next-muted) !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; }
  html.web-runtime #app #conversationScreen .toolbar button svg { width: 21px !important; height: 21px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  html.web-runtime #app #messageSearchBar { grid-row: 2 !important; }
  html.web-runtime #app #messages { grid-row: 3 !important; min-height: 0 !important; padding: 18px 22px !important; overflow-y: auto !important; background: transparent !important; }
  html.web-runtime #app #messages.empty-state { display: grid !important; place-items: center !important; }
  html.web-runtime #app #messages.empty-state p { max-width: 280px !important; margin: 0 !important; color: var(--next-muted) !important; text-align: center !important; }
  html.web-runtime #app #chatBackgroundLayer { grid-row: 3 !important; }
  html.web-runtime #app #messageForm {
    grid-row: 4 !important;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: auto !important;
    margin: 0 16px 16px !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--next-surface) !important;
    box-shadow: none !important;
  }
  html.web-runtime #app #messageForm > :is(.reply-preview,.voice-recording-bar,.attachment-preview,.upload-progress,.mention-suggestions) { grid-column: 1 / -1 !important; }
  html.web-runtime #app #messageForm .composer-tool-bar { grid-column: 1 !important; grid-row: 6 !important; display: flex !important; align-items: center !important; gap: 2px !important; width: auto !important; }
  html.web-runtime #app #messageForm .composer-tool-bar button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 8px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; }
  html.web-runtime #app #messageInput { grid-column: 2 !important; grid-row: 6 !important; width: 100% !important; min-height: 40px !important; max-height: 128px !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid var(--next-line) !important; border-radius: 12px !important; background: transparent !important; color: var(--next-text) !important; font-size: 16px !important; line-height: 22px !important; }
  html.web-runtime #app #sendMessageButton { grid-column: 3 !important; grid-row: 6 !important; min-width: 64px !important; min-height: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; background: var(--next-blue) !important; color: #fff !important; box-shadow: none !important; }
  html.web-runtime #app #sendMessageButton.mobile-send-empty { display: none !important; }
}