/*
 * DiaperGuys X Grid
 * Grid feature parity with a modern X-inspired presentation.
 */

:root {
  --xg-bg: #000000;
  --xg-surface: #16181c;
  --xg-surface-raised: #202327;
  --xg-surface-hover: #181818;
  --xg-border: #2f3336;
  --xg-border-soft: rgba(239, 243, 244, 0.12);
  --xg-text: #e7e9ea;
  --xg-muted: #71767b;
  --xg-blue: #1d9bf0;
  --xg-blue-hover: #1a8cd8;
  --xg-blue-soft: rgba(29, 155, 240, 0.14);
  --xg-heart: #f91880;
  --xg-success: #00ba7c;
  --xg-warning: #ffd400;
  --xg-danger: #f4212e;
  --xg-radius: 16px;
  --xg-radius-sm: 12px;
  --xg-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
}

html,
body:not(.index-body) {
  background: var(--xg-bg) !important;
  color: var(--xg-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body:not(.index-body) a {
  color: inherit;
}

body:not(.index-body) a:hover,
body:not(.index-body) .text-link:hover {
  color: var(--xg-blue);
}

body:not(.index-body) ::selection {
  background: rgba(29, 155, 240, 0.34);
  color: #ffffff;
}

body:not(.index-body) :focus-visible {
  outline: 2px solid var(--xg-blue) !important;
  outline-offset: 3px;
}

/* App shell */
body:not(.index-body) .main-wrapper,
body:not(.index-body) .dg-app-shell,
body:not(.index-body) .dg-main,
body:not(.index-body) .page-content,
body:not(.index-body) .content-wrapper {
  background: var(--xg-bg) !important;
}

body:not(.index-body) .main-header,
body:not(.index-body) .dg-topbar,
body:not(.index-body) .navbar-wrapper {
  background: rgba(0, 0, 0, 0.92) !important;
  border-color: var(--xg-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body:not(.index-body) .dg-sidebar,
body:not(.index-body) .x-sidebar,
body:not(.index-body) .left-sidebar,
body:not(.index-body) .right-sidebar {
  background: var(--xg-bg) !important;
  border-color: var(--xg-border) !important;
}

body:not(.index-body) .dg-topbar a,
body:not(.index-body) .dg-topbar button,
body:not(.index-body) .main-header a,
body:not(.index-body) .main-header button {
  color: var(--xg-muted);
}

body:not(.index-body) .dg-topbar a:hover,
body:not(.index-body) .dg-topbar button:hover,
body:not(.index-body) .main-header a:hover,
body:not(.index-body) .main-header button:hover,
body:not(.index-body) .dg-topbar .active,
body:not(.index-body) .main-header .active {
  color: var(--xg-text) !important;
}

body:not(.index-body) .dg-topbar .active::after,
body:not(.index-body) .main-header .active::after,
body:not(.index-body) .nav-link.active::after {
  background: var(--xg-blue) !important;
}

/* Surfaces */
body:not(.index-body) .card,
body:not(.index-body) .widget,
body:not(.index-body) .post,
body:not(.index-body) .publisher,
body:not(.index-body) .modal-content,
body:not(.index-body) .dropdown-menu,
body:not(.index-body) .offcanvas,
body:not(.index-body) .chat-box,
body:not(.index-body) .dg-panel,
body:not(.index-body) .dg-card,
body:not(.index-body) .dg-feed-card {
  background: var(--xg-bg) !important;
  border: 1px solid var(--xg-border) !important;
  border-radius: var(--xg-radius) !important;
  box-shadow: none !important;
  color: var(--xg-text);
}

body:not(.index-body) .dropdown-menu,
body:not(.index-body) .modal-content,
body:not(.index-body) .offcanvas,
body:not(.index-body) .chat-box {
  background: var(--xg-surface) !important;
  box-shadow: var(--xg-shadow) !important;
}

body:not(.index-body) .card-header,
body:not(.index-body) .card-footer,
body:not(.index-body) .modal-header,
body:not(.index-body) .modal-footer,
body:not(.index-body) .post-footer,
body:not(.index-body) .post-actions,
body:not(.index-body) .comment,
body:not(.index-body) .list-group-item {
  border-color: var(--xg-border) !important;
}

body:not(.index-body) .dropdown-item,
body:not(.index-body) .list-group-item {
  background: transparent;
  color: var(--xg-text);
}

body:not(.index-body) .dropdown-item:hover,
body:not(.index-body) .dropdown-item:focus,
body:not(.index-body) .list-group-item-action:hover {
  background: var(--xg-surface-raised) !important;
  color: #ffffff !important;
}

/* Feed */
body:not(.index-body) .post,
body:not(.index-body) .publisher {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  margin-bottom: 0 !important;
}

body:not(.index-body) .post:hover {
  background: rgba(255, 255, 255, 0.018) !important;
}

body:not(.index-body) .post-text,
body:not(.index-body) .post-description,
body:not(.index-body) .comment-text {
  color: var(--xg-text) !important;
  line-height: 1.48;
}

body:not(.index-body) .text-muted,
body:not(.index-body) .post-time,
body:not(.index-body) .post-meta,
body:not(.index-body) .x-muted {
  color: var(--xg-muted) !important;
}

body:not(.index-body) .post-actions .action-btn {
  color: var(--xg-muted);
  border-radius: 999px;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

body:not(.index-body) .post-actions .action-btn:hover {
  color: var(--xg-blue) !important;
  background: var(--xg-blue-soft) !important;
}

body:not(.index-body) .post-actions .reactions-wrapper:hover,
body:not(.index-body) .reactions-wrapper.js_unreact-post,
body:not(.index-body) .reactions-wrapper.js_unreact-photo,
body:not(.index-body) .reactions-wrapper.js_unreact-comment {
  color: var(--xg-heart) !important;
  background: rgba(249, 24, 128, 0.12) !important;
}

body:not(.index-body) .reactions-wrapper .fa-heart {
  color: var(--xg-heart);
}

body:not(.index-body) .reactions-wrapper:hover .fa-heart {
  transform: scale(1.1);
}

body:not(.index-body) .reactions-container {
  background: var(--xg-surface) !important;
  border: 1px solid var(--xg-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--xg-shadow) !important;
}

/* Tabs and filters */
body:not(.index-body) .nav-tabs,
body:not(.index-body) .dg-feed-tabs,
body:not(.index-body) .dg-subnav,
body:not(.index-body) .feed-tabs {
  background: rgba(0, 0, 0, 0.92) !important;
  border-color: var(--xg-border) !important;
  backdrop-filter: blur(16px);
}

body:not(.index-body) .nav-tabs .nav-link,
body:not(.index-body) .dg-feed-tabs a,
body:not(.index-body) .dg-subnav a,
body:not(.index-body) .feed-tabs a {
  color: var(--xg-muted) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body:not(.index-body) .nav-tabs .nav-link:hover,
body:not(.index-body) .nav-tabs .nav-link.active,
body:not(.index-body) .dg-feed-tabs .active,
body:not(.index-body) .dg-subnav .active,
body:not(.index-body) .feed-tabs .active {
  color: var(--xg-text) !important;
  background: transparent !important;
}

body:not(.index-body) .nav-pills .nav-link.active,
body:not(.index-body) .dg-filter-pill.is-active,
body:not(.index-body) .dg-filter-pill.active {
  color: var(--xg-blue) !important;
  background: var(--xg-blue-soft) !important;
  border-color: rgba(29, 155, 240, 0.45) !important;
}

/* Controls */
body:not(.index-body) .btn-primary,
body:not(.index-body) .btn-info,
body:not(.index-body) .bg-primary {
  background: var(--xg-blue) !important;
  border-color: var(--xg-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body:not(.index-body) .btn-primary:hover,
body:not(.index-body) .btn-info:hover {
  background: var(--xg-blue-hover) !important;
  border-color: var(--xg-blue-hover) !important;
}

body:not(.index-body) .btn-outline-primary {
  color: var(--xg-blue) !important;
  border-color: var(--xg-blue) !important;
}

body:not(.index-body) .btn-outline-primary:hover {
  color: #ffffff !important;
  background: var(--xg-blue) !important;
}

body:not(.index-body) .form-control,
body:not(.index-body) .form-select,
body:not(.index-body) .input-group-text,
body:not(.index-body) textarea,
body:not(.index-body) input[type="text"],
body:not(.index-body) input[type="search"],
body:not(.index-body) input[type="email"],
body:not(.index-body) input[type="password"] {
  background: var(--xg-bg) !important;
  border-color: var(--xg-border) !important;
  color: var(--xg-text) !important;
  border-radius: var(--xg-radius-sm);
}

body:not(.index-body) .form-control:focus,
body:not(.index-body) .form-select:focus,
body:not(.index-body) textarea:focus,
body:not(.index-body) input:focus {
  border-color: var(--xg-blue) !important;
  box-shadow: 0 0 0 1px var(--xg-blue) !important;
}

body:not(.index-body) .form-control::placeholder,
body:not(.index-body) textarea::placeholder,
body:not(.index-body) input::placeholder {
  color: var(--xg-muted) !important;
}

/* Feature surfaces */
body:not(.index-body) .nearby-grid-tile,
body:not(.index-body) .dg-watch-card,
body:not(.index-body) .dg-reel-card,
body:not(.index-body) .dg-orbit-card,
body:not(.index-body) .story-card {
  border-color: var(--xg-border) !important;
  border-radius: var(--xg-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

body:not(.index-body) .nearby-grid-tile:hover,
body:not(.index-body) .dg-watch-card:hover,
body:not(.index-body) .dg-reel-card:hover,
body:not(.index-body) .dg-orbit-card:hover {
  border-color: rgba(29, 155, 240, 0.55) !important;
  transform: translateY(-1px);
}

body:not(.index-body) .leaflet-control,
body:not(.index-body) .dg-map-hud,
body:not(.index-body) .dg-map-panel {
  background: rgba(22, 24, 28, 0.94) !important;
  border-color: var(--xg-border) !important;
  color: var(--xg-text) !important;
  box-shadow: var(--xg-shadow) !important;
}

body:not(.index-body) .badge.bg-primary,
body:not(.index-body) .notification-counter,
body:not(.index-body) .online-dot,
body:not(.index-body) .nearby-online-dot {
  background: var(--xg-blue) !important;
}

/* Mobile */
body:not(.index-body) .dg-mobile-nav,
body:not(.index-body) .mobile-bottom-nav,
body:not(.index-body) .bottom-bar {
  background: rgba(0, 0, 0, 0.94) !important;
  border-color: var(--xg-border) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body:not(.index-body) .dg-mobile-nav .active,
body:not(.index-body) .mobile-bottom-nav .active,
body:not(.index-body) .bottom-bar .active {
  color: var(--xg-blue) !important;
}

/* Keep the full X-style navigation rail on normal desktop screens. */
@media (min-width: 1281px) {
  body.theme-xgrid .container-fluid.x_cf_p {
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
  }

  body.theme-xgrid .x-sidebar-width,
  body.theme-xgrid .x-sidebar-fixed {
    width: 240px;
  }

  body.theme-xgrid .x-content-width {
    width: calc(100% - 240px);
  }

  body.theme-xgrid .search-wrapper-prnt {
    padding-left: 240px;
  }

  body.theme-xgrid .x_content_row > .col-lg-8 {
    width: calc(100% - 360px);
  }

  body.theme-xgrid .x_content_row > .col-lg-4 {
    width: 360px;
    padding-left: 22px;
  }

  body.theme-xgrid .logo-wrapper,
  body.theme-xgrid .x_side_links {
    text-align: left;
  }

  body.theme-xgrid .logo-wrapper img.x_logo_pc,
  body.theme-xgrid .x_side_links > div span.text,
  body.theme-xgrid .x-sidebar .x_user_info img.rounded-circle + .mw-0.mx-2,
  body.theme-xgrid .x_side_create > .btn > span {
    display: inline-block;
  }

  body.theme-xgrid.night-mode .logo-wrapper img.logo-light.x_logo_pc,
  body.theme-xgrid:not(.night-mode) .logo-wrapper img.logo-dark.x_logo_pc,
  body.theme-xgrid .x_logo_mobi,
  body.theme-xgrid .x_side_create > .btn > svg {
    display: none;
  }

  body.theme-xgrid.night-mode .logo-wrapper img.logo-dark.x_logo_pc,
  body.theme-xgrid:not(.night-mode) .logo-wrapper img.logo-light.x_logo_pc {
    display: inline-block;
  }

  body.theme-xgrid .x_side_create {
    max-width: 90%;
    margin-left: 0;
    margin-right: 0;
  }

  body.theme-xgrid .x_side_create > .btn {
    height: auto;
    padding: 0 16px;
  }

  body.theme-xgrid .x_side_links > div span.counter {
    margin: 0 20px;
    transform: translateX(-5px);
  }
}

/* Purposeful X/Bluesky details instead of generic dashboard cards. */
body.theme-xgrid .x_side_links > div,
body.theme-xgrid .x_user_info.main_bg_half {
  border-radius: 999px;
  transition: background-color 150ms ease, color 150ms ease;
}

body.theme-xgrid .x_side_links:hover > div,
body.theme-xgrid .x_user_info.main_bg_half:hover {
  background: rgba(239, 243, 244, 0.1);
}

body.theme-xgrid .x_side_create > .btn,
body.theme-xgrid .btn-main:not(:disabled):not(.disabled) {
  background: var(--xg-blue) !important;
  border-color: var(--xg-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700;
}

body.theme-xgrid .x_side_create > .btn:hover,
body.theme-xgrid .btn-main:not(:disabled):not(.disabled):hover {
  background: var(--xg-blue-hover) !important;
  border-color: var(--xg-blue-hover) !important;
}

body.theme-xgrid .x_top_posts {
  background: rgba(0, 0, 0, 0.88) !important;
  border-bottom: 1px solid var(--xg-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.theme-xgrid .publisher,
body.theme-xgrid .post {
  border-bottom: 1px solid var(--xg-border) !important;
}

body.theme-xgrid .publisher textarea,
body.theme-xgrid .publisher .form-control {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--xg-text) !important;
  font-size: 17px;
}

body.theme-xgrid .post-media-image,
body.theme-xgrid .post-media-image .image,
body.theme-xgrid .post-media-image img,
body.theme-xgrid .post-media video {
  max-height: 620px !important;
}

body.theme-xgrid .post-media-image img,
body.theme-xgrid .post-media video {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}

body.theme-xgrid .x_content_row > .col-lg-4 .card,
body.theme-xgrid .x_content_row > .col-lg-4 .widget,
body.theme-xgrid .x_content_row > .col-lg-4 .content {
  background: #0b0b0b !important;
  border: 1px solid var(--xg-border) !important;
  border-radius: 16px !important;
}

/* DiaperGuys uses one reaction: the heart. Keep backend counts compatible. */
body.theme-xgrid .x-heart-source,
body.theme-xgrid .x-heart-only .reactions-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.theme-xgrid .x-heart-only .reaction-btn-name {
  display: none !important;
}

body.theme-xgrid .x-heart-only {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

body.theme-xgrid .x-heart-only .reaction-btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--xg-muted);
}

body.theme-xgrid .x-heart-only .reaction-btn-icon > * {
  display: none !important;
}

body.theme-xgrid .x-heart-only .reaction-btn-icon::before {
  content: "♡";
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

body.theme-xgrid .x-heart-only.js_unreact-post .reaction-btn-icon,
body.theme-xgrid .x-heart-only.js_unreact-photo .reaction-btn-icon,
body.theme-xgrid .x-heart-only.js_unreact-comment .reaction-btn-icon {
  color: var(--xg-heart) !important;
}

body.theme-xgrid .x-heart-only.js_unreact-post .reaction-btn-icon::before,
body.theme-xgrid .x-heart-only.js_unreact-photo .reaction-btn-icon::before,
body.theme-xgrid .x-heart-only.js_unreact-comment .reaction-btn-icon::before {
  content: "♥";
}

body.theme-xgrid .x-heart-stat {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border: 0 !important;
  background: rgba(249, 24, 128, 0.14) !important;
  color: var(--xg-heart) !important;
  border-radius: 999px;
  font-size: 10px;
}

body.theme-xgrid .reactions-stats .reactions-stats-item {
  display: none !important;
}

body.theme-xgrid .reactions-stats:not(:empty)::before {
  content: "♥";
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(249, 24, 128, 0.14);
  color: var(--xg-heart);
  font-size: 11px;
  line-height: 1;
}

body.theme-xgrid .x-modal-heart,
body.theme-xgrid .x-notification-heart,
body.theme-xgrid .x-user-heart {
  color: var(--xg-heart) !important;
}

body.theme-xgrid .x-user-heart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--xg-bg);
  border-radius: 999px;
  background: var(--xg-surface-2) !important;
  font-size: 11px;
}

body.theme-xgrid .js_post-reactions-stats {
  display: none !important;
}

body.theme-xgrid .x-heart-count {
  min-width: 8px;
  color: var(--xg-muted);
  font-size: 12px;
  line-height: 1;
}

body.theme-xgrid .comment .x-heart-count {
  display: none;
}

body.theme-xgrid .x-heart-only:hover .x-heart-count,
body.theme-xgrid .x-heart-only.js_unreact-post .x-heart-count,
body.theme-xgrid .x-heart-only.js_unreact-photo .x-heart-count,
body.theme-xgrid .x-heart-only.js_unreact-comment .x-heart-count {
  color: var(--xg-heart);
}

body.theme-xgrid .post-text a[href*="/search/hashtag/"],
body.theme-xgrid .post-text a[href*="/hashtag/"] {
  color: var(--xg-blue) !important;
  text-decoration: none;
}

body.theme-xgrid .post-text a[href*="/search/hashtag/"]:hover,
body.theme-xgrid .post-text a[href*="/hashtag/"]:hover {
  text-decoration: underline;
}

/* Keep the create-story control compact and native to the X palette. */
body.theme-xgrid .add-story > a {
  display: block;
  position: relative;
}

body.theme-xgrid .add-story > a > span {
  inset-inline-start: auto !important;
  inset-inline-end: -1px !important;
  top: 44px !important;
  bottom: auto !important;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  transform: none !important;
  align-items: center;
  justify-content: center;
  border: 2px solid #000 !important;
  background: var(--xg-blue) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.24);
  transition: background-color 150ms ease, transform 150ms ease;
}

body.theme-xgrid .add-story:hover > a > span {
  background: var(--xg-blue-hover) !important;
  transform: scale(1.05) !important;
}

body.theme-xgrid .add-story > a > span svg,
body.theme-xgrid .add-story > a > span svg * {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Keep secondary-column links readable and compact. */
body.theme-xgrid .mini-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px !important;
  color: var(--xg-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.theme-xgrid .mini-footer .copyrights {
  width: 100%;
}

body.theme-xgrid .mini-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.theme-xgrid .mini-footer a {
  color: var(--xg-muted);
}

/* Messenger must occupy the viewport without hiding the thread or composer. */
body.theme-xgrid:has(.x-messages-page) {
  height: 100dvh;
  overflow: hidden !important;
}

body.theme-xgrid .x-messages-page {
  height: 100dvh;
  min-height: 0;
}

body.theme-xgrid .x-messages-page .x_menu_sidebar,
body.theme-xgrid .x-messages-page .x_menu_sidebar_content,
body.theme-xgrid .x-messages-page .panel-messages {
  min-height: 0 !important;
  max-height: 100dvh;
}

body.theme-xgrid .x-messages-page .chat-conversations {
  min-height: 0;
  padding-bottom: 14px !important;
  scroll-padding-bottom: 14px;
  overscroll-behavior: contain;
}

body.theme-xgrid .x-messages-page .chat-form {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  border-top: 1px solid var(--xg-border);
  background: var(--xg-surface) !important;
}

/* Floating chat: explicit minimize/restore controls and a fully visible composer. */
body.theme-xgrid .chat-widget.chat-box.x-chat-managed {
  display: block;
  width: min(380px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(640px, calc(100dvh - 24px));
  overflow: hidden;
  border: 1px solid var(--xg-border) !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--xg-surface) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.52) !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-widget-head {
  display: flex !important;
  position: relative;
  min-height: 58px;
  height: 58px;
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--xg-border) !important;
  background: var(--xg-surface) !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-head-label {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 4;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-user-card {
  display: flex !important;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  color: var(--xg-text) !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-user-card .avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-user-card .avatar img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 999px;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-user-card .name {
  display: block;
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-head-btns {
  display: flex !important;
  position: relative;
  z-index: 5;
  min-width: max-content;
  height: 38px;
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-head-btn {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--xg-text) !important;
  transition: background-color 150ms ease, color 150ms ease;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-head-btn:hover,
body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-head-btn:focus-visible {
  background: var(--xg-blue-soft);
  color: var(--xg-blue) !important;
  outline: none;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-widget-content {
  max-height: min(582px, calc(100dvh - 82px));
  min-height: 0;
  flex-direction: column;
  background: var(--xg-bg) !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed.opened:not(.x-chat-minimized):not(.dg-chat-minimized) .chat-widget-content {
  display: flex !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-conversations,
body.theme-xgrid .chat-widget.chat-box.x-chat-managed .js_scroller {
  min-height: 0;
  overscroll-behavior: contain;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-form {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 12px 8px !important;
  border-top: 1px solid var(--xg-border) !important;
  background: var(--xg-surface) !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-form-message {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-form-message textarea {
  display: block;
  width: 100% !important;
  min-height: 42px;
  margin: 0;
  padding: 8px 13px !important;
  border: 1px solid var(--xg-border) !important;
  border-radius: 21px !important;
  background: var(--xg-surface-2) !important;
  color: var(--xg-text) !important;
  line-height: 24px;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-form-message textarea::placeholder {
  color: var(--xg-muted) !important;
  opacity: 1;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .chat-form-message textarea:focus {
  border-color: var(--xg-blue) !important;
  box-shadow: 0 0 0 2px var(--xg-blue-soft);
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .x-form-tools {
  display: flex !important;
  min-height: 32px;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  align-items: center;
  gap: 4px;
  list-style: none;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .x-form-tools > li {
  display: inline-flex !important;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 999px;
  color: var(--xg-blue) !important;
  cursor: pointer;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed .x-form-tools > li:hover {
  background: var(--xg-blue-soft);
  opacity: 1;
}

body.theme-xgrid.dg-chat-drawer-open .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized),
body.theme-xgrid .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized) {
  width: min(300px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  border-radius: 999px !important;
}

body.theme-xgrid.dg-chat-drawer-open .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized) .chat-widget-content,
body.theme-xgrid .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized) .chat-widget-content {
  display: none !important;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized) .chat-widget-head {
  height: 58px;
  min-height: 58px;
  border-bottom: 0 !important;
  border-radius: inherit !important;
  cursor: pointer;
}

body.theme-xgrid .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized) .js_x-chat-minimize i {
  transform: rotate(180deg);
}

@media (max-width: 767.98px) {
  body.theme-xgrid .chat-widget.chat-box.x-chat-managed.opened:not(.x-chat-minimized):not(.dg-chat-minimized) {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: min(76dvh, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 18px !important;
  }

  body.theme-xgrid .chat-widget.chat-box.x-chat-managed:is(.x-chat-minimized, .dg-chat-minimized) {
    left: 12px !important;
    right: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.theme-xgrid .chat-widget.chat-box.x-chat-managed.opened:not(.x-chat-minimized):not(.dg-chat-minimized) .chat-widget-content {
    height: calc(100% - 58px);
    max-height: none;
  }
}

@media (max-width: 767.98px) {
  body.theme-xgrid .profile-tabs-wrapper,
  body.theme-xgrid .x-search-page .x_top_posts {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  body.theme-xgrid .profile-tabs-wrapper::-webkit-scrollbar,
  body.theme-xgrid .x-search-page .x_top_posts::-webkit-scrollbar {
    display: none;
  }

  body.theme-xgrid .profile-tabs-wrapper > .d-flex,
  body.theme-xgrid .x-search-page .x_top_posts > .d-flex {
    min-width: max-content;
    justify-content: flex-start !important;
  }

  body.theme-xgrid .profile-tabs-wrapper > .d-flex > div,
  body.theme-xgrid .x-search-page .x_top_posts > .d-flex > div {
    flex: 0 0 auto;
    min-width: 92px;
  }
}

@media (max-width: 991.98px) {
  body.theme-grid:not(.index-body) {
    max-width: 100%;
    padding-top: 0 !important;
    overflow-x: clip !important;
  }

  body.theme-grid:not(.index-body) .main-wrapper {
    max-width: 100%;
    padding-top: 0 !important;
    overflow-x: clip;
  }

  body.theme-grid:not(.index-body) .main-header,
  body.theme-grid:not(.index-body) .logo-wrapper {
    top: 0 !important;
    margin-top: 0 !important;
  }

  body.theme-grid.page-index .grid-feed-layout,
  body.theme-grid.page-index .grid-feed-row,
  body.theme-grid.page-index .grid-feed-main {
    max-width: 100%;
  }

  body.theme-grid.page-index .grid-feed-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip;
  }

  body.theme-grid.page-index .dg-feed-reels-strip,
  body.theme-grid.page-index .dg-feed-reels-scroll {
    max-width: 100%;
  }

  body:not(.index-body) .card,
  body:not(.index-body) .widget,
  body:not(.index-body) .dg-panel,
  body:not(.index-body) .dg-card {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  body:not(.index-body) .post,
  body:not(.index-body) .publisher {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.index-body) *,
  body:not(.index-body) *::before,
  body:not(.index-body) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* dg-phone-nav-20261030
   Phone X feed: keep stories below the tab bar, and make the bottom
   nav a tappable icon row above Safari/Chrome chrome and the home indicator.
   Does not change Nearby photo grid or Map pin layout. */
@media (max-width: 520px) {
  body.theme-xgrid:not(.nearby-map-mode):not(.page-map) .search-wrapper-prnt {
    top: 0;
    box-sizing: border-box;
    background: #000;
  }

  body.theme-xgrid:not(.nearby-map-mode):not(.page-map) .main-wrapper {
    padding-top: 50px !important;
  }

  body.theme-xgrid .x_top_posts.home {
    position: sticky;
    top: 50px !important;
    z-index: 20;
    margin: 0 !important;
    background: #000;
    overflow: hidden;
  }

  body.theme-xgrid .x_announcement:has(.stories-wrapper),
  body.theme-xgrid .stories-wrapper,
  body.theme-xgrid #stories {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  body.theme-xgrid .stories-wrapper > #stories,
  body.theme-xgrid #stories.stories {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px;
    min-height: 112px;
    padding: 12px 12px 10px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap;
  }

  body.theme-xgrid .add-story,
  body.theme-xgrid .stories.carousel .story {
    width: 72px !important;
    max-width: 72px !important;
    min-width: 72px;
    flex: 0 0 72px;
    height: auto !important;
    margin: 0 !important;
  }

  body.theme-xgrid .add-story > a {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    position: relative;
  }

  body.theme-xgrid .add-story img,
  body.theme-xgrid .stories.carousel .story > .item-link > .item-preview,
  body.theme-xgrid .stories.carousel .story > .item-link > .item-preview img {
    display: block;
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
  }

  body.theme-xgrid .stories.carousel .story > .item-link > .item-preview {
    margin: 0 auto;
    overflow: hidden;
  }

  body.theme-xgrid .add-story p,
  body.theme-xgrid .stories.carousel .story > .item-link > .info,
  body.theme-xgrid .stories.carousel .story > .item-link > .info .name {
    display: block !important;
    width: 72px;
    max-width: 72px;
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  body.theme-xgrid .add-story > a > span {
    top: auto !important;
    bottom: -2px !important;
    inset-inline-start: auto !important;
    inset-inline-end: -2px !important;
    width: 22px;
    height: 22px;
    transform: none !important;
  }
}

@media (max-width: 991.98px) {
  body.theme-xgrid:not(.page-reels):not(.nearby-map-mode):not(.page-map) .main-wrapper {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--dg-vv-bottom, 0px)) !important;
  }

  body.theme-grid .footer-bottom-bar.grid-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--dg-vv-bottom, 0px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    box-sizing: border-box;
    padding: 2px 0 calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1030;
    pointer-events: auto !important;
  }

  body.theme-grid .footer-bottom-bar.grid-bottom-nav > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.theme-grid .footer-bottom-bar .footer-bottom-bar-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
  }

  body.theme-grid .footer-bottom-bar .footer-bottom-bar-links > .link {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    position: relative;
  }

  body.theme-grid .footer-bottom-bar .footer-bottom-bar-links > .link > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 6px 1px 4px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    touch-action: manipulation;
  }

  body.theme-grid .footer-bottom-bar .title {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  body.theme-grid .footer-bottom-bar .x_user_info,
  body.theme-grid .footer-bottom-bar .x_user_info.main_bg_half {
    display: flex;
    align-items: center;
    justify-content: center !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  body.theme-grid .footer-bottom-bar .x_user_info::before,
  body.theme-grid .footer-bottom-bar .x_user_info .mx-2,
  body.theme-grid .footer-bottom-bar .x_user_info > svg {
    display: none !important;
  }

  body.theme-grid .footer-bottom-bar .x_user_info img {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
  }

  body.theme-grid .footer-bottom-bar .dropdownUserMenuButton::after {
    content: attr(data-nav-label);
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    pointer-events: none;
  }

  body.theme-grid .footer-bottom-bar .dropdown-menu.show,
  body.theme-grid .footer-bottom-bar .x_mobi_user_menu.show {
    position: fixed !important;
    transform: none !important;
    inset: auto 10px calc(68px + env(safe-area-inset-bottom, 0px) + var(--dg-vv-bottom, 0px)) 10px !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68vh, 520px);
    overflow: auto !important;
    z-index: 1200 !important;
    border-radius: 16px !important;
    pointer-events: auto !important;
  }
}

html.dg-standalone .footer-bottom-bar.grid-bottom-nav {
  bottom: 0 !important;
}

html.dg-standalone body.theme-xgrid:not(.nearby-map-mode):not(.page-map) .search-wrapper-prnt {
  box-sizing: border-box;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  min-height: calc(50px + env(safe-area-inset-top, 0px));
}

html.dg-standalone body.theme-xgrid:not(.nearby-map-mode):not(.page-map) .main-wrapper {
  padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important;
}

html.dg-standalone body.theme-xgrid .x_top_posts.home {
  top: calc(50px + env(safe-area-inset-top, 0px)) !important;
}