/* meta_app — Newz & Zines + Hey Writz styles (Phase 8)
   ─────────────────────────────────────────────────────────
   All selectors prefixed with .meta- or .hw- so they can't collide
   with studio styles. No bare .selected (KNOWN_ISSUES.md fix).
*/

/* ─── Common ───────────────────────────────────────────────── */
.meta-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.meta-header h2 { margin:0; }

.meta-card {
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--border-primary, #374151);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
}
.meta-card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.meta-card-sub   { font-size: 12px; color: var(--text-muted, #9ca3af); margin-bottom: 10px; }
.meta-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.meta-row { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; color: var(--text-primary, #e5e7eb); flex-wrap:wrap; }
.meta-row-info { flex:1; min-width:0; }
.meta-eds-list { margin:8px 0; padding-left:8px; border-left:2px solid var(--border-primary, #374151); }
.meta-empty { padding:24px; text-align:center; color: var(--text-muted, #9ca3af); border:1px dashed var(--border-primary, #374151); border-radius:6px; }
.meta-muted { color: var(--text-muted, #9ca3af); font-size:13px; padding:8px 0; }
.meta-err { color:#ef4444; font-size:13px; padding:6px 0; }

.meta-badge {
    display:inline-block; color:white; font-size:10px; font-weight:600;
    text-transform:uppercase; padding:2px 8px; border-radius:10px; letter-spacing:0.05em;
}
.btn-sm { padding:3px 8px !important; font-size:12px !important; }

/* Store grid */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.meta-store-card { display:flex; flex-direction:column; gap:8px; }
.meta-store-cover {
    aspect-ratio: 3/4; background: var(--bg-tertiary, #111827); overflow:hidden;
    border-radius:6px; display:flex; align-items:center; justify-content:center;
}
.meta-store-cover img { width:100%; height:100%; object-fit:cover; display:block; }

/* Modal */
.meta-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999;
    display:flex; align-items:center; justify-content:center;
}
.meta-modal {
    background: var(--bg-primary, #111827);
    border: 1px solid var(--border-primary, #374151);
    border-radius: 10px; padding: 20px;
    width: min(440px, 90vw); max-height: 90vh; overflow-y: auto;
}
.meta-modal h3 { margin: 0 0 16px 0; }
.meta-field { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:13px; }
.meta-field span { color: var(--text-muted, #9ca3af); }
.meta-field input {
    background: var(--bg-tertiary, #1f2937);
    border:1px solid var(--border-primary, #374151);
    color: var(--text-primary, #e5e7eb);
    border-radius:6px; padding:8px 10px; font-size:14px;
}
.meta-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }

/* ─── Reader layout ────────────────────────────────────────── */
.meta-reader-header {
    display:flex; align-items:center; gap:16px; padding-bottom:12px;
    margin-bottom:16px; border-bottom:1px solid var(--border-primary, #374151);
    flex-wrap:wrap;
}
.meta-reader-title { flex:1; min-width:140px; }
.meta-reader-title > div:first-child { font-size:18px; font-weight:600; }
.meta-reader-date { font-size:12px; color: var(--text-muted, #9ca3af); }
.meta-reader-page-info { display:flex; align-items:center; gap:10px; font-size:14px; }
.meta-reader-page-info span { min-width:80px; text-align:center; font-variant-numeric:tabular-nums; }

.meta-reader-layout {
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 20px;
    align-items:start;
}
@media (max-width: 900px) {
    .meta-reader-layout { grid-template-columns: 1fr; }
}

.meta-reader-page, .meta-reader-spread {
    background: var(--bg-tertiary, #111827);
    border:1px solid var(--border-primary, #374151);
    border-radius:8px; padding:8px;
    display:flex; align-items:center; justify-content:center;
    min-height:300px;
    /* perspective: gives child <img> rotateY a 3D feel.
       Matches handoff spec: 2000px for newspapers (wider), 2400px for spreads */
    perspective: 2000px;
    /* Pin the page image to the top of the scroll viewport so it stays
       visible while the reader scrolls through the article column on the
       right. Phase 25.7. */
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 80px);
}
.meta-reader-spread { perspective: 2400px; gap:6px; }

/* Image inside the reader gets a transform-origin on its left edge so the
   page literally hinges like a book page. The animation is applied dynamically
   from JS (goPage / goSpread) so the rotation only runs on page changes. */
.meta-reader-page img,
.meta-reader-spread img {
    transform-origin: left center;
    transition: transform 0s; /* animation handles it */
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.meta-reader-page img { max-width:100%; max-height:75vh; object-fit:contain; box-shadow:0 4px 14px rgba(0,0,0,0.5); }
.meta-reader-spread img { max-width:48%; max-height:75vh; object-fit:contain; box-shadow:0 4px 14px rgba(0,0,0,0.5); }
.meta-reader-spread img:only-child { max-width:80%; }

/* Backwards-flip when going to a previous page — hinge from right edge */
.meta-reader-page img.meta-flip-back,
.meta-reader-spread img.meta-flip-back { transform-origin: right center; }

/* Newspaper page-flip — single page hinges from left edge (legacy) */
@keyframes meta-newz-page-flip {
    0%   { transform: rotateY(0);      opacity: 1; }
    50%  { transform: rotateY(-90deg); opacity: 0; }
    51%  { transform: rotateY(90deg);  opacity: 0; }
    100% { transform: rotateY(0);      opacity: 1; }
}
@keyframes meta-newz-page-flip-back {
    0%   { transform: rotateY(0);      opacity: 1; }
    50%  { transform: rotateY(90deg);  opacity: 0; }
    51%  { transform: rotateY(-90deg); opacity: 0; }
    100% { transform: rotateY(0);      opacity: 1; }
}
@keyframes meta-zines-spread-flip {
    0%   { transform: rotateY(0);      opacity: 1; }
    50%  { transform: rotateY(-95deg); opacity: 0.3; }
    100% { transform: rotateY(0);      opacity: 1; }
}
@keyframes meta-zines-spread-flip-back {
    0%   { transform: rotateY(0);     opacity: 1; }
    50%  { transform: rotateY(95deg); opacity: 0.3; }
    100% { transform: rotateY(0);     opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   Two-sided 3D page-flip (Phase 22.3)
   ───────────────────────────────────────────────────────────────
   The page wrapper has transform-style:preserve-3d so child faces
   live in real 3D. Two child <img>s stack on top of each other:
       .meta-flipface-front  →  the page you're on
       .meta-flipface-back   →  the page you're going to (pre-rotated)
   Toggling .meta-flip-forward on the wrapper rotates it -180deg;
   the back face (which is itself pre-rotated +180deg) ends up facing
   the camera as the front goes behind. You literally see the BACK of
   the page you're leaving for ~120ms in the middle of the turn — the
   exact thing a real book does.
   ═══════════════════════════════════════════════════════════════ */
.meta-flipbook {
    perspective: 2400px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 320px;
}
.meta-flipbook-spread { perspective: 3200px; gap: 4px; }

.meta-flippage {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    /* Aspect placeholder — overridden by the contained images */
    aspect-ratio: 8.5 / 11;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.55, 0.05, 0.45, 0.95);
    will-change: transform;
}
.meta-flippage-right {
    /* Right page of a spread hinges on its LEFT edge (the binding) */
    transform-origin: left center;
}
.meta-flippage-left {
    /* Left page of a spread hinges on its RIGHT edge (the binding) */
    transform-origin: right center;
}

.meta-flipface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    border-radius: 2px;
    background: #fff;
}
.meta-flipface-back {
    transform: rotateY(180deg);
}

/* The actual turn — applied/removed by JS */
.meta-flippage.meta-flip-forward {
    transform: rotateY(-180deg);
}
.meta-flippage.meta-flip-back {
    transform: rotateY(180deg);
}

/* Subtle paper shadow that intensifies mid-flip to imply page lift */
.meta-flippage::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0) 8%,
        rgba(0,0,0,0) 92%,
        rgba(0,0,0,0.20) 100%);
    pointer-events: none;
    transform: translateZ(0.1px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.meta-flippage.meta-flip-forward::before,
.meta-flippage.meta-flip-back::before {
    opacity: 1;
}

/* When the flipbook is in use, the legacy single-img wrapper hides */
.meta-reader-page.meta-flipbook-mode > img { display: none; }
.meta-reader-spread.meta-flipbook-mode > img { display: none; }

/* ═══════════════════════════════════════════════════════════════
   Scroll fix (Phase 25.1) — Studio's .tab-content has
   overflow:hidden + height:100% which traps our tall dashboards.
   Re-enable scrolling on JUST our two tabs. scroll-behavior:smooth so
   anchor jumps + scrollToTop animate naturally.
   ═══════════════════════════════════════════════════════════════ */
/* Phase 35 — extended to #classroom-tab, #therapy-tab, #newsletters-tab.
   All four meta_app tabs use the same .meta-dash-* dashboard layout, so
   they all need the same top offset to clear Studio's fixed nav bar.
   Without this, the dashboard h2 + action buttons get clipped at the top. */
#newz-tab, #zines-tab, #classroom-tab, #therapy-tab, #newsletters-tab {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    /* Pad TOP so any content (dashboard or reader header) clears Studio's
       fixed nav bar that sits at y=11..48. Pad BOTTOM so the FAQ +
       feedback panels aren't flush against the viewport edge. */
    padding: 60px 0 60px 0 !important;
    /* Allow the inertia/momentum scroll on macOS / iOS trackpads */
    -webkit-overflow-scrolling: touch;
    /* CRITICAL — lift the entire tab above Studio's <main class="app-main">
       which is position:fixed and otherwise intercepts every click and
       wheel event over our content.  Without these two lines, chips don't
       respond to clicks and the wheel only scrolls when the cursor is over
       the sticky page image (because sticky creates its own stacking
       context).  See Phase 25.9 — same root cause as Phase 23.6.  */
    position: relative;
    z-index: 5;
}
/* Subtle scrollbar styling so it doesn't look like a default-OS bar */
#newz-tab::-webkit-scrollbar, #zines-tab::-webkit-scrollbar,
#classroom-tab::-webkit-scrollbar, #therapy-tab::-webkit-scrollbar,
#newsletters-tab::-webkit-scrollbar { width: 10px; }
#newz-tab::-webkit-scrollbar-track, #zines-tab::-webkit-scrollbar-track,
#classroom-tab::-webkit-scrollbar-track, #therapy-tab::-webkit-scrollbar-track,
#newsletters-tab::-webkit-scrollbar-track { background: transparent; }
#newz-tab::-webkit-scrollbar-thumb, #zines-tab::-webkit-scrollbar-thumb,
#classroom-tab::-webkit-scrollbar-thumb, #therapy-tab::-webkit-scrollbar-thumb,
#newsletters-tab::-webkit-scrollbar-thumb {
    background: rgba(124,92,252,0.3);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
#newz-tab::-webkit-scrollbar-thumb:hover, #zines-tab::-webkit-scrollbar-thumb:hover,
#classroom-tab::-webkit-scrollbar-thumb:hover, #therapy-tab::-webkit-scrollbar-thumb:hover,
#newsletters-tab::-webkit-scrollbar-thumb:hover {
    background: rgba(124,92,252,0.55);
    background-clip: padding-box;
}

/* ═══════════════════════════════════════════════════════════════
   Newsroom Dashboard (Phase 23.1) — Studio Newz / Zines layout
   ═══════════════════════════════════════════════════════════════ */
.meta-dash-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-primary, #1e2d40);
    background: linear-gradient(90deg, rgba(124,92,252,0.06) 0%, transparent 60%);
    border-radius: 12px 12px 0 0;
}
.meta-dash-top h2 { margin: 0; font-size: 22px; }
.meta-dash-top .meta-dash-subtitle { color: var(--text-muted, #9ca3af); font-size: 13px; margin-top: 2px; }
.meta-dash-top .meta-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Stats strip — real numbers only, dashes for null */
.meta-stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--border-primary, #1e2d40);
    border-bottom: 1px solid var(--border-primary, #1e2d40);
}
.meta-stat-cell {
    background: var(--bg-secondary, #131920);
    padding: 16px 22px;
}
.meta-stat-label {
    font-size: 10px;
    color: var(--text-muted, #4d6480);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.meta-stat-value {
    font-size: 26px;
    font-weight: 800;
    margin-top: 4px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.meta-stat-sub {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 2px;
}
.meta-stat-sub.up { color: #10b981; }
.meta-stat-sub.down { color: #ef4444; }

/* Dashboard surface — the framed area that holds everything.
   position:relative + z-index lift us above Studio's <main class="app-main">
   which is position:fixed and creates a stacking context that otherwise
   intercepts coordinate-based clicks on our buttons. Verified live with
   document.elementsFromPoint() before this fix returning MAIN first.
   This is THE fix for "buttons render but clicks don't reach the server". */
.meta-dash-surface {
    background: var(--bg-secondary, #131920);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 12px;
    overflow: hidden;
    /* Top offset moved to the scroll container itself (#newz-tab/#zines-tab)
       in Phase 25.6 — that way the reader view's ← Back button also clears
       Studio's fixed nav, not just the dashboard. */
    margin: 0 0 24px;
    position: relative;
    z-index: 10;
}

/* Wide publication card (Newz) */
.meta-pub-wide {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    grid-template-areas: "cover info actions" "drop drop drop" "table table table" "stats stats stats";
    gap: 16px;
    padding: 18px;
    background: var(--bg-tertiary, #1a2230);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 10px;
    margin: 12px 16px;
    transition: border-color 0.15s;
}
.meta-pub-wide:hover { border-color: rgba(124,92,252,0.5); }
.meta-pub-cover {
    grid-area: cover;
    width: 100px; height: 132px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    color: white;
    background: linear-gradient(135deg, #7c5cfc 0%, #9b7ffe 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    user-select: none;
}
.meta-pub-cover.cover-teal { background: linear-gradient(135deg, #00d4c8 0%, #0aa39a 100%); }
.meta-pub-cover.cover-gold { background: linear-gradient(135deg, #f5a623 0%, #d18a18 100%); }
.meta-pub-cover.cover-pink { background: linear-gradient(135deg, #ec4899 0%, #b8377a 100%); }
.meta-pub-info { grid-area: info; min-width: 0; }
.meta-pub-name { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.meta-pub-meta { font-size: 12px; color: var(--text-muted, #9ca3af); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta-pub-meta .meta-pill {
    background: var(--bg-primary, #0a0d12);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-primary, #e5e7eb);
    border: 1px solid var(--border-primary, #1e2d40);
}
.meta-pill-voice { background: rgba(124,92,252,0.18) !important; color: #c8a8ff !important; border-color: rgba(124,92,252,0.4) !important; }
.meta-pill-price { background: rgba(245,166,35,0.15) !important; color: #f5a623 !important; border-color: rgba(245,166,35,0.4) !important; }
.meta-pill-free { background: rgba(16,185,129,0.15) !important; color: #10b981 !important; border-color: rgba(16,185,129,0.4) !important; }

.meta-pub-actions {
    grid-area: actions;
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
    min-width: 150px;
}
.meta-pub-actions .btn { text-align: left; padding: 6px 12px !important; font-size: 12px !important; }

.meta-pub-drop  { grid-area: drop; }
.meta-pub-table { grid-area: table; }
.meta-pub-stats { grid-area: stats; }

/* Inline edition table inside a publication card */
.meta-ed-table {
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary, #0a0d12);
}
.meta-ed-thead, .meta-ed-trow {
    display: grid;
    grid-template-columns: 90px 1fr 110px 1fr;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    font-size: 13px;
}
.meta-ed-thead {
    background: var(--bg-secondary, #131920);
    font-weight: 700; font-size: 10px; text-transform: uppercase;
    color: var(--text-muted, #4d6480); letter-spacing: 0.06em;
}
.meta-ed-trow { border-top: 1px solid var(--border-primary, #1e2d40); }
.meta-ed-trow:hover { background: rgba(124,92,252,0.04); }
.meta-ed-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.meta-ed-actions .btn { padding: 4px 10px !important; font-size: 11px !important; }

/* Sparkline + analytics widget */
.meta-sparkline {
    display: flex; align-items: flex-end; gap: 3px;
    height: 28px;
}
.meta-sparkline-bar {
    flex: 1;
    background: rgba(124,92,252,0.4);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.meta-sparkline-bar.empty { background: var(--border-primary, #1e2d40); }
.meta-sparkline-label {
    font-size: 10px;
    color: var(--text-muted, #4d6480);
    margin-top: 4px;
}

.meta-top-articles {
    background: var(--bg-primary, #0a0d12);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 8px;
    padding: 12px 14px;
}
.meta-top-articles-title {
    font-size: 10px; text-transform: uppercase;
    color: var(--text-muted, #4d6480);
    letter-spacing: 0.06em; font-weight: 700;
    margin-bottom: 8px;
}
.meta-top-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(30,45,64,0.5);
    font-size: 12px;
}
.meta-top-row:first-of-type { border-top: none; }
.meta-top-headline { color: var(--text-primary, #e5e7eb); }
.meta-top-reads { color: var(--text-muted, #9ca3af); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.meta-top-time { color: #10b981; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

/* Magazine cover-grid body (Zines) */
.meta-mag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px;
}
.meta-mag-card {
    background: var(--bg-tertiary, #1a2230);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.meta-mag-card:hover { transform: translateY(-2px); border-color: rgba(124,92,252,0.5); }
.meta-mag-cover-large {
    width: 100%; aspect-ratio: 3/4;
    display: flex; align-items: center; justify-content: center;
    font-size: 56px; color: white;
}
.meta-mag-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* FAQ + Feedback */
.meta-faq-panel {
    margin: 0 16px 16px;
    background: var(--bg-tertiary, #1a2230);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 10px;
    padding: 16px 20px;
}
.meta-faq-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted, #4d6480); font-weight: 700;
    margin-bottom: 10px;
}
.meta-faq-q {
    border-top: 1px solid var(--border-primary, #1e2d40);
    padding: 10px 0;
}
.meta-faq-q:first-of-type { border-top: none; padding-top: 0; }
.meta-faq-q summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex; gap: 8px; align-items: flex-start;
    color: var(--text-primary, #e5e7eb);
}
.meta-faq-q summary::-webkit-details-marker { display: none; }
.meta-faq-q summary::before {
    content: '▸';
    color: #7c5cfc;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.meta-faq-q[open] summary::before { transform: rotate(90deg); }
.meta-faq-q .meta-faq-a {
    padding: 8px 0 4px 16px;
    color: var(--text-secondary, #cbd5e1);
    font-size: 13px;
    line-height: 1.55;
}

.meta-fb-form {
    margin: 0 16px 16px;
    background: var(--bg-tertiary, #1a2230);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 10px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.meta-fb-form h4 { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.meta-fb-form .meta-fb-sub { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted, #9ca3af); margin-bottom: 4px; }
.meta-fb-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted, #9ca3af); }
.meta-fb-form select, .meta-fb-form input, .meta-fb-form textarea {
    background: var(--bg-primary, #0a0d12);
    border: 1px solid var(--border-primary, #1e2d40);
    color: var(--text-primary, #e5e7eb);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
}
.meta-fb-form textarea { min-height: 70px; resize: vertical; grid-column: 1 / -1; }
.meta-fb-form .meta-fb-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.meta-fb-result { grid-column: 1 / -1; font-size: 12px; padding: 4px 0; min-height: 16px; }
.meta-fb-result.ok { color: #10b981; }
.meta-fb-result.err { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════
   Help cheat sheet (Phase 28.2) — speakable command list
   ═══════════════════════════════════════════════════════════════ */
.hw-help-overlay {
    position: fixed; inset: 0; z-index: 9999998;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.hw-help-card {
    background: linear-gradient(135deg, #1a1230 0%, #131920 100%);
    border: 1px solid rgba(124,92,252,0.35);
    border-radius: 14px;
    padding: 26px 30px;
    width: min(720px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.hw-help-title {
    font-size: 22px; font-weight: 800; margin: 0 0 6px;
    color: #e8f0fe; letter-spacing: -0.02em;
}
.hw-help-sub { color: #8fa3bf; font-size: 13px; margin-bottom: 22px; }
.hw-help-group {
    margin-bottom: 18px;
    border: 1px solid rgba(124,92,252,0.15);
    border-radius: 10px;
    padding: 14px 18px;
    background: rgba(124,92,252,0.04);
}
.hw-help-group h4 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #c8a8ff; margin: 0 0 10px;
}
.hw-help-cmd {
    display: grid; grid-template-columns: 1fr auto; gap: 16px;
    padding: 5px 0; font-size: 13px; align-items: baseline;
    border-top: 1px solid rgba(124,92,252,0.08);
}
.hw-help-cmd:first-of-type { border-top: none; }
.hw-help-cmd .hw-help-phrase {
    color: #e8f0fe; font-weight: 500;
}
.hw-help-cmd .hw-help-phrase::before { content: '"'; }
.hw-help-cmd .hw-help-phrase::after { content: '"'; }
.hw-help-cmd .hw-help-what {
    color: #8fa3bf; font-size: 12px;
}
.hw-help-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid rgba(124,92,252,0.15);
}
.hw-help-tip {
    font-size: 12px; color: #8fa3bf; line-height: 1.5;
    max-width: 70%;
}
.hw-help-tip strong { color: #c8a8ff; }
.hw-help-close {
    background: linear-gradient(90deg, #7c5cfc, #9b7ffe);
    border: none; color: white; font-weight: 600;
    padding: 9px 22px; border-radius: 8px; cursor: pointer;
}

/* Ask-clarify modal — same shape, smaller, with buttons */
.hw-clarify-overlay {
    position: fixed; inset: 0; z-index: 9999998;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.hw-clarify-card {
    background: linear-gradient(135deg, #1a1230 0%, #131920 100%);
    border: 1px solid rgba(124,92,252,0.4);
    border-radius: 14px;
    padding: 24px 28px;
    width: min(440px, 100%);
    text-align: center;
}
.hw-clarify-title { font-size: 16px; font-weight: 700; margin: 0 0 18px; color: #e8f0fe; }
.hw-clarify-options { display: flex; flex-direction: column; gap: 8px; }
.hw-clarify-option {
    padding: 12px 18px;
    background: rgba(124,92,252,0.08);
    border: 1px solid rgba(124,92,252,0.3);
    border-radius: 8px;
    color: #e8f0fe;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.hw-clarify-option:hover { background: rgba(124,92,252,0.18); border-color: #7c5cfc; }
.hw-clarify-cancel {
    background: none; border: none; color: #8fa3bf;
    font-size: 12px; margin-top: 12px; cursor: pointer; padding: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   Voice-clone recording overlay (Phase 27.2)
   Full-viewport dim with a centered card showing recording state.
   ═══════════════════════════════════════════════════════════════ */
.hw-record-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hw-record-card {
    background: linear-gradient(135deg, #1a1230 0%, #131920 100%);
    border: 1px solid rgba(124,92,252,0.4);
    border-radius: 16px;
    padding: 32px 40px;
    min-width: 380px;
    max-width: 520px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,92,252,0.2);
}
.hw-record-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #e8f0fe;
    letter-spacing: -0.02em;
}
.hw-record-name {
    font-size: 14px;
    color: #c8a8ff;
    margin-bottom: 22px;
}
.hw-record-dot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff5a5a 0%, #c81e1e 70%);
    margin: 0 auto 18px;
    box-shadow: 0 0 24px rgba(255,90,90,0.6);
    animation: hw-record-pulse 1.4s ease-in-out infinite;
}
@keyframes hw-record-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(255,90,90,0.5); }
    50%      { transform: scale(1.12); box-shadow: 0 0 40px rgba(255,90,90,0.9); }
}
.hw-record-timer {
    font-size: 44px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.04em;
}
.hw-record-hint {
    font-size: 13px;
    color: #8fa3bf;
    margin-bottom: 18px;
    line-height: 1.5;
}
.hw-record-level {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 auto 22px;
    width: 80%;
}
.hw-record-level-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c5cfc, #ff5a5a);
    border-radius: 999px;
    transition: width 0.08s linear;
    width: 0%;
}
.hw-record-actions { display: flex; gap: 10px; justify-content: center; }
.hw-record-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #e8f0fe;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.hw-record-btn:hover { background: rgba(255,255,255,0.12); }
.hw-record-btn.stop {
    background: linear-gradient(90deg, #7c5cfc, #9b7ffe);
    border-color: transparent;
}
.hw-record-btn.cancel { color: #ef4444; border-color: rgba(239,68,68,0.4); }

/* Countdown state — before recording starts */
.hw-record-countdown .hw-record-dot {
    background: radial-gradient(circle at 35% 35%, #7c5cfc, #4a30c0);
    animation: none;
}
.hw-record-countdown .hw-record-timer { color: #c8a8ff; font-size: 64px; }

/* Uploading state — after recording */
.hw-record-uploading .hw-record-dot {
    background: radial-gradient(circle at 35% 35%, #10b981, #059669);
    animation: hw-record-pulse 1s ease-in-out infinite;
}

/* Done state */
.hw-record-done .hw-record-dot {
    background: radial-gradient(circle at 35% 35%, #10b981, #059669);
    animation: none;
}

/* ═══════════════════════════════════════════════════════════════
   Crossword / puzzle solver (Phase 25.4)
   ═══════════════════════════════════════════════════════════════ */
.meta-puzzle-modal {
    background: var(--bg-secondary, #131920);
    border: 1px solid var(--border-primary, #1e2d40);
    border-radius: 12px;
    padding: 22px;
    width: min(900px, 95vw);
    max-height: 92vh;
    overflow-y: auto;
}
.meta-puzzle-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.meta-puzzle-sub { color: var(--text-muted, #9ca3af); font-size: 12px; margin-bottom: 14px; }

.meta-puzzle-layout { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .meta-puzzle-layout { grid-template-columns: 1fr; } }
.meta-pz-grid { display: inline-grid; gap: 1px; background: var(--border-primary, #1e2d40); padding: 1px; border-radius: 4px; }
.meta-pz-cell {
    position: relative; width: 36px; height: 36px;
    background: white; color: black;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600;
    cursor: pointer; user-select: none;
}
.meta-pz-cell.black { background: var(--border-primary, #1e2d40); cursor: default; }
.meta-pz-cell.selected { background: #ffd166; }
.meta-pz-cell.in-word { background: #fff3b0; }
.meta-pz-cell.selected.in-word { background: #ffd166; }
.meta-pz-cell.correct { background: #c4f1be; }
.meta-pz-cell.wrong { background: #ffc5c5; }
.meta-pz-cell .meta-pz-num {
    position: absolute; top: 1px; left: 3px;
    font-size: 9px; font-weight: 700; color: #555;
}

.meta-pz-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.meta-pz-clue-col h4 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted, #4d6480); margin: 0 0 8px;
}
.meta-pz-clue-list { list-style: none; padding: 0; margin: 0; max-height: 380px; overflow-y: auto; }
.meta-pz-clue {
    padding: 5px 8px; border-radius: 4px; cursor: pointer;
    font-size: 13px; line-height: 1.4;
    color: var(--text-secondary, #cbd5e1);
}
.meta-pz-clue:hover { background: var(--bg-tertiary, #1a2230); }
.meta-pz-clue.active { background: rgba(124,92,252,0.18); color: #c8a8ff; }
.meta-pz-clue strong { display: inline-block; min-width: 26px; color: #00d4c8; }
.meta-pz-controls { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.meta-pz-result {
    margin-top: 12px; font-size: 13px; min-height: 18px;
    color: var(--text-muted, #9ca3af);
}
.meta-pz-result.ok { color: #10b981; }
.meta-pz-result.err { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════
   Schedule picker (Phase 24.2) — pill group in New Publication modal
   ═══════════════════════════════════════════════════════════════ */
.meta-sched-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.meta-sched-pills button {
    background: var(--bg-tertiary, #1a2230);
    color: var(--text-muted, #9ca3af);
    border: 1px solid var(--border-primary, #1e2d40);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
}
.meta-sched-pills button:hover { border-color: #7c5cfc; color: var(--text-primary, #e5e7eb); }
.meta-sched-pills button.meta-sched-active {
    background: rgba(124,92,252,0.18);
    border-color: #7c5cfc;
    color: #c8a8ff;
    font-weight: 600;
}

/* Upload progress badge — sits inside the dropzone during upload */
.meta-upload-progress {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-primary, #0a0d12);
    border: 1px solid #7c5cfc;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary, #cbd5e1);
}
.meta-upload-progress-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 6px;
}
.meta-upload-progress-filename {
    font-weight: 600;
    color: var(--text-primary, #e5e7eb);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.meta-upload-progress-pct {
    font-variant-numeric: tabular-nums;
    color: #7c5cfc;
    font-weight: 700;
    flex-shrink: 0;
}
.meta-upload-progress-bar {
    height: 6px;
    background: var(--bg-tertiary, #1a2230);
    border-radius: 999px;
    overflow: hidden;
}
.meta-upload-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c5cfc, #9b7ffe);
    transition: width 0.2s ease;
    border-radius: 999px;
}
.meta-upload-progress-stage {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
}

/* Issue-number chip in the edition table */
.meta-issue-chip {
    display: inline-block;
    background: rgba(124,92,252,0.18);
    color: #c8a8ff;
    border: 1px solid rgba(124,92,252,0.35);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}
.meta-uploaded-at {
    font-size: 11px;
    color: var(--text-muted, #4d6480);
    margin-left: 6px;
}

/* Recalibrate the edition table grid for the new "Issue + Date" column */
.meta-ed-thead, .meta-ed-trow {
    grid-template-columns: 90px 1fr 110px 1fr !important;
}

/* ═══════════════════════════════════════════════════════════════
   Numbering-mode toggle (Phase 22.4) — picker in the reader nav
   ═══════════════════════════════════════════════════════════════ */
.meta-numbering-toggle {
    display: inline-flex;
    border: 1px solid var(--border-primary, #374151);
    border-radius: 999px;
    overflow: hidden;
    font-size: 11px;
    margin-left: 8px;
}
.meta-numbering-toggle button {
    background: transparent;
    color: var(--text-muted, #9ca3af);
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.meta-numbering-toggle button:hover { color: var(--text-primary, #e5e7eb); }
.meta-numbering-toggle button.meta-on {
    background: rgba(124, 92, 252, 0.18);
    color: #c8a8ff;
}

/* Article-title chips (used in 'titles' or 'both' modes) — clickable nav */
.meta-title-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.meta-title-chip {
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--border-primary, #374151);
    color: var(--text-secondary, #cbd5e1);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.meta-title-chip:hover {
    background: rgba(124, 92, 252, 0.12);
    border-color: #7c5cfc;
    color: white;
}
.meta-title-chip.meta-active {
    background: rgba(124, 92, 252, 0.25);
    border-color: #7c5cfc;
    color: white;
    font-weight: 600;
}

/* Side column flows naturally — NO max-height + overflow-y here, because
   that traps mouse-wheel events inside the panel and the rest of the tab
   becomes un-scrollable. The whole tab scrolls as one. */
.meta-reader-side { display:flex; flex-direction:column; gap:14px; }
.meta-reader-section-title {
    font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color: var(--text-muted, #9ca3af); font-weight:700;
    border-bottom:1px solid var(--border-primary, #374151); padding-bottom:6px;
}

/* TOC */
.meta-toc { display:flex; flex-direction:column; gap:10px; }
.meta-toc-section { display:flex; flex-direction:column; gap:4px; }
.meta-toc-section-header {
    font-size:11px; font-weight:700; text-transform:uppercase;
    color: var(--text-muted, #9ca3af); padding:4px 0;
}
.meta-toc-item {
    display:flex; gap:8px; padding:6px 8px;
    border-radius:6px; cursor:pointer; font-size:13px;
    align-items:flex-start;
}
.meta-toc-item:hover { background: var(--bg-secondary, #1f2937); }
.meta-toc-item.meta-selected { background: rgba(124, 92, 252, 0.18); border-left:3px solid #7c5cfc; padding-left:5px; }
.meta-toc-page { color: var(--text-muted, #9ca3af); font-variant-numeric:tabular-nums; min-width:42px; }
.meta-toc-headline { color: var(--text-primary, #e5e7eb); flex:1; line-height:1.35; }
.meta-toc-headline-wrap { display:flex; flex-direction:column; gap:2px; flex:1; }
.meta-toc-dept { font-size:10px; text-transform:uppercase; color: var(--text-muted, #9ca3af); letter-spacing:0.06em; }

/* Article panel */
.meta-article-panel { font-size:14px; line-height:1.55; }
.meta-article-section { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-muted, #9ca3af); margin-bottom:4px; }
.meta-article-headline { margin:0 0 4px 0; font-size:18px; line-height:1.3; }
.meta-article-deck { font-size:13px; color: var(--text-secondary, #cbd5e1); font-style:italic; margin-bottom:6px; }
.meta-article-byline { font-size:12px; color: var(--text-muted, #9ca3af); margin-bottom:10px; }
.meta-article-controls { display:flex; gap:6px; margin-bottom:12px; }
.meta-article-body p { margin:0 0 0.8em 0; }
.meta-pullquote {
    margin:14px 0; padding:12px 16px;
    border-left:4px solid #7c5cfc;
    background: rgba(124, 92, 252, 0.08);
    font-size:15px; font-style:italic; line-height:1.4;
    color: var(--text-primary, #e5e7eb);
}

/* ─── Owned badge in storefront preview (Phase 16.3) ─────── */
.meta-owned-badge {
    display: inline-block;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: 8px;
}

/* ─── Voice-guided highlight pulse (Phase 15.2) ─────────────
   Applied by Hey Writz when user says "upload a newspaper" etc.
   The dropzone (or any target) scrolls into view + pulses for 6s. */
.meta-pulse-target {
    animation: meta-pulse-target 1.2s ease-in-out 0s 5;
    border-color: #7c5cfc !important;
    box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.25);
    position: relative;
}
.meta-pulse-target::after {
    content: '👆 Tap here to upload';
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #7c5cfc;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
@keyframes meta-pulse-target {
    0%, 100% { box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.25); }
    50%      { box-shadow: 0 0 0 14px rgba(124, 92, 252, 0); }
}

/* ─── Drag-and-drop upload zone (Phase 14) ─────────────── */
.meta-dropzone {
    margin: 14px 0 10px 0;
    padding: 28px 20px;
    border: 2px dashed var(--border-primary, #374151);
    border-radius: 10px;
    background: var(--bg-tertiary, #111827);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    user-select: none;
}
.meta-dropzone:hover {
    border-color: #7c5cfc;
    background: rgba(124, 92, 252, 0.06);
}
.meta-dropzone-hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.10) !important;
    border-style: solid;
}
.meta-dropzone-icon { font-size: 42px; margin-bottom: 8px; }
.meta-dropzone-text strong { font-size: 15px; color: var(--text-primary, #e5e7eb); }
.meta-dropzone-sub { font-size: 12px; color: var(--text-muted, #9ca3af); }
.meta-dropzone-btn {
    margin-top: 14px;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer !important;
    /* Pop the button visually so users can't miss it */
    box-shadow: 0 4px 12px rgba(124, 92, 252, 0.3);
}
.meta-dropzone-btn:hover {
    box-shadow: 0 6px 18px rgba(124, 92, 252, 0.5);
}

/* Make Read/Publish buttons feel clickable */
.meta-btn-action {
    cursor: pointer !important;
    pointer-events: auto !important;
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--border-primary, #374151);
    color: var(--text-primary, #e5e7eb) !important;
    padding: 5px 10px !important;
    border-radius: 6px;
    font-size: 12px;
    margin-left: 6px;
}
.meta-btn-action:hover {
    border-color: #7c5cfc;
    background: rgba(124, 92, 252, 0.12);
    color: white !important;
}
.meta-btn-action:disabled { opacity: 0.5; cursor: wait !important; }

.meta-row-pub-badge {
    display: inline-block;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* ─── Studio "Publish ▾" dropdown (Phase 13.2) ─────────────
   Collapses Newz + Zines into a single tab-bar dropdown so the
   Studio tab nav doesn't overflow with 12+ items. */
.meta-tab-dropdown {
    position: relative;
    display: inline-block;
}
.meta-tab-dropdown-trigger {
    /* Inherits .tab-btn — Studio's own styling does the heavy lifting */
}
.meta-tab-caret {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.7;
    transition: transform 0.18s;
}
.meta-tab-dropdown.meta-open .meta-tab-caret,
.meta-tab-dropdown:hover .meta-tab-caret {
    transform: rotate(180deg);
    opacity: 1;
}
/* Hover-bridge so menu doesn't disappear when traveling toward it */
.meta-tab-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 12px;
    background: transparent;
    display: none;
}
.meta-tab-dropdown:hover::after {
    display: block;
}
.meta-tab-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-secondary, #1f2937);
    border: 1px solid var(--border-primary, #374151);
    border-radius: 10px;
    padding: 6px;
    min-width: 220px;
    z-index: 9999;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.meta-tab-dropdown:hover .meta-tab-dropdown-menu,
.meta-tab-dropdown.meta-open .meta-tab-dropdown-menu {
    display: flex;
}
.meta-tab-dropdown-item {
    /* Use Studio's tab-btn look but lay out as a row */
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    border-radius: 6px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.meta-tab-dropdown-item:hover {
    background: var(--bg-tertiary, #111827);
}
.meta-tab-dropdown-item.active {
    background: rgba(124, 92, 252, 0.18);
    color: #c8a8ff !important;
}
.meta-tab-sub {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}
/* When Newz or Zines is the active tab, light up the parent Publish ▾ trigger */
.meta-tab-dropdown.meta-child-active .meta-tab-dropdown-trigger {
    color: #c8a8ff !important;
    background: rgba(124, 92, 252, 0.12) !important;
}

/* ─── Hey Writz mic indicator (in tab nav area) ───────────── */
.hw-mic-wrap {
    display:inline-flex; align-items:center; gap:8px;
    padding:4px 10px; margin-left:8px;
    background: var(--bg-tertiary, #111827);
    border:1px solid var(--border-primary, #374151);
    border-radius:20px; font-size:12px;
}
#hw-mic-dot {
    width:10px; height:10px; border-radius:50%;
    background:#555; transition: background 0.2s, box-shadow 0.2s;
    flex-shrink:0;
}
.meta-mic-pulse { animation: meta-pulse 1.5s ease-in-out infinite; }
@keyframes meta-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.72; }
}
#hw-mic-label { color: var(--text-muted, #9ca3af); min-width:72px; }
#hw-mic-toggle, #hw-type-btn, #hw-natural-toggle {
    background:none; border:none; cursor:pointer;
    font-size:14px; padding:0 4px; color: var(--text-primary, #e5e7eb);
    line-height:1;
    transition: color 0.18s;
}
#hw-mic-toggle:hover, #hw-type-btn:hover, #hw-natural-toggle:hover { color:#7c5cfc; }
/* Natural voice toggle — when active, gradient highlight to signal "richer voice" */
#hw-natural-toggle.hw-active {
    color: transparent;
    background-image: linear-gradient(90deg, #7c5cfc, #06b6d4);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 0 0 6px rgba(124, 92, 252, 0.5);
}