/* Timeline + chrome reachability pass.
 *
 * Kept separate from timeline.css and app.css because those source files are at
 * their line budgets. Load this sheet immediately after timeline.css so these
 * narrowly-scoped geometry corrections win without duplicating base rules. */

/* Keep each semantic toolbar group intact. The bar may wrap between groups,
 * but controls such as Project name / New / Open / Save must travel together. */
.tl-bar {
  align-content: flex-start;
  row-gap: 8px;
}

.tl-bar .tl-group,
.tl-bar .tl-bar-right {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.tl-bar .tl-bar-right {
  min-height: 32px;
}

/* Separators cannot understand flex line breaks, so they otherwise become
 * orphaned strokes. Put the divider on the group it belongs to instead. */
.tl-bar > .tl-bar-sep {
  display: none;
}

.tl-bar > .tl-bar-sep + .tl-group {
  border-inline-start: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  padding-inline-start: 8px;
}

/* The graphite accent is intentionally quiet elsewhere. Render is a commit
 * action, so it needs a filled, visibly-enabled treatment and a larger target. */
.tl-bar #tl-render {
  min-height: 36px;
  padding-inline: 20px;
  background: var(--accent, #606068);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 4px 14px rgba(var(--accent-rgb, 96, 96, 104), 0.28);
  color: #fff;
  font-weight: 700;
}

.tl-bar #tl-render:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #606068) 92%, white);
  filter: none;
  transform: translateY(-1px);
}

.tl-bar #tl-render:disabled {
  cursor: wait;
  opacity: 0.72;
}

/* Give the editor a wider inspector and a viewport-aware height. Its panel is
 * the scrolling element, so every field and action remains reachable without
 * making the entire page several viewports tall. */
.tl-wrap.tl-v2 {
  grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 360px);
}

.tl-side {
  height: clamp(420px, 70dvh, 760px);
  min-height: min(420px, calc(100dvh - 120px));
  max-height: calc(100dvh - 120px);
}

.tl-side-panel {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Size actions to the panel, including the narrow desktop inspector. */
.tl-ai-actions,
.tl-insp-gen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  align-items: stretch;
  gap: 6px;
}

.tl-ai-actions .tl-btn,
.tl-insp-gen .tl-btn {
  min-width: 0;
  padding-inline: 6px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.35;
}

/* Reserve a real controls row above the canvas. Previously the edit and zoom
 * buttons were absolutely painted on top of the 26px ruler. Both axes scroll
 * on the stage itself; the canvas retains its natural width/track height. */
.tl-stage {
  box-sizing: border-box;
  max-width: 100%;
  max-height: min(640px, calc(100dvh - 156px));
  min-height: 220px;
  padding-top: 48px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--surface-1, #0e0e12);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
}

.tl-stage .tl-canvas {
  max-width: none;
  border: 0;
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 0;
}

.tl-stage-tools {
  top: 6px;
  right: 8px;
  height: 36px;
  padding-inline-start: 8px;
  background: var(--surface-1, #0e0e12);
}

.tl-gutter-actions {
  top: 8px;
}

/* The key reminder belongs to document chrome, not over the document. Keeping
 * it in normal flow inside #workspace-meta makes the content area start below
 * it on every mode and removes the old bottom-right occlusion. */
#api-banner {
  position: static;
  inset: auto;
  box-sizing: border-box;
  width: min(720px, 100%);
  max-width: none;
  margin: 12px auto 0;
  flex-wrap: wrap;
  line-height: 1.4;
  animation-name: none;
}

#api-banner span {
  min-width: min(320px, 100%);
  overflow-wrap: anywhere;
}

/* The drawer owns the viewport at this breakpoint; undo the desktop height so
 * its tab panel can use the full dynamic height, including mobile keyboards. */
@media (max-width: 1199px) {
  .tl-side {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .tl-bar .tl-group[aria-label="Project"] {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    width: 100%;
  }

  .tl-bar .tl-group[aria-label="Project"] #tl-name {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .tl-bar .tl-group[aria-label="Project"] #tl-open {
    min-width: 0;
    width: 100%;
  }

  .tl-bar .tl-bar-right {
    margin-left: 0;
  }

  .tl-stage {
    max-height: min(560px, calc(100dvh - 132px));
  }

  #api-banner {
    width: 100%;
    margin-top: 8px;
  }

  #api-banner span {
    flex-basis: calc(100% - 32px);
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .tl-stage-tools {
    gap: 4px;
  }

  .tl-stage-tools .tl-btn {
    padding-inline: 7px;
  }
}

/* Project feedback gets its own readable row instead of splitting toolbar
 * controls, especially when a retry or newer-edits message wraps on mobile. */
#tl-note { flex-basis: 100%; order: 3; min-width: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#tl-note:empty { display: none; }

/* A newly arrived handoff gets a trailing row; it must not move controls
 * above it between pointer down and up. */
.tl-bar > #tl-pending-sound { flex: 0 0 100%; text-align: left; }