/* ZenithUI — ZenStatusBar
 * 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. --zen-statusbar-bg/--zen-statusbar-fg
 * are consumer hooks to opt out of the shell surface.
 */
@layer zenith-components {
  .zen-statusbar {
    display: flex;
    align-items: center;
    gap: var(--zen-space-3, 12px);
    height: var(--zen-statusbar-height, 30px);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 var(--zen-space-3, 12px);
    background: var(--zen-statusbar-bg, var(--zen-shell-bg, var(--zen-bg-surface)));
    border-top: 1px solid var(--zen-shell-border, var(--zen-border));
    color: var(--zen-statusbar-fg, var(--zen-shell-text-secondary, var(--zen-text-secondary)));
    font-family: var(--zen-font-family, system-ui, sans-serif);
    font-size: var(--zen-font-size-xs, 0.6875rem);
    position: sticky;
    bottom: 0;
    z-index: 20;
    white-space: nowrap;
  }

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

  .zen-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. */
  .zen-statusbar:not(:has(.zen-statusbar__center)) .zen-statusbar__start {
    flex: 1 1 auto;
  }

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

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