/* ── VIBE TOKENS (global.css provides base) ── */
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
:root { --color-success:#10b981; --color-danger:#ef4444; --text:#000000; --text-muted:#666666; --border:#000000; }
body.light-theme { --text:#000000; --text-muted:#666666; --border:#000000; }
.dark { --text:#ffffff; --text-muted:#aaaaaa; --border:#444444; }
body { font-family:'DM Sans',sans-serif; }
/* ── LAYOUT (topbar 52px, footer 44px) ── */
main.vibe-page { padding-top:0; padding-bottom:0; }
.vibe-page { display:flex; align-items:center; min-height:calc(100vh - 52px - 44px); padding:0 var(--sp-xl); }
.vibe-container { width:100%; max-width:900px; display:flex; flex-direction:column; gap:var(--sp-sm); box-sizing:border-box; }
/* ── HEADER ── */
.vibe-header { display:flex; flex-direction:column; gap:8px; margin-top:var(--sp-sm); font-family:'DM Mono',monospace !important; }
/* ── ROW 1: STATUS & UTILITY CONTROLS ── */
.vibe-bar { display:flex; align-items:center; gap:6px; box-sizing:border-box; }

@keyframes vibePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.vibe-record-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.vibe-util-btn { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:transparent; color:var(--text); font-size:.75rem; cursor:pointer; transition:all .15s; box-sizing:border-box; text-transform:uppercase; font-family:'DM Mono',monospace; font-weight:700; }
.vibe-util-btn:hover { border-color:var(--text-primary); }
.vibe-util-btn.is-disabled { opacity:.3; pointer-events:none; }
.vibe-util-btn i { width:12px; height:12px; color:var(--text); }
.vibe-bar-spacer { flex:1; min-width:8px; }
.vibe-undo-btn { margin-right:18px; }
.vibe-de-btn { margin-left:18px; }
.vibe-source-wrap { position:relative; flex-shrink:0; }
.vibe-source-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:all .15s; box-sizing:border-box; }
.vibe-source-btn:hover { border-color:var(--text-primary); }
.vibe-source-dropdown { display:none; position:absolute; top:100%; left:0; z-index:10; margin-top:4px; min-width:100%; background:var(--bg-page); border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; white-space:nowrap; }
.vibe-source-dropdown.is-open { display:block; }
.vibe-source-dropdown button { display:block; width:100%; padding:5px 10px; text-align:left; font-size:.7rem; white-space:nowrap; border:none; border-radius:0; cursor:pointer; text-transform:uppercase; font-family:'DM Mono',monospace; font-weight:700; color:var(--text-muted); background:transparent; }
.vibe-source-dropdown button.is-active { color:var(--text-primary); }
.vibe-source-dropdown button:hover { background:var(--bg-surface); }
.vibe-record-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--text); font-size:.75rem; cursor:pointer; transition:all .15s; flex-shrink:0; text-transform:uppercase; font-family:'DM Mono',monospace; font-weight:700; }
.vibe-record-btn:hover { border-color:var(--text-primary); color:var(--text); }
.vibe-record-btn.is-recording { border-color:var(--color-danger); color:var(--color-danger); }
.vibe-record-btn.is-recording .vibe-record-dot { background:var(--color-danger); animation:vibePulse 1.2s ease-in-out infinite; }
.vibe-record-btn.is-stopped { border-color:var(--text); color:var(--text); }
.vibe-record-btn.is-stopped .vibe-record-dot { background:var(--text); animation:none; }
/* ── TEXTAREA ── */
.vibe-textarea { display:block; width:100%; height:65vh; min-height:240px; padding:var(--sp-md); font-family:'DM Sans',sans-serif; font-size:.9375rem; line-height:1.75; color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); resize:none; outline:none; transition:border-color .15s,box-shadow .15s; box-sizing:border-box; }
.vibe-textarea:focus { border-color:var(--border-strong); box-shadow:inset 0 0 0 1px var(--border-strong); }
.vibe-textarea::placeholder { color:var(--text-muted); }
/* ── GLOBAL ── */
button { font-family:'DM Mono',monospace; font-weight:700; text-transform:uppercase; color:var(--text); border:1px solid var(--border); background:transparent; }
.icon-btn { border:none; }
input { color:var(--text); border:1px solid var(--border); background:transparent; }
/* ── RESPONSIVE ── */
@media(max-width:768px){ .vibe-page { padding:0 var(--sp-sm); } .vibe-container { max-width:none; } .vibe-textarea { height:50vh; font-size:.875rem; } .vibe-bar { flex-wrap:wrap; gap:6px; } .vibe-bar-spacer { flex:1; min-width:4px; } }
@media(hover:none) and (max-width:768px){ .vibe-source-wrap { display:none; } }