:root {
  --dydoss-safe-top: env(safe-area-inset-top, 0px);
  --dydoss-safe-right: env(safe-area-inset-right, 0px);
  --dydoss-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dydoss-safe-left: env(safe-area-inset-left, 0px);
  --dydoss-viewport-width: 100vw;
  --dydoss-viewport-height: 100dvh;
  --dydoss-viewport-offset-top: 0px;
  --dydoss-viewport-offset-left: 0px;
  --dydoss-keyboard-height: 0px;
  --dydoss-header-core-height: 52px;
  --dydoss-header-height: calc(var(--dydoss-header-core-height) + var(--dydoss-safe-top));
  --dydoss-app-height: var(--dydoss-viewport-height);
  --dydoss-social-shell-gutter: 12px;
  --dydoss-social-shell-gutter-tight: 8px;
  --dydoss-social-mobile-nav-height: calc(60px + var(--dydoss-safe-bottom));
  --dydoss-social-card-radius: 16px;
  --dydoss-social-card-radius-tight: 12px;
  --dydoss-social-card-shadow: 0 10px 28px rgba(29, 72, 133, 0.22), 0 2px 8px rgba(209, 236, 254, 0.72);
  --dydoss-social-card-shadow-tight: 0 8px 20px rgba(25, 54, 101, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.88);
  --dydoss-social-surface-border: 2px solid #59a6f6;
}

.social-pwa-launcher[hidden],
.social-pwa-panel[hidden],
#chat-pwa-settings-btn[hidden],
.social-pwa-inline-settings[hidden] {
  display: none !important;
}

.social-pwa-launcher {
  position: fixed;
  right: max(12px, calc(12px + var(--dydoss-safe-right)));
  bottom: max(14px, calc(14px + var(--dydoss-safe-bottom)));
  z-index: 2200;
  border: 1px solid #6b90bf;
  border-radius: 999px;
  padding: 9px 14px;
  font: 700 12px/1 Tahoma, Verdana, sans-serif;
  color: #11457c;
  background: linear-gradient(180deg, #ffffff 0%, #e5f0ff 58%, #cfdff8 100%);
  box-shadow: 0 10px 22px rgba(20, 54, 99, 0.22);
  min-height: 44px;
}

.social-pwa-launcher.is-ready {
  color: #21571a;
  border-color: #7db37a;
  background: linear-gradient(180deg, #fefefe 0%, #edf9ea 60%, #d7ecd5 100%);
}

.social-pwa-panel {
  position: fixed;
  right: max(12px, calc(12px + var(--dydoss-safe-right)));
  bottom: max(62px, calc(62px + var(--dydoss-safe-bottom)));
  z-index: 2201;
  width: min(92vw, 360px);
  border: 1px solid #6d95c8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(20, 54, 99, 0.24);
  background: #f5f9ff;
  color: #173c67;
}

.social-pwa-panel-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(90deg, #1f5ead 0%, #2c79dd 55%, #3d92f5 100%);
}

.social-pwa-panel-title {
  font: 700 13px/1.2 Tahoma, Verdana, sans-serif;
}

.social-pwa-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(18,72,145,0.2));
  font: 700 18px/1 Tahoma, Verdana, sans-serif;
}

.social-pwa-panel-body {
  padding: 12px;
}

.social-pwa-status-grid {
  display: grid;
  gap: 7px;
}

.social-pwa-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid #c9d8ed;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.social-pwa-status-label {
  font-size: 12px;
  color: #4e6d93;
}

.social-pwa-status-value {
  font: 700 12px/1.2 Tahoma, Verdana, sans-serif;
  color: #174781;
}

.social-pwa-hint,
.social-pwa-ios-tip,
.social-pwa-error {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.social-pwa-error {
  padding: 8px 10px;
  border: 1px solid #d8a0a0;
  border-radius: 8px;
  background: #fff0f0;
  color: #932d2d;
}

.social-pwa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.social-pwa-actions .xp-btn,
.social-pwa-settings-actions .xp-btn,
.social-pwa-inline-actions .xp-btn {
  min-height: 44px;
}

.social-pwa-inline-settings {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #b9d0ee;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdfefe 0%, #ecf5ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.social-pwa-settings-host {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-pwa-settings-grid {
  display: grid;
  gap: 7px;
}

.social-pwa-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid #c9d8ed;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.social-pwa-settings-label {
  font-size: 12px;
  color: #4e6d93;
}

.social-pwa-settings-value {
  font: 700 12px/1.2 Tahoma, Verdana, sans-serif;
  color: #174781;
}

.social-pwa-settings-summary {
  margin: 0;
  color: #446385;
  font-size: 12px;
  line-height: 1.45;
}

.social-pwa-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-pwa-inline-title {
  font: 700 12px/1.2 Tahoma, Verdana, sans-serif;
  color: #1b4b89;
}

.social-pwa-inline-summary {
  margin-top: 6px;
  color: #446385;
  font-size: 12px;
  line-height: 1.4;
}

.social-pwa-inline-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.social-pwa-inline-status {
  font: 700 11px/1.2 Tahoma, Verdana, sans-serif;
  color: #235387;
}

#chat-pwa-settings-btn {
  white-space: nowrap;
}

body.dydoss-standalone {
  min-height: var(--dydoss-app-height) !important;
  padding-bottom: max(0px, var(--dydoss-safe-bottom));
}

body.dydoss-standalone:not([data-surface="chat"]) {
  padding-top: var(--dydoss-header-height) !important;
}

body.dydoss-standalone[data-surface="chat"] {
  padding-top: 0 !important;
}

body.dydoss-standalone .xp-header.xp-header-compact {
  box-sizing: border-box;
  min-height: var(--dydoss-header-height);
  height: var(--dydoss-header-height) !important;
  padding-top: var(--dydoss-safe-top) !important;
  padding-left: max(10px, calc(16px + var(--dydoss-safe-left))) !important;
  padding-right: max(10px, calc(16px + var(--dydoss-safe-right))) !important;
}

body.dydoss-standalone[data-surface="chat"] .chat-layout {
  margin-top: calc(var(--dydoss-header-height) + 12px) !important;
  height: calc(var(--dydoss-app-height) - var(--dydoss-header-height) - 12px - var(--dydoss-safe-bottom)) !important;
}

body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .friends-main-card {
  margin-bottom: calc(32px + var(--dydoss-safe-bottom));
}

body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .friends-posts-swap-row {
  top: calc(var(--dydoss-header-height) + 10px) !important;
}

body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .friends-posts-xp-window,
body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .online-users-xp-window {
  top: calc(var(--dydoss-header-height) + 48px) !important;
  height: calc(var(--dydoss-app-height) - var(--dydoss-header-height) - 68px - var(--dydoss-safe-bottom)) !important;
}

@media (max-width: 700px) {
  :root {
    --dydoss-social-shell-gutter: 8px;
    --dydoss-social-shell-gutter-tight: 6px;
    --dydoss-social-card-radius: 14px;
    --dydoss-social-card-radius-tight: 12px;
  }

  body.dydoss-standalone {
    padding-top: max(6px, var(--dydoss-safe-top)) !important;
    padding-bottom: calc(var(--dydoss-social-mobile-nav-height) + 8px) !important;
  }

  body.dydoss-standalone[data-social-page] {
    padding-top: var(--dydoss-social-mobile-top-gap, max(6px, var(--dydoss-safe-top))) !important;
    padding-bottom: var(--dydoss-social-mobile-bottom-gap, calc(var(--dydoss-social-mobile-nav-height) + 8px)) !important;
  }

  body.dydoss-standalone:not([data-surface="chat"]) {
    --dydoss-header-core-height: 44px;
  }

  body.dydoss-standalone .xp-header.xp-header-compact {
    min-height: var(--dydoss-social-mobile-nav-height);
    height: var(--dydoss-social-mobile-nav-height) !important;
    padding-top: 4px !important;
    padding-bottom: calc(4px + var(--dydoss-safe-bottom)) !important;
    padding-left: max(6px, calc(6px + var(--dydoss-safe-left))) !important;
    padding-right: max(6px, calc(6px + var(--dydoss-safe-right))) !important;
  }

  body.dydoss-standalone[data-social-page] .xp-header.xp-header-compact {
    display: none !important;
  }

  body.dydoss-standalone[data-surface="chat"] {
    padding-top: max(6px, var(--dydoss-safe-top)) !important;
  }

  body.dydoss-standalone[data-surface="chat"] .chat-layout {
    margin-top: max(6px, var(--dydoss-safe-top)) !important;
    height: calc(var(--dydoss-app-height) - var(--dydoss-social-mobile-nav-height) - max(6px, var(--dydoss-safe-top)) - 10px) !important;
    padding-bottom: calc(8px + var(--dydoss-safe-bottom)) !important;
  }

  body.dydoss-standalone[data-social-page="chat"] .chat-layout {
    margin-top: 0 !important;
    height: var(--dydoss-social-mobile-content-height, calc(var(--dydoss-app-height) - var(--dydoss-social-mobile-nav-height) - max(6px, var(--dydoss-safe-top)) - 8px)) !important;
    padding-bottom: 0 !important;
  }

  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .friends-main-card {
    margin-bottom: 0 !important;
  }

  body.dydoss-standalone:is([data-social-page="profile"], [data-social-page="user"], [data-social-page="friends"], [data-social-page="users"], [data-social-page="social"]) .friends-posts-swap-row {
    top: 0 !important;
  }

  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .friends-posts-xp-window,
  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .online-users-xp-window,
  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .apps-xp-window {
    top: max(6px, var(--dydoss-safe-top)) !important;
    height: calc(var(--dydoss-app-height) - var(--dydoss-social-mobile-nav-height) - max(12px, calc(var(--dydoss-safe-top) + 6px))) !important;
  }

  body.dydoss-standalone:is([data-social-page="profile"], [data-social-page="user"], [data-social-page="friends"], [data-social-page="users"], [data-social-page="social"]) .friends-posts-xp-window,
  body.dydoss-standalone:is([data-social-page="profile"], [data-social-page="user"], [data-social-page="friends"], [data-social-page="users"], [data-social-page="social"]) .online-users-xp-window,
  body.dydoss-standalone:is([data-social-page="profile"], [data-social-page="user"], [data-social-page="friends"], [data-social-page="users"], [data-social-page="social"]) .apps-xp-window {
    top: var(--dydoss-social-mobile-top-gap, max(6px, var(--dydoss-safe-top))) !important;
    height: calc(var(--dydoss-social-mobile-content-height, calc(var(--dydoss-app-height) - var(--dydoss-social-mobile-nav-height) - max(12px, calc(var(--dydoss-safe-top) + 6px)))) - 4px) !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  body.dydoss-standalone[data-surface="chat"] .chat-layout {
    margin-top: calc(var(--dydoss-header-height) + 8px) !important;
    height: calc(var(--dydoss-app-height) - var(--dydoss-header-height) - 8px - var(--dydoss-safe-bottom)) !important;
    padding-bottom: calc(8px + var(--dydoss-safe-bottom));
  }

  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .friends-posts-xp-window,
  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .online-users-xp-window,
  body.dydoss-standalone:is([data-surface="profile"], [data-surface="user"], [data-surface="friends"], [data-surface="users"], [data-surface="social"]) .apps-xp-window {
    top: var(--dydoss-header-height) !important;
    height: calc(var(--dydoss-app-height) - var(--dydoss-header-height) - var(--dydoss-safe-bottom)) !important;
  }
}

body.dydoss-keyboard-open[data-surface="chat"] .chat-layout {
  padding-bottom: max(4px, var(--dydoss-safe-bottom));
}

@media (max-width: 720px) {
  .social-pwa-launcher {
    display: none !important;
  }

  .social-pwa-panel {
    left: 8px;
    right: 8px;
    top: calc(var(--dydoss-header-height, 44px) + 8px);
    bottom: auto;
    width: auto;
    max-height: calc(var(--dydoss-viewport-height, 100dvh) - var(--dydoss-header-height, 44px) - 16px);
    overflow: hidden;
    border-radius: 14px;
    z-index: 2400;
  }

  .social-pwa-panel-body {
    max-height: calc(var(--dydoss-viewport-height, 100dvh) - var(--dydoss-header-height, 44px) - 70px);
    overflow-y: auto;
  }

  body[data-social-page] .social-pwa-panel {
    top: var(--dydoss-social-mobile-top-gap, max(8px, calc(env(safe-area-inset-top, 0px) + 6px)));
    max-height: calc(var(--dydoss-viewport-height, 100dvh) - var(--dydoss-social-mobile-top-gap, max(8px, calc(env(safe-area-inset-top, 0px) + 6px))) - 16px);
  }

  body[data-social-page] .social-pwa-panel-body {
    max-height: calc(var(--dydoss-viewport-height, 100dvh) - var(--dydoss-social-mobile-top-gap, max(8px, calc(env(safe-area-inset-top, 0px) + 6px))) - 70px);
  }

  .social-pwa-actions,
  .social-pwa-settings-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .social-pwa-actions .xp-btn,
  .social-pwa-settings-actions .xp-btn {
    width: 100%;
  }

  #chat-pwa-settings-btn {
    min-height: 40px;
    padding-inline: 10px;
  }

  .social-pwa-inline-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}