/* SolsticioUI — SolStatusBar
 * App shell status bar: the thin bottom strip of the shell frame. Three flex
 * zones: start | center | end. Sticky at the bottom of its column.
 *
 * Identity anatomy: shell chrome — the warm drawer surface, identical in both
 * themes, closed by a hairline top border. Deliberately NO accent edge: the
 * signature accent line belongs to the top strip only; a single accent line is
 * what keeps the gesture recognizable. --sol-statusbar-bg/--sol-statusbar-fg
 * are consumer hooks to opt out of the shell surface.
 */
@layer solsticio-components {
  .sol-statusbar {
    display: flex;
    align-items: center;
    gap: var(--sol-space-3, 12px);
    /* The device's bottom edge (the gesture bar) is part of the strip, never under its content. */
    height: calc(var(--sol-statusbar-height, 30px) + var(--sol-safe-area-bottom));
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 calc(var(--sol-space-3, 12px) + var(--sol-safe-area-right)) var(--sol-safe-area-bottom)
      calc(var(--sol-space-3, 12px) + var(--sol-safe-area-left));
    background: var(--sol-statusbar-bg, var(--sol-shell-bg, var(--sol-bg-surface)));
    border-top: 1px solid var(--sol-shell-border, var(--sol-border));
    color: var(--sol-statusbar-fg, var(--sol-shell-text-secondary, var(--sol-text-secondary)));
    font-family: var(--sol-font-family, system-ui, sans-serif);
    font-size: var(--sol-font-size-xs, 0.6875rem);
    position: sticky;
    bottom: 0;
    z-index: 20;
    white-space: nowrap;
  }

  .sol-statusbar__start {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 8px);
    min-width: 0;            /* allow truncation instead of pushing the end zone off */
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sol-statusbar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* When there is no center zone, the start zone takes the slack so the end zone sits flush right. */
  .sol-statusbar:not(:has(.sol-statusbar__center)) .sol-statusbar__start {
    flex: 1 1 auto;
  }

  .sol-statusbar__end {
    display: flex;
    align-items: center;
    gap: var(--sol-space-3, 12px);
    flex: 0 0 auto;
    margin-inline-start: auto;       /* fallback for browsers without :has() */
  }

  /* Phone: the leading zone keeps room for its text; the trailing zone wraps to a second row
     instead of squeezing it. */
  @media (max-width: 480px) {
    .sol-statusbar {
      flex-wrap: wrap;
      row-gap: var(--sol-space-1, 4px);
      height: auto;
      min-height: calc(var(--sol-statusbar-height, 30px) + var(--sol-safe-area-bottom));
    }

    .sol-statusbar__start,
    .sol-statusbar:not(:has(.sol-statusbar__center)) .sol-statusbar__start {
      flex: 1 1 0;
      min-width: min(100%, 10em);
    }
  }

  /* Composed SolIcons glyphs size to the ambient text. */
  .sol-statusbar svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
}