/* The floating ALY button and its side panel. Colours, borders and shadows come
   from the OS shell's semantic tokens, so LUX (Ceramic Mist) and NEO (Infinite
   Void) are followed for free; nothing here owns a theme. Above every window
   (the window layer is z-index 1) but under notifications and dialogs. */
.aly-shell { --aly-z: 2147481900; }

.aly-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--os-inset-bottom, 0px) + max(16px, env(safe-area-inset-bottom, 0px)));
  z-index: var(--aly-z);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px 0 12px;
  border: 1px solid color-mix(in srgb, var(--desktop-border) 72%, var(--desktop-focus));
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent), var(--desktop-surface);
  box-shadow: var(--desktop-shadow);
  color: var(--desktop-text);
  font: inherit; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; touch-action: manipulation;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  -webkit-tap-highlight-color: transparent;
}
.aly-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aly-fab:hover, .aly-fab:focus-visible { background: linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent), var(--desktop-surface-strong); }
.aly-fab:focus-visible { outline: 2px solid var(--desktop-focus); outline-offset: 3px; }

.aly-panel {
  position: fixed; top: 0; right: 0;
  bottom: var(--os-inset-bottom, 0px);
  z-index: var(--aly-z);
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--desktop-border);
  background: var(--desktop-surface);
  box-shadow: var(--desktop-shadow);
  color: var(--desktop-text);
  transform: translateX(105%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.aly-panel.is-open { transform: none; visibility: visible; transition: transform 0.22s ease; }
@media (prefers-reduced-motion: reduce) { .aly-panel, .aly-panel.is-open { transition: none; } }

/* The panel's only chrome. It floats into the right end of ALY's own top bar
   (which reserves room for it in panel mode), so there is a single header row. */
.aly-panel-close {
  position: absolute; z-index: 2;
  top: calc(max(0px, env(safe-area-inset-top, 0px)) + 8px); right: 8px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
}
.aly-panel-close:hover, .aly-panel-close:focus-visible { background: var(--desktop-surface-strong); }
.aly-panel-close:focus-visible { outline: 2px solid var(--desktop-focus); outline-offset: 2px; }
.aly-panel-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.aly-frame-host { flex: 1 1 auto; min-height: 0; padding-top: env(safe-area-inset-top, 0px); }
.aly-frame { width: 100%; height: 100%; border: 0; background: transparent; display: block; }

@media (max-width: 640px) {
  .aly-panel { width: 100vw; border-left: 0; }
  /* The panel is full screen here and carries its own close button. */
  .aly-fab.is-hidden-mobile { display: none; }
}