/* @rubyeverywhere/bridge — safe-area utilities for the native shells.
 *
 * Pair with <meta name="viewport" content="…, viewport-fit=cover"> so the
 * browser exposes the device's safe-area insets. These classes pad content
 * clear of the status bar / Dynamic Island / home indicator without
 * hardcoding device sizes. On the desktop shell and plain browsers the insets
 * are 0, so the classes are inert — safe to apply unconditionally.
 *
 * Include in Rails: <%= stylesheet_link_tag "everywhere/native" %>
 * (Sinatra/Hanami: it's vendored to public/ by `every install`.)
 */

:root {
  --everywhere-inset-top: env(safe-area-inset-top, 0px);
  --everywhere-inset-right: env(safe-area-inset-right, 0px);
  --everywhere-inset-bottom: env(safe-area-inset-bottom, 0px);
  --everywhere-inset-left: env(safe-area-inset-left, 0px);
}

/* Padding utilities — add safe-area room on top of any existing padding. */
.native-inset {
  padding-top: calc(var(--everywhere-inset-top) + var(--native-inset-pad, 0px));
  padding-bottom: calc(var(--everywhere-inset-bottom) + var(--native-inset-pad, 0px));
}
.native-inset-top    { padding-top: calc(var(--everywhere-inset-top) + var(--native-inset-pad, 0px)); }
.native-inset-bottom { padding-bottom: calc(var(--everywhere-inset-bottom) + var(--native-inset-pad, 0px)); }
.native-inset-left   { padding-left: calc(var(--everywhere-inset-left) + var(--native-inset-pad, 0px)); }
.native-inset-right  { padding-right: calc(var(--everywhere-inset-right) + var(--native-inset-pad, 0px)); }

/* Margin variants, when padding would fight an existing background. */
.native-inset-mt { margin-top: var(--everywhere-inset-top); }
.native-inset-mb { margin-bottom: var(--everywhere-inset-bottom); }

/* A bar pinned to the bottom edge that stays above the home indicator. */
.native-safe-bottom {
  padding-bottom: max(var(--everywhere-inset-bottom), var(--native-safe-min, 0.5rem));
}

/* Fixed/absolute elements anchored near the bottom (toasts, nudges, FABs):
 * lifts them clear of the home indicator AND anything overlaying the webview
 * from below — on iOS the floating tab bar contributes to the bottom inset.
 * --native-bottom-gap is the visual gap above that (default 1rem). */
.native-bottom {
  bottom: calc(var(--everywhere-inset-bottom) + var(--native-bottom-gap, 1rem));
}

/* Full-height element that respects both vertical insets. */
.native-safe-height {
  min-height: calc(100dvh - var(--everywhere-inset-top) - var(--everywhere-inset-bottom));
}

/* ---------------------------------------------------------------------------
 * Native chrome — styling for the everywhere_fab / everywhere_menu helpers and
 * the bridge's DOM action-sheet fallback. Set --everywhere-tint in your own CSS
 * to brand the accent (it defaults to the platform accent color).
 * ------------------------------------------------------------------------- */

:root {
  --everywhere-tint: AccentColor;
}

/* Floating action button (everywhere_fab): fixed, safe-area-aware, above the
 * home indicator and iOS floating tab bar. A real link/button, so it shows in
 * a browser too. */
.everywhere-fab {
  position: fixed;
  right: max(var(--everywhere-inset-right), 1rem);
  bottom: calc(var(--everywhere-inset-bottom) + var(--native-bottom-gap, 1rem));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--everywhere-fab-bg, var(--everywhere-tint, #1a73e8));
  color: var(--everywhere-fab-color, #fff);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.everywhere-fab:active {
  transform: scale(0.94);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.everywhere-fab-left {
  right: auto;
  left: max(var(--everywhere-inset-left), 1rem);
}
/* Extended FAB: pill with a visible label beside the icon. */
.everywhere-fab-extended {
  width: auto;
  height: 3.25rem;
  padding: 0 1.25rem;
  font: inherit;
  font-weight: 600;
}
.everywhere-fab-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.everywhere-fab-label {
  white-space: nowrap;
}

/* In-content action sheet (everywhere_menu) inline fallback: the items stay
 * hidden until the trigger opens them. In the native shell the bridge shows a
 * real action sheet instead and these never appear. */
[data-everywhere-menu-items] {
  display: none;
}
[data-everywhere-menu-open] > [data-everywhere-menu-items],
[data-everywhere-menu-open] [data-everywhere-menu-items] {
  display: block;
}

/* Nav-bar sources (everywhere_nav_button / everywhere_nav_menu) live in the
 * top bar inside the shell, so hide the in-page copy there — but keep it in a
 * browser, where there is no native bar. Keyed on the bridge's platform marker
 * (set only by the mobile web bridge). */
html[data-bridge-platform] [data-everywhere-nav-button],
html[data-bridge-platform] [data-everywhere-nav-menu] {
  display: none !important;
}

/* DOM action-sheet fallback rendered by the bridge (Everywhere.menu / the
 * everywhere_menu trigger) when there is no native shell. */
.everywhere-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  padding-bottom: calc(var(--everywhere-inset-bottom) + 0.75rem);
  background: rgba(0, 0, 0, 0.4);
  animation: everywhere-sheet-fade 0.15s ease;
}
.everywhere-sheet {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 0.9rem;
  overflow: hidden;
  background: rgba(120, 120, 128, 0.2);
  animation: everywhere-sheet-rise 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.everywhere-sheet-header {
  padding: 0.85rem 1rem;
  text-align: center;
  background: Canvas;
  color: color-mix(in srgb, CanvasText 60%, transparent);
}
.everywhere-sheet-title {
  font-weight: 600;
  color: CanvasText;
}
.everywhere-sheet-message {
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.everywhere-sheet-item {
  appearance: none;
  border: 0;
  width: 100%;
  padding: 1rem;
  font: inherit;
  font-size: 1.05rem;
  text-align: center;
  background: Canvas;
  color: var(--everywhere-tint, #1a73e8);
  cursor: pointer;
}
.everywhere-sheet-item:active {
  background: color-mix(in srgb, CanvasText 8%, Canvas);
}
.everywhere-sheet-item:disabled {
  color: color-mix(in srgb, CanvasText 30%, transparent);
  cursor: default;
}
.everywhere-sheet-item-destructive {
  color: #e5484d;
}
.everywhere-sheet-cancel {
  margin-top: 0.5rem;
  border-radius: 0.9rem;
  font-weight: 600;
  color: CanvasText;
}
@keyframes everywhere-sheet-fade {
  from { opacity: 0; }
}
@keyframes everywhere-sheet-rise {
  from { transform: translateY(1rem); opacity: 0; }
}

/* ---------------------------------------------------------------------------
 * Desktop window chrome — for `window.title_bar: overlay | frameless` in
 * everywhere.yml. The bridge stamps data-everywhere-titlebar on <html>, so
 * every rule here is scoped to the mode that needs it: on mobile, in a plain
 * browser tab, and in a normal decorated window the attribute is absent and
 * these classes do nothing. Safe to apply unconditionally.
 * ------------------------------------------------------------------------- */

:root {
  /* macOS traffic lights: a ~78px cluster inside a 28px band at the top left.
   * Override both if you draw a taller bar. */
  --everywhere-titlebar-height: 28px;
  --everywhere-titlebar-controls: 78px;
}

/* Overlay mode: the system still draws (and positions) the traffic lights over
 * your page. Reserve the band so your content doesn't slide underneath them.
 * Frameless draws no controls at all, so it reserves nothing — the page owns
 * that space and decides what goes there. */
[data-everywhere-titlebar="overlay"] .everywhere-titlebar-inset {
  padding-top: var(--everywhere-titlebar-height);
}
[data-everywhere-titlebar="overlay"] .everywhere-titlebar-controls-inset {
  padding-left: var(--everywhere-titlebar-controls);
}

/* A title-bar strip across the top of the window. Purely layout — the shell
 * already makes the top 28px drag the window, so this needs no attribute:
 *
 *   <header class="everywhere-titlebar">My App</header>
 *
 * Buttons and links inside it keep their clicks. Mark a region outside the
 * strip with data-tauri-drag-region to make that draggable too, or set
 * window.drag_height: 0 in everywhere.yml to take dragging over entirely.
 *
 * In overlay mode it clears the traffic lights; in frameless it starts at the
 * left edge, because there's nothing there to clear. */
[data-everywhere-titlebar] .everywhere-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--everywhere-titlebar-height);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
[data-everywhere-titlebar="overlay"] .everywhere-titlebar {
  padding-left: var(--everywhere-titlebar-controls);
}

/* Anything clickable inside the drag strip has to opt out, or the drag region
 * swallows the click before the control ever sees it. */
[data-everywhere-titlebar] .everywhere-titlebar button,
[data-everywhere-titlebar] .everywhere-titlebar a,
[data-everywhere-titlebar] .everywhere-titlebar input,
[data-everywhere-titlebar] .everywhere-titlebar select,
[data-everywhere-titlebar] .everywhere-titlebar [data-tauri-drag-region="false"] {
  -webkit-app-region: no-drag;
  cursor: default;
}