/* Website-only layout. The extension keeps its narrow side-panel rules. */
html.web-runtime,
html.web-runtime body {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html.web-runtime .app-shell,
html.web-runtime .app-shell.sidebar-mode,
html.web-runtime .app-shell.messages-mode,
html.web-runtime .app-shell.settings-mode,
html.web-runtime .app-shell.discover-mode,
html.web-runtime .app-shell.content-mode {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100dvh !important;
}

html.web-runtime .rail { grid-column: 1 !important; width: 64px !important; }
html.web-runtime .sidebar,
html.web-runtime .main-view,
html.web-runtime .content {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: none !important;
}

html.web-runtime .app-shell.sidebar-mode .sidebar { display: block !important; }
html.web-runtime .app-shell.sidebar-mode .content { display: none !important; }
html.web-runtime .app-shell:not(.sidebar-mode) .sidebar { display: none !important; }
html.web-runtime .app-shell:not(.sidebar-mode) .content { display: block !important; }

html.web-runtime .sidebar-view,
html.web-runtime .content > .view > :not(.chat-screen):not(.reel-viewer):not(.story-viewer) {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
}

html.web-runtime .sidebar-view {
  padding: 18px clamp(16px, 3vw, 32px) 32px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.web-runtime .sidebar-view:not(.active-sidebar-view) {
  display: none !important;
}

html.web-runtime .contact-picker-screen,
html.web-runtime .chat-screen,
html.web-runtime .settings-panel,
html.web-runtime .discover-panel,
html.web-runtime .content-panel,
html.web-runtime .activity-panel,
html.web-runtime .arcade-view {
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html.web-runtime .contact-picker-screen {
  padding-inline: clamp(12px, 2.5vw, 28px) !important;
}

/* Each sidebar destination has its own desktop composition. These components
   were authored for a narrow panel and must not be stretched indiscriminately. */
html.web-runtime #menuSidebar {
  max-width: 900px !important;
}

html.web-runtime #personalisationSidebar {
  max-width: 960px !important;
}

html.web-runtime #contactsSidebar {
  max-width: 940px !important;
}

html.web-runtime #contactsSidebar .contact-directory-tabs {
  width: min(100%, 440px) !important;
  margin: 0 0 12px !important;
}

html.web-runtime #contactsSidebar .contact-directory-panel {
  width: 100% !important;
  min-width: 0 !important;
}

html.web-runtime #contactsSidebar .contacts,
html.web-runtime #contactsSidebar .quick-add-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  align-content: start !important;
}

html.web-runtime #contactsSidebar .contact-row,
html.web-runtime #contactsSidebar .quick-add-row,
html.web-runtime #contactsSidebar .contact-item,
html.web-runtime #contactsSidebar .quick-add-item {
  min-height: 54px !important;
  height: auto !important;
  border-radius: 12px !important;
}

html.web-runtime .settings-shell,
html.web-runtime .activity-view,
html.web-runtime .content-library-view,
html.web-runtime .discovery-view {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
}

html.web-runtime .settings-shell {
  height: calc(100dvh - 53px) !important;
  overflow: hidden !important;
}

html.web-runtime .settings-panel.active-settings-panel,
html.web-runtime .discover-content-panel.active-discover-content-panel,
html.web-runtime .content-tab-panel.active-content-tab-panel {
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.web-runtime .contact-picker-screen .contact-card,
html.web-runtime .contact-picker-screen .group-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px 12px !important;
  min-height: 58px !important;
  padding: 9px 11px !important;
}

html.web-runtime .contact-picker-screen .contact-card > button:not(.contact-menu-button),
html.web-runtime .contact-picker-screen .group-card > button:not(.contact-menu-button) {
  width: auto !important;
  min-width: 112px !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

html.web-runtime #arcadeView {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100dvh !important;
  max-width: none !important;
  overflow: hidden !important;
}

html.web-runtime #arcadeView:not(.active-view) { display: none !important; }
html.web-runtime #arcadeFrame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  border: 0 !important;
}

html.web-runtime #websiteDialog[open] {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
}

html.web-runtime #websiteDialog .website-dialog-card {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  margin: auto !important;
}

html.web-runtime dialog[open] > .dialog-card,
html.web-runtime dialog[open] > form.dialog-card,
html.web-runtime dialog[open] > section.dialog-card {
  width: min(100%, 520px) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}

html.web-runtime #storyViewerDialog[open] > .story-viewer-card,
html.web-runtime #reelComposerDialog[open] > .reel-composer-card,
html.web-runtime #callDialog[open] > .call-card {
  width: min(100%, 760px) !important;
}

html.web-runtime .dialog-actions {
  align-items: center !important;
}

html.web-runtime .dialog-actions > button {
  flex: 0 1 auto !important;
  min-width: 92px !important;
}

html.web-runtime .profile-editor-stage,
html.web-runtime #profileEditorCanvas,
html.web-runtime .profile-editor-tools {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.web-runtime .profile-editor-zoom {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.web-runtime .profile-editor-zoom input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.web-runtime .profile-editor-tools {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.web-runtime .profile-editor-tools button {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 900px) {
  html.web-runtime #menuSidebar.active-sidebar-view {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 14px !important;
  }
  html.web-runtime #menuSidebar > .brand {
    grid-column: 1 / -1;
  }
  html.web-runtime #menuSidebar > .identity-card,
  html.web-runtime #menuSidebar > .menu-presence-toggle {
    align-self: stretch !important;
  }
  html.web-runtime #menuSidebar > #addFriendForm {
    grid-column: 1 / -1;
    width: min(100%, 620px) !important;
  }

  html.web-runtime #personalisationSidebar.active-sidebar-view {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 14px !important;
  }
  html.web-runtime #personalisationSidebar > .sidebar-view-heading,
  html.web-runtime #personalisationSidebar > .sidebar-actions {
    grid-column: 1 / -1;
  }
  html.web-runtime #personalisationSidebar > label:first-of-type {
    grid-column: 1 / -1;
    width: min(100%, 320px) !important;
  }

  html.web-runtime #contactsSidebar.active-sidebar-view {
    display: block !important;
  }
  html.web-runtime .contact-picker-screen {
    max-width: 1040px !important;
  }
}

@media (max-width: 760px) {
  html.web-runtime .app-shell,
  html.web-runtime .app-shell.sidebar-mode,
  html.web-runtime .app-shell.messages-mode,
  html.web-runtime .app-shell.settings-mode,
  html.web-runtime .app-shell.discover-mode,
  html.web-runtime .app-shell.content-mode {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  html.web-runtime .rail { width: 56px !important; }
  html.web-runtime .sidebar-view.active-sidebar-view { display: block !important; padding: 10px 9px 20px !important; }
  html.web-runtime .contact-picker-screen { padding-inline: 8px !important; }
  html.web-runtime .contact-picker-screen .contact-card,
  html.web-runtime .contact-picker-screen .group-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  html.web-runtime .contact-picker-screen .contact-card > button:not(.contact-menu-button),
  html.web-runtime .contact-picker-screen .group-card > button:not(.contact-menu-button) {
    min-width: 78px !important;
  }
  html.web-runtime #websiteDialog .website-actions { grid-template-columns: 1fr !important; }
}