/* Floating action cluster geometry */
:root {
  /* The three FABs share the same bottom-right viewport corner. */
  --fab-size: 60px;
  --fab-bottom: 30px;
  --fab-calendar-bottom: 30px;
  --fab-cluster-clearance: 0px;
}

body:has(.calendar-widget-btn, #go-back-btn, #bug-report-btn) {
  --fab-cluster-clearance: calc(
    max(var(--fab-bottom), var(--fab-calendar-bottom)) + var(--fab-size)
  );
}

/* Calendar Widget Button */
.calendar-widget-btn {
  position: fixed;
  bottom: var(--fab-calendar-bottom);
  right: 30px;
  z-index: calc(var(--z-dock) + 1);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* The FAB also carries the generic .btn class, so page stylesheets loaded
   after this one (e.g. messaging.css's .btn { border-radius:8px; padding }) can
   clobber its circular shape and squash the logo. Win with higher specificity. */
.btn.calendar-widget-btn {
  border-radius: 50%;
  padding: 0;
}

.calendar-widget-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.calendar-widget-btn:active {
  transform: scale(0.95);
}

.calendar-widget-btn-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 0;
  margin: 0;
}

@media (max-width: 991.98px) and (orientation: landscape) {
  :root {
    --fab-calendar-bottom: 16px;
  }

  .calendar-widget-btn {
    right: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --fab-calendar-bottom: 72px;
  }

  .calendar-widget-btn {
    right: 16px;
  }
}

/* Go Back floating button — to the left of the calendar FAB */
#go-back-btn {
  position: fixed;
  bottom: var(--fab-bottom);
  right: 102px;
  z-index: calc(var(--z-dock) + 1);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a1a2e);
  border: 1.5px solid var(--border-light, #e2e8f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.15s;
}

#go-back-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  background: var(--bg-hover, #f1f5f9);
}

#go-back-btn:active {
  transform: scale(0.95);
}

/* Desktop-rail only: below 992px the sidebar is an off-canvas drawer. */
@media (min-width: 992px) {
  body:has(#sidebar-root.app-sidebar-right) #go-back-btn {
    right: calc(var(--sidebar-width) + 30px + 60px + 12px);
  }
}

/* Report-a-bug floating button — to the left of the Go Back FAB */
#bug-report-btn {
  position: fixed;
  bottom: var(--fab-bottom);
  right: 174px;
  z-index: calc(var(--z-dock) + 1);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a1a2e);
  border: 1.5px solid var(--border-light, #e2e8f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.15s;
}

#bug-report-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  background: var(--bg-hover, #f1f5f9);
}

#bug-report-btn:active {
  transform: scale(0.95);
}

/* Desktop-rail only: see #go-back-btn above for why. */
@media (min-width: 992px) {
  body:has(#sidebar-root.app-sidebar-right) #bug-report-btn {
    right: calc(var(--sidebar-width) + 30px + 60px + 12px + 60px + 12px);
  }
}

@media (max-width: 576px) {
  :root {
    --fab-size: 44px;
    --fab-bottom: max(14px, env(safe-area-inset-bottom));
    --fab-calendar-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* HomeFeed has a long, scrollable activity column. Keep its compact fixed
     action cluster above the lower content band so degraded/empty cards do
     not sit underneath the controls at the first useful scroll position.
     The full calendar route and wider layouts retain their normal offsets. */
  body:has(#home-feed-root) {
    --fab-bottom: calc(
      max(14px, env(safe-area-inset-bottom)) + var(--fab-size) + var(--space-3xl) + var(--space-md)
    );
    --fab-calendar-bottom: calc(
      max(14px, env(safe-area-inset-bottom)) + var(--fab-size) + var(--space-3xl) + var(--space-md)
    );
  }

  .calendar-widget-btn {
    right: 12px;
    font-size: 1rem;
  }

  body:has(#sidebar-root.app-sidebar-right) .calendar-widget-btn,
  body:has(#sidebar-root.app-sidebar-left) .calendar-widget-btn {
    right: 12px;
  }

  body:has(#sidebar-root.app-sidebar-right) #go-back-btn,
  body:has(#sidebar-root.app-sidebar-left) #go-back-btn,
  #go-back-btn {
    right: 64px;
  }

  body:has(.settings-page) .calendar-widget-btn,
  body:has(.settings-page) #go-back-btn,
  body:has(.settings-page) #bug-report-btn {
    display: none;
  }

  body:has(#sidebar-root.app-sidebar-right) #bug-report-btn,
  body:has(#sidebar-root.app-sidebar-left) #bug-report-btn,
  #bug-report-btn {
    right: 116px;
  }

  /* The month header on the full calendar route can reach the mobile FAB
     band while the page is at scroll-top. Keep the report action available,
     but move it to the opposite corner so it cannot cover the month title or
     navigation controls. */
  body:has(#event-calendar-root) #bug-report-btn {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }

  /* Full calendar pages own a normal-flow action rail after their primary
     calendar surface. Keeping these actions in flow prevents fixed controls
     from covering month cells or timed day slots, while the global widget
     behavior remains unchanged on every other route. */
  .calendar-route-fab-rail {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    width: 100%;
    min-height: var(--fab-size);
    margin-top: var(--space-md);
    padding: var(--space-xs) var(--space-md);
  }

  .calendar-route-fab-rail > .calendar-widget-btn,
  .calendar-route-fab-rail > #go-back-btn,
  .calendar-route-fab-rail #bug-report-btn {
    position: static;
    inset: auto;
    flex: 0 0 var(--fab-size);
  }

  .calendar-route-fab-rail > #bug-report-root {
    display: contents;
  }

  .app-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* The rail is a transparent DOM boundary outside compact mode. Fixed button
   positioning therefore remains unchanged at tablet and desktop widths. */
@media (min-width: 577px) {
  .calendar-route-fab-rail,
  .calendar-route-fab-rail > #bug-report-root {
    display: contents;
  }
}