/* Pulse Layout V1: makes Comm-Unity match the Pulse app.
   Additive only. Remove the two lines from index.html to undo it. */

html.dark {
  --pulse-shell-bg: #02040a;
  --pulse-shell-bg-2: #080f1c;
  --pulse-panel: rgba(8, 15, 28, .92);
  --pulse-panel-solid: #080f1c;
  --pulse-panel-2: rgba(17, 31, 50, .92);
  --pulse-text: #f8fbff;
  --pulse-muted: #8fa0b8;
  --pulse-line: rgba(45, 124, 255, .22);
  --pulse-line-strong: rgba(123, 92, 255, .42);
  --pulse-pink: #ff2f8f;
  --pulse-pink-2: #d13cff;
  --pulse-purple: #7b5cff;
  --pulse-blue: #2d7cff;
  --pulse-cyan: #2ee6ff;
  --background: #02040a !important;
  --foreground: #f8fbff !important;
  --surface: #080f1c !important;
  --surface-2: #111f32 !important;
  --card: #080f1c !important;
  --card-foreground: #f8fbff !important;
  --popover: #080f1c !important;
  --popover-foreground: #f8fbff !important;
  --primary: #ff2f8f !important;
  --secondary: #111f32 !important;
  --secondary-foreground: #f8fbff !important;
  --muted: #111f32 !important;
  --muted-foreground: #8fa0b8 !important;
  --accent: #111f32 !important;
  --accent-foreground: #f8fbff !important;
  --border: rgba(45, 124, 255, .22) !important;
  --input: rgba(45, 124, 255, .28) !important;
  --ring: #ff2f8f !important;
  --brand: #ff2f8f !important;
  --brand-2: #2d7cff !important;
}

html.dark body { background: #02040a !important; }

/* Help button and popup removed */
.pulse-help-launcher,
.pulse-help-popup { display: none !important; }

@media (max-width: 900px) {
  /* Pulse-style header: small logo on the left, buttons on the right */
  html.dark .pulse-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: calc(62px + env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    padding: calc(4px + env(safe-area-inset-top)) 12px 4px 16px !important;
    background: linear-gradient(90deg, #050512, #0b0a1d, #07182a, #03050a) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(123, 92, 255, .30) !important;
    border-radius: 0 !important;
    box-shadow: -12px 3px 18px rgba(255, 47, 143, .11), 12px 3px 18px rgba(45, 124, 255, .11) !important;
    backdrop-filter: none !important;
  }
  html.dark .pulse-topbar > .min-w-0 { order: 0; flex: 1 1 auto; min-width: 0; }
  html.dark .pulse-topbar > .min-w-0 img {
    width: 104px !important;
    height: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  html.dark .pulse-topbar > div:last-child {
    order: 1;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  html.dark .pulse-topbar > .pulse-mobile-menu-toggle { order: 2; flex: 0 0 auto; margin-left: 4px; }
  html.dark .pulse-topbar .pulse-mobile-menu-toggle,
  html.dark .pulse-topbar .pulse-topbar-action,
  html.dark .pulse-topbar .pulse-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #101728, #07101b) !important;
    border: 1px solid rgba(45, 124, 255, .28) !important;
    box-shadow: none !important;
  }

  /* Room for the bottom bar */
  body.pulse-u-has-nav .pulse-app-frame > main {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  body.pulse-u-has-nav .pulse-help-launcher,
  body.pulse-u-has-nav [class*="launcher"] {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  /* Pulse-style bottom bar */
  .pulse-u-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    height: calc(66px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(90deg, #04050b, #0a0d18, #071321, #04050b);
    border-top: 1px solid rgba(123, 92, 255, .30);
    box-shadow: -8px -3px 18px rgba(255, 47, 143, .08), 8px -3px 18px rgba(45, 124, 255, .10);
  }
  /* An older script tags bottom bars with a hiding class, so undo it here. */
  .pulse-u-nav.pulse-mobile-bottom-nav-v20-hidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: calc(66px + env(safe-area-inset-bottom)) !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .pulse-u-nav[hidden],
  .pulse-u-nav.pulse-mobile-bottom-nav-v20-hidden[hidden] { display: none !important; }

  /* No scrollbars or up and down arrows: pages scroll by swiping, as in Pulse. */
  html, body, #root, #root * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  #root::-webkit-scrollbar,
  #root *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .pulse-u-item {
    flex: 1 1 0;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    background: none;
    border: 0;
    color: #8fa0b8;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pulse-u-item svg { width: 24px; height: 24px; }
  .pulse-u-item.is-active { color: #2ee6ff; }
  .pulse-u-core-wrap { flex: 1 1 0; display: flex; justify-content: center; }
  .pulse-u-core {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ff2f8f, #7b5cff 55%, #2d7cff);
    box-shadow: 0 0 18px rgba(255, 47, 143, .52), 0 0 23px rgba(45, 124, 255, .42), 0 0 30px rgba(46, 230, 255, .20);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pulse-u-core svg { width: 26px; height: 26px; }
}

@media (min-width: 901px) {
  .pulse-u-nav { display: none !important; }
}