/* VidGen shared chrome — pipeline stepper + project banner
   include via: <link rel="stylesheet" href="/static/_chrome.css">
*/
:root {
  --vg-bg:#0e0e14; --vg-surface:#16161f; --vg-card:#1e1e2a; --vg-card2:#242433;
  --vg-border:#2a2a3a; --vg-accent:#7c5cfc; --vg-accent2:#c55cfc;
  --vg-text:#e8e8f0; --vg-muted:#7070a0; --vg-orange:#f0a040; --vg-green:#34c78a;
}

/* Pipeline stepper */
.vg-stepper {
  display:flex; gap:6px; align-items:center;
  padding:10px 28px;
  background:var(--vg-surface, var(--surface));
  border-bottom:1px solid var(--vg-border, var(--border));
  overflow-x:auto;
}
.vg-stepper a.vg-step {
  display:flex; align-items:center; gap:8px;
  padding:5px 11px;
  background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  border-radius:7px;
  font-size:.74rem;
  color:var(--vg-muted, var(--muted));
  white-space:nowrap;
  text-decoration:none;
  transition:all .15s;
}
.vg-stepper a.vg-step:hover {
  color:var(--vg-text, var(--text));
  border-color:var(--vg-accent, var(--accent));
}
.vg-stepper a.vg-step.active {
  color:var(--vg-accent, var(--accent));
  border-color:var(--vg-accent, var(--accent));
  background:rgba(124,92,252,.12);
  font-weight:700;
}
.vg-stepper .vg-n {
  background:var(--vg-card2, var(--card2));
  color:var(--vg-muted, var(--muted));
  padding:1px 6px;
  border-radius:4px;
  font-size:.66rem;
  font-weight:700;
}
.vg-stepper a.vg-step.active .vg-n {
  background:var(--vg-accent, var(--accent));
  color:#fff;
}
.vg-stepper .vg-sep {
  color:var(--vg-border, var(--border));
  font-size:.7rem;
}

/* Project banner */
.vg-proj-banner {
  padding:8px 28px;
  background:rgba(124,92,252,.08);
  border-bottom:1px solid var(--vg-border, var(--border));
  display:flex; align-items:center; gap:10px;
  font-size:.78rem;
  color:var(--vg-muted, var(--muted));
  flex-wrap:wrap;
}
.vg-proj-banner strong {
  color:var(--vg-accent, var(--accent));
}
.vg-proj-banner.empty {
  background:linear-gradient(135deg, rgba(240,160,64,.10) 0%, rgba(240,208,64,.06) 100%);
  border-bottom:1px solid rgba(240,160,64,.25);
  padding:12px 28px;
  color:var(--vg-text, var(--text));
}
.vg-proj-banner a {
  color:inherit;
  text-decoration:underline;
}

/* Empty state — 有設計感的版本 */
.vg-empty-card {
  display:flex; align-items:center; gap:14px; width:100%;
}
.vg-empty-icon {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(240,160,64,.18);
  border:1px solid rgba(240,160,64,.4);
  border-radius:10px;
  font-size:1.3rem;
}
.vg-empty-body {
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.vg-empty-title {
  font-weight:700; font-size:.9rem;
  color:var(--vg-text, var(--text));
  letter-spacing:.01em;
}
.vg-empty-sub {
  font-size:.74rem;
  color:var(--vg-muted, var(--muted));
}
.vg-empty-action {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px;
  border-radius:9px;
  font:inherit; font-size:.82rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:transform .12s, opacity .12s, box-shadow .12s;
  white-space:nowrap;
}
.vg-empty-action.primary {
  background:linear-gradient(135deg, var(--vg-orange, var(--orange)), #f0a040);
  color:#0e0e14;
  border:none;
  box-shadow:0 2px 10px rgba(240,160,64,.25);
}
.vg-empty-action.primary:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(240,160,64,.4);
  opacity:.95;
}
.vg-empty-action.ghost {
  background:transparent;
  color:var(--vg-muted, var(--muted));
  border:1px solid var(--vg-border, var(--border));
}
.vg-empty-action.ghost:hover {
  color:var(--vg-accent, var(--accent));
  border-color:var(--vg-accent, var(--accent));
  background:rgba(124,92,252,.06);
}
.vg-empty-arrow {
  font-size:1.05rem;
  transition:transform .15s;
}
.vg-empty-action.primary:hover .vg-empty-arrow {
  transform:translateX(3px);
}
.vg-kbd {
  font-family:'SF Mono', Menlo, monospace;
  font-size:.7rem;
  padding:1px 6px;
  background:var(--vg-card2, var(--card2));
  border:1px solid var(--vg-border, var(--border));
  border-radius:4px;
  color:var(--vg-muted, var(--muted));
}

@media (max-width:680px) {
  .vg-empty-card { flex-wrap:wrap; }
  .vg-empty-body { flex:1 1 100%; order:-1; }
  .vg-empty-action { flex:1; justify-content:center; }
}
.vg-proj-banner .vg-counts {
  margin-left:auto;
  font-size:.72rem;
  font-family:'SF Mono', Menlo, monospace;
}
.vg-proj-banner .vg-counts span { margin-right:8px; }
.vg-search-btn {
  margin-left:auto;
  background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  color:var(--vg-muted, var(--muted));
  padding:3px 9px;
  border-radius:6px;
  font-size:.72rem;
  cursor:pointer;
  font-family:inherit;
}
.vg-search-btn:hover {
  color:var(--vg-accent, var(--accent));
  border-color:var(--vg-accent, var(--accent));
}

/* Next-step CTA helper */
.vg-next-cta {
  margin:18px 0 0;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(52,199,138,.12), rgba(52,199,138,.04));
  border:1px solid rgba(52,199,138,.3);
  border-radius:10px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.vg-next-cta .vg-arrow { font-size:1.3rem; }
.vg-next-cta .vg-text { flex:1; color:var(--vg-text, var(--text)); font-size:.88rem; line-height:1.55; }
.vg-next-cta .vg-text strong { color:var(--vg-green, var(--green)); }
.vg-next-cta a.vg-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px;
  background:var(--vg-green, var(--green));
  color:#000;
  border-radius:8px;
  text-decoration:none;
  font-size:.88rem;
  font-weight:700;
  transition:opacity .15s;
}
.vg-next-cta a.vg-btn:hover { opacity:.85; }

/* Floating chat bubble (chat-based refinement) */
.vg-chat-fab {
  position:fixed; right:20px; bottom:20px; z-index:200;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--vg-accent, var(--accent)), var(--vg-accent2, var(--accent2)));
  color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  box-shadow:0 6px 22px rgba(124,92,252,.4);
  transition:transform .15s, box-shadow .15s;
}
.vg-chat-fab:hover { transform:scale(1.05); box-shadow:0 8px 28px rgba(124,92,252,.5); }
.vg-chat-fab.disabled { background:var(--vg-card2, var(--card2)); color:var(--vg-muted, var(--muted)); cursor:not-allowed; box-shadow:none; }
.vg-chat-fab.disabled:hover { transform:none; box-shadow:none; }
.vg-chat-fab .vg-dot {
  position:absolute; top:5px; right:5px;
  width:10px; height:10px; border-radius:50%;
  background:var(--vg-green, var(--green));
  border:2px solid var(--vg-bg, var(--bg));
}

.vg-chat-panel {
  position:fixed; right:20px; bottom:88px; z-index:200;
  width:min(420px, calc(100vw - 40px));
  max-height:min(640px, calc(100vh - 120px));
  background:var(--vg-bg, var(--bg));
  border:1px solid var(--vg-border, var(--border));
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:none; flex-direction:column;
  overflow:hidden;
}
.vg-chat-panel.show { display:flex; }

.vg-chat-head {
  padding:12px 16px;
  background:var(--vg-surface, var(--surface));
  border-bottom:1px solid var(--vg-border, var(--border));
  display:flex; align-items:center; gap:10px;
}
.vg-chat-head h3 { font-size:.95rem; color:var(--vg-text, var(--text)); flex:1; margin:0; font-weight:700; }
.vg-chat-head .vg-ctx-tag {
  font-size:.66rem; padding:2px 7px;
  background:var(--vg-card2, var(--card2));
  color:var(--vg-accent, var(--accent));
  border-radius:9px; font-family:'SF Mono',Menlo,monospace;
}
.vg-chat-head .vg-x {
  background:none; border:none; color:var(--vg-muted, var(--muted));
  font-size:1.4rem; cursor:pointer; padding:0 4px;
}
.vg-chat-head .vg-x:hover { color:var(--vg-text, var(--text)); }

.vg-chat-body {
  flex:1; overflow-y:auto; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
  font-size:.84rem; color:var(--vg-text, var(--text));
}
.vg-chat-tip {
  padding:10px 12px;
  background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  border-radius:9px;
  color:var(--vg-muted, var(--muted));
  font-size:.78rem; line-height:1.55;
}
.vg-chat-tip strong { color:var(--vg-text, var(--text)); }
.vg-chat-tip ul { margin:5px 0 0 1.2em; }
.vg-chat-tip li { margin-bottom:3px; }

.vg-chat-msg {
  padding:10px 12px;
  border-radius:9px;
  line-height:1.6;
  max-width:92%;
}
.vg-chat-msg.user {
  background:rgba(124,92,252,.18);
  border:1px solid rgba(124,92,252,.35);
  align-self:flex-end;
}
.vg-chat-msg.bot {
  background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  align-self:flex-start;
}
.vg-chat-msg.bot.applied { border-color:rgba(52,199,138,.4); background:rgba(52,199,138,.06); }
.vg-chat-msg.bot.clarify { border-color:rgba(240,160,64,.4); background:rgba(240,160,64,.06); }
.vg-chat-msg.bot.error   { border-color:rgba(240,64,96,.4);  background:rgba(240,64,96,.06); }
.vg-chat-msg .vg-changes {
  margin-top:6px; padding-top:6px;
  border-top:1px dashed var(--vg-border, var(--border));
  font-size:.74rem;
}
.vg-chat-msg .vg-change {
  padding:5px 8px;
  background:var(--vg-card2, var(--card2));
  border-radius:5px; margin-top:4px;
}
.vg-chat-msg .vg-change.fail { background:rgba(240,64,96,.08); color:var(--vg-orange, var(--orange)); }
.vg-chat-msg .vg-change code {
  font-family:'SF Mono',Menlo,monospace; font-size:.7rem;
  background:rgba(0,0,0,.2); padding:1px 5px; border-radius:3px;
}
.vg-chat-msg .vg-followups { margin-top:6px; font-size:.74rem; color:var(--vg-muted, var(--muted)); }

.vg-chat-foot {
  padding:10px 12px;
  border-top:1px solid var(--vg-border, var(--border));
  background:var(--vg-surface, var(--surface));
  display:flex; gap:8px; align-items:center;
}
.vg-chat-foot textarea {
  flex:1; padding:8px 10px;
  background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  border-radius:8px;
  color:var(--vg-text, var(--text));
  font:inherit; font-size:.85rem; line-height:1.5;
  resize:none; min-height:38px; max-height:120px;
}
.vg-chat-foot textarea:focus { outline:none; border-color:var(--vg-accent, var(--accent)); }
.vg-chat-foot .vg-send {
  background:var(--vg-accent, var(--accent));
  color:#fff; border:none;
  padding:8px 14px;
  border-radius:8px; cursor:pointer; font-weight:700; font-size:.82rem;
}
.vg-chat-foot .vg-send:disabled { opacity:.4; cursor:not-allowed; }
.vg-chat-foot .vg-send:hover:not(:disabled) { opacity:.88; }

.vg-spinner {
  width:14px; height:14px; border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%;
  animation:vg-spin .65s linear infinite;
  display:inline-block;
}
@keyframes vg-spin { to { transform:rotate(360deg); } }

/* Global search (Cmd+K) */
.vg-search-backdrop {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.7);
  display:none; align-items:flex-start; justify-content:center;
  padding:80px 20px 20px;
  backdrop-filter:blur(4px);
}
.vg-search-backdrop.show { display:flex; }
.vg-search-box {
  width:100%; max-width:720px;
  max-height:calc(100vh - 100px);
  background:var(--vg-bg, var(--bg));
  border:1px solid var(--vg-border, var(--border));
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.vg-search-head {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--vg-border, var(--border));
  background:var(--vg-surface, var(--surface));
}
.vg-search-head > span:first-child { font-size:1.2rem; }
.vg-search-input {
  flex:1; padding:6px 0;
  background:transparent; border:none; outline:none;
  color:var(--vg-text, var(--text));
  font:inherit; font-size:1rem;
}
.vg-search-input::placeholder { color:var(--vg-muted, var(--muted)); }
.vg-search-hint {
  color:var(--vg-muted, var(--muted)); font-size:.7rem;
  padding:2px 8px; background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  border-radius:5px;
}
.vg-search-filters {
  display:flex; gap:14px; flex-wrap:wrap;
  padding:8px 18px;
  border-bottom:1px solid var(--vg-border, var(--border));
  font-size:.78rem; color:var(--vg-muted, var(--muted));
  background:var(--vg-surface, var(--surface));
}
.vg-search-filters label {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
}
.vg-search-filters input { width:auto; cursor:pointer; }
.vg-search-results {
  flex:1; overflow-y:auto;
  padding:10px;
  background:var(--vg-bg, var(--bg));
}
.vg-search-meta {
  padding:6px 8px; font-size:.72rem;
  color:var(--vg-muted, var(--muted));
}
.vg-search-empty {
  padding:50px 20px; text-align:center;
  color:var(--vg-muted, var(--muted));
  font-size:.85rem; line-height:1.7;
}
.vg-r-card {
  display:flex; gap:12px; padding:10px 12px;
  background:var(--vg-card, var(--card));
  border:1px solid var(--vg-border, var(--border));
  border-radius:9px;
  text-decoration:none;
  color:var(--vg-text, var(--text));
  margin-bottom:6px;
  transition:border-color .15s, transform .1s;
}
.vg-r-card:hover {
  border-color:var(--vg-accent, var(--accent));
  transform:translateX(2px);
}
.vg-r-thumb {
  width:56px; height:56px;
  object-fit:cover; border-radius:6px;
  flex-shrink:0;
  background:var(--vg-card2, var(--card2));
}
.vg-r-thumb-ph {
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  color:var(--vg-muted, var(--muted));
}
.vg-r-body { flex:1; min-width:0; }
.vg-r-title {
  font-weight:700; font-size:.92rem; line-height:1.3;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.vg-r-kind {
  font-size:.66rem; padding:1px 7px;
  background:var(--vg-card2, var(--card2));
  color:var(--vg-accent, var(--accent));
  border-radius:7px;
  font-weight:600;
}
.vg-r-sub {
  color:var(--vg-muted, var(--muted));
  font-size:.72rem; margin-top:2px;
  font-family:'SF Mono', Menlo, monospace;
}
.vg-r-snippet {
  color:var(--vg-text, var(--text));
  font-size:.78rem; line-height:1.5;
  margin-top:5px;
  max-height:2.8em; overflow:hidden;
  opacity:.85;
}