/* phase6.css — shared styles for the cloud-synced saves UX, the
   placeholder-history dropdown, and the layout/overflow fixes that
   shipped on YouTube and now apply to every other builder.
   Loaded on every prompt-builder page after the page's own <style>,
   so its rules win when there's a conflict. */

/* ── Layout / overflow lockdown ─────────────────────────────────── */
html, body { max-width: 100vw; overflow-x: clip; width: 100%; }
.wrap, .layout, .right-col, .components-panel, .placeholder-panel,
.output-panel, .ai-panel, .saved-panel, .feedback-panel {
  max-width: 100%; min-width: 0;
}
.panel-body { min-width: 0; max-width: 100%; }

/* ── Scroll-chaining quirk fix ───────────────────────────────────
   When `position: sticky` and `overflow-y: auto` live on the SAME
   element (the inline CSS for .components-panel does this), Chromium
   accumulates wheel events at the panel's scroll boundary instead of
   bubbling them to the page — the user has to "kick" the wheel by
   moving the cursor before the page picks up scrolling.
   Fix: keep sticky on .components-panel, but move the actual scroll
   to .panel-body (its inner child). Two different elements ⇒ no quirk.
   YouTube has this in its inline CSS already; everyone else gets it
   here. */
.components-panel { overflow-y: hidden; display: flex; flex-direction: column; }
.panel-body { flex: 1 1 auto; overflow-y: auto; }
@media (max-width: 800px) {
  /* Mobile already drops sticky + max-height (see each builder's
     inline @media block), so let .panel-body grow naturally there. */
  .panel-body { flex: none; overflow-y: visible; }
}
.categories { min-width: 0; max-width: 100%; }
.categories > div { min-width: 0; max-width: 100%; }
.tags { min-width: 0; max-width: 100%; }

/* placeholder-panel needs overflow visible so the side-floating
   placeholder-history dropdown isn't clipped by the panel's
   rounded corner. */
.placeholder-panel { overflow: visible; }
.field-group { position: relative; }

/* AI panel constraints — long URLs / pre / tables / inline code in
   the streamed markdown can't push the document wider on mobile. */
.ai-thread, .ai-turn { min-width: 0; max-width: 100%; }
.ai-body { min-width: 0; max-width: 100%; }
.ai-output-text { min-width: 0; max-width: 100%; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-output-text pre { max-width: 100%; }
.ai-output-text code { word-break: break-word; }
.ai-output-text table { display: block; max-width: 100%; overflow-x: auto; }

/* ── Saved-prompts UX (preview, hover-reveal action buttons) ──── */
.saved-warning.synced { color: var(--green); background: rgba(74,222,128,0.05); border-left-color: rgba(74,222,128,0.4); }
.saved-item { display: block; padding: 8px 9px; border-radius: 7px; cursor: pointer; transition: background 0.12s; border: 1px solid transparent; }
.saved-item:hover { background: var(--card); border-color: var(--border); }
.saved-row { display: flex; align-items: center; gap: 7px; }
.saved-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-date { font-family: var(--mono); font-size: 9px; color: var(--muted); flex-shrink: 0; }
.saved-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.saved-item:hover .saved-actions { opacity: 1; }
.saved-act { font-family: var(--font); font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; transition: color 0.1s, border-color 0.1s; line-height: 1.2; }
.saved-act:hover { color: var(--text); border-color: #333337; }
.saved-act.primary:hover { color: var(--accent); border-color: rgba(232,255,71,0.4); }
.saved-act.danger:hover { color: var(--rfail); border-color: rgba(248,113,113,0.4); }
.saved-preview { font-size: 11px; color: var(--muted); opacity: 0.65; line-height: 1.4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }

/* ── Placeholder-history dropdown ─────────────────────────────── */
.ph-suggestions { position: absolute; top: 0; left: calc(100% + 8px); width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 50; max-height: 240px; overflow-y: auto; display: none; }
.ph-suggestions.open { display: block; }
.ph-suggestions::after { content: ''; position: absolute; top: 14px; right: 100%; width: 8px; height: 1px; background: var(--border); }
@media (max-width: 1100px) {
  .ph-suggestions { top: 100%; left: 0; right: auto; width: auto; min-width: 0; max-width: 100%; margin-top: 4px; }
  .ph-suggestions::after { display: none; }
}
.ph-suggestions-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ph-suggestions-clear { background: transparent; border: none; color: var(--muted); font-family: var(--mono); font-size: 9px; cursor: pointer; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.05em; }
.ph-suggestions-clear:hover { color: var(--rfail); background: rgba(248,113,113,0.08); }
.ph-suggestion { display: flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 12px; color: var(--text); cursor: pointer; border-radius: 5px; transition: background 0.1s, color 0.1s; }
.ph-suggestion:hover, .ph-suggestion.active { background: var(--bg); color: var(--accent); }
.ph-suggestion-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-suggestion-del { font-size: 11px; color: var(--muted); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; opacity: 0; transition: opacity 0.1s; }
.ph-suggestion:hover .ph-suggestion-del { opacity: 1; }
.ph-suggestion-del:hover { color: var(--rfail); background: rgba(248,113,113,0.08); }