/* ==========================================================================
   FRAMEFUSION · AMETHYST CRYSTAL THEME
   A quiet, jewellery-clean purple layer that sits on top of the studio theme.
   It refines typography, retunes the neutral surfaces and gives filled and
   secondary controls a polished, light-catching crystal finish. Loaded last
   so it can gently correct the earlier theme layers without changing layout.
   ========================================================================== */

:root {
  /* Ink & text */
  --am-ink: #2b1c47;
  --am-ink-soft: #3a2a58;
  --am-body: #4c3a6b;
  --am-muted: #75658f;
  --am-subtle: #6f6089;
  --am-placeholder: #a899bf;

  /* Amethyst accents */
  --am-accent: #7c5ce6;
  --am-accent-bright: #a98bff;
  --am-accent-deep: #5b35bd;
  --am-accent-ink: #462779;
  --am-glow: rgba(124, 92, 230, 0.22);

  /* Lavender surfaces */
  --am-paper: #faf8ff;
  --am-paper-2: #f6f1ff;
  --am-lav-50: #fbf8ff;
  --am-lav-100: #f5eeff;
  --am-lav-200: #efe5ff;
  --am-lav-300: #e5d8fb;
  --am-line: #ebe2f7;
  --am-line-strong: #d9c7f1;

  /* Re-map the shared design tokens used across the app */
  --bg-app: var(--am-paper);
  --bg-sidebar: #fdfbff;
  --bg-main: transparent;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-pill-gray: #f4eefc;
  --bg-active-nav: #f2ecff;

  --border-sidebar: #f0e8fa;
  --border-card: #ebe2f7;
  --border-subtle: #f3edfb;
  --border-input: #e7ddf4;
  --border-input-focus: var(--am-accent);

  --text-main: var(--am-ink);
  --text-body: var(--am-body);
  --text-muted: var(--am-muted);
  --text-subtle: var(--am-subtle);
  --text-link: var(--am-accent);

  --blue-primary: var(--am-accent);
  --blue-hover: var(--am-accent-deep);
  --blue-soft-bg: #f2eaff;
  --blue-soft-border: #e1d2fa;
  --blue-soft-text: #6a44c8;

  --badge-multiplier-bg: #f3edff;
  --badge-multiplier-text: #6a46c9;
  --badge-multiplier-border: #e4d8fb;

  --badge-views-bg: #eee9ff;
  --badge-views-text: #5b42c4;
  --badge-views-border: #ddd2f8;

  --badge-eng-bg: #f8edff;
  --badge-eng-text: #8f49b8;
  --badge-eng-border: #eed9fa;

  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(52, 26, 94, 0.05);
  --shadow-card: 0 2px 10px -4px rgba(64, 32, 116, 0.10);
  --shadow-hover: 0 18px 38px -24px rgba(70, 34, 132, 0.42);
  --shadow-modal: 0 30px 90px -34px rgba(42, 18, 82, 0.48);
}

/* --------------------------------------------------------------------------
   BASE TYPE · a lighter, more exact editorial rhythm
   -------------------------------------------------------------------------- */

html {
  background: var(--am-paper);
}

html,
body {
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.58;
  letter-spacing: -0.006em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "cv11" 1;
}

body {
  background:
    radial-gradient(900px 560px at 88% -8%, #f2e7ff 0%, transparent 62%),
    radial-gradient(760px 520px at 0% 108%, #f8eeff 0%, transparent 58%),
    var(--am-paper);
  background-attachment: fixed;
}

.app-shell {
  background: transparent;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--am-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.22;
}

p, li, dd, dt, figcaption {
  line-height: 1.62;
}

::selection {
  background: #e3d2ff;
  color: #241435;
}

/* Crisp, amethyst focus ring everywhere */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #c4a6ff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   SIDEBAR · frosted porcelain with amethyst ink
   -------------------------------------------------------------------------- */

.app-sidebar {
  background: linear-gradient(180deg, #fffdfe 0%, #fcf8ff 100%);
  border-right-color: #f0e8fa;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.85);
}

.brand-title-text {
  color: var(--am-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}

.workspace-selector-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: #ece3f8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58, 28, 105, 0.04);
}

.workspace-selector-btn:hover {
  background: #f8f2ff !important;
  border-color: var(--am-line-strong) !important;
}

.ff-account-button {
  background: linear-gradient(120deg, #f7f0ff 0%, #fdf9ff 100%) !important;
  border-color: #ece2f8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px -6px rgba(74, 38, 140, 0.28);
}

.ff-account-button strong {
  color: var(--am-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ff-account-button span {
  color: var(--am-muted);
}

.nav-section-title,
.sidebar-section-heading {
  color: #9d8bb8;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.nav-link-item {
  color: var(--am-body);
  border-radius: 10px;
  font-weight: 500;
}

.nav-link-item:hover {
  background: #f7f1ff;
  color: var(--am-ink);
}

.nav-link-item.active {
  background: linear-gradient(100deg, #f1e8ff 0%, #faf6ff 100%);
  color: var(--am-accent-deep);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 230, 0.12), 0 1px 0 #fff;
}

.nav-link-item.active .nav-icon {
  color: var(--am-accent);
}

.nav-icon {
  opacity: 0.9;
}

.nav-badge-pill {
  background: #f1e7ff;
  color: var(--am-accent-deep);
  font-weight: 600;
}

.resource-link {
  color: var(--am-muted);
}

.resource-link:hover {
  background: #f7f1ff;
  color: var(--am-ink);
}

.sign-out-btn {
  color: #a84b7a;
}

.sign-out-btn:hover {
  background: #fdf2f8;
  color: #8d3562;
}

.btn-collapse-sidebar {
  color: var(--am-muted);
  border-radius: 8px;
}

.btn-collapse-sidebar:hover {
  background: #f7f1ff;
  border-color: var(--am-line);
  color: var(--am-ink);
}

/* --------------------------------------------------------------------------
   TOP BAR & PAGE HEADINGS
   -------------------------------------------------------------------------- */

.studio-topbar {
  border-bottom-color: #f0e9fa;
}

.studio-breadcrumb {
  color: var(--am-muted);
  letter-spacing: -0.004em;
}

.studio-breadcrumb span {
  color: #b9aacd;
}

.studio-breadcrumb strong {
  color: var(--am-ink);
  font-weight: 600;
}

.studio-assistant {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 242, 255, 0.86));
  border-color: #e8ddf5;
  color: var(--am-accent-deep);
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px -10px rgba(86, 44, 158, 0.4);
}

.studio-assistant:hover {
  border-color: #d3bcef;
  color: var(--am-accent);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(86, 44, 158, 0.48);
}

.studio-menu {
  color: var(--am-body);
  border-color: var(--am-line);
  background: rgba(255, 255, 255, 0.86);
}

.studio-eyebrow {
  color: var(--am-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.view-title {
  color: var(--am-ink);
  font-size: clamp(27px, 2.5vw, 35px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.16;
}

.view-subtitle {
  color: var(--am-muted);
  font-size: 13px;
  line-height: 1.68;
  letter-spacing: -0.003em;
}

/* --------------------------------------------------------------------------
   SEARCH / FILTER CHROME · light amethyst glass
   -------------------------------------------------------------------------- */

.search-controls-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(252, 249, 255, 0.92));
  border-color: #ece3f7;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -26px rgba(70, 35, 120, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.search-controls-row:focus-within {
  border-color: #cdb8ef;
  box-shadow: 0 0 0 4px rgba(124, 92, 230, 0.10), inset 0 1px 0 #fff,
              0 12px 32px -26px rgba(70, 35, 120, 0.55);
}

.search-field {
  color: var(--am-ink);
  letter-spacing: -0.004em;
}

.search-field::placeholder {
  color: var(--am-placeholder);
  opacity: 1;
}

.search-lens-icon,
.dropdown-arrow {
  color: #a495bd;
}

.btn-search-type {
  background: #f7f2ff;
  color: var(--am-body);
  border-color: transparent;
  font-weight: 500;
}

.btn-search-type:hover {
  background: #f1e9ff;
  color: var(--am-ink);
}

.search-type-option,
.filter-menu-option {
  color: var(--am-body);
  font-weight: 500;
}

.search-type-option:hover,
.filter-menu-option:hover {
  background: #f7f1ff;
  color: var(--am-ink);
}

.search-type-option.active,
.filter-menu-option.active {
  background: #f1e8ff;
  color: var(--am-accent-deep);
  font-weight: 600;
}

.search-type-menu,
.filter-dropdown-menu {
  background: linear-gradient(180deg, #ffffff 0%, #fdfaff 100%);
  border-color: #ece3f7;
  box-shadow: 0 24px 54px -30px rgba(60, 25, 110, 0.48), 0 2px 6px rgba(60, 25, 110, 0.05);
}

.filter-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 244, 255, 0.88));
  border-color: #eae1f6;
  color: var(--am-body);
  font-weight: 500;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58, 28, 105, 0.04);
}

.filter-chip:hover {
  background: #f8f2ff;
  border-color: #d7c4ef;
  color: var(--am-ink);
}

.filter-chip.active-pill {
  background: #f1e8ff;
  border-color: #dcc9f6;
  color: var(--am-accent-deep);
  font-weight: 600;
}

.btn-clear-filters {
  color: var(--am-body);
  font-weight: 500;
}

.btn-clear-filters:hover {
  color: var(--am-accent);
}

.videos-filter-sidebar {
  background: linear-gradient(180deg, #fffdfe, #fcf8ff);
  border-color: #ece3f7;
  box-shadow: 0 12px 34px -30px rgba(64, 32, 116, 0.4);
}

.filter-sidebar-title {
  color: var(--am-ink);
  font-weight: 600;
}

.filter-field-label {
  color: var(--am-muted);
  font-weight: 500;
}

.filter-range-input {
  color: var(--am-ink);
  border-color: var(--am-line);
  background: #fff;
}

.btn-sidebar-clear {
  color: var(--am-accent);
  font-weight: 600;
}

.btn-sidebar-clear:hover {
  color: var(--am-accent-deep);
}

.status-toggle-btn {
  color: var(--am-body);
  background: #fff;
  border-color: var(--am-line);
  font-weight: 500;
}

.status-toggle-btn.active {
  background: #f1e8ff;
  border-color: #dcc9f6;
  color: var(--am-accent-deep);
}

/* --------------------------------------------------------------------------
   VIDEO CARDS · porcelain cards + the light hover action tray
   -------------------------------------------------------------------------- */

.video-card-framefusion,
.video-card-portrait {
  background: #fff;
  border-color: #ece3f7;
  box-shadow: 0 2px 10px -4px rgba(64, 32, 116, 0.09);
}

.video-card-framefusion:hover,
.video-card-portrait:hover {
  border-color: #d6c3ef;
  box-shadow: 0 20px 42px -26px rgba(70, 34, 132, 0.46), 0 0 0 1px rgba(124, 92, 230, 0.10);
}

.card-thumbnail-container {
  background: #201433;
}

.card-body-content,
.video-card-info-bottom {
  background: transparent;
}

.card-video-title,
.video-card-title-text {
  color: var(--am-ink);
  font-weight: 600;
  letter-spacing: -0.014em;
}

.card-video-title:hover {
  color: var(--am-accent);
}

.card-author-meta,
.video-card-author-row {
  color: var(--am-muted);
}

.author-handle-pill {
  color: var(--am-body);
  font-weight: 600;
}

.upload-time-ago {
  color: var(--am-subtle);
  font-weight: 500;
}

.platform-indicator-badge,
.video-card-badge-top-right {
  background: rgba(28, 15, 48, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.metric-pill {
  border-radius: 7px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.metric-pill.multiplier,
.metric-pill-large.multiplier {
  background: var(--badge-multiplier-bg) !important;
  border-color: var(--badge-multiplier-border) !important;
  color: var(--badge-multiplier-text) !important;
}

.metric-pill.views,
.metric-pill-large.views {
  background: var(--badge-views-bg) !important;
  border-color: var(--badge-views-border) !important;
  color: var(--badge-views-text) !important;
}

.metric-pill.engagement,
.metric-pill-large.engagement {
  background: var(--badge-eng-bg) !important;
  border-color: var(--badge-eng-border) !important;
  color: var(--badge-eng-text) !important;
}

.card-hover-actions {
  z-index: 20;
}

/* The key legibility fix: hover actions become light frosted crystal with
   deep-purple ink, so they stay readable over any thumbnail. */
:is(.video-card-framefusion, .video-card-portrait) .card-thumbnail-container .card-hover-actions .btn-card-quick {
  background: linear-gradient(180deg, rgba(255, 253, 255, 0.97) 0%, rgba(244, 236, 255, 0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  color: #3a2263 !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(102, 66, 162, 0.16),
    0 6px 18px rgba(20, 7, 42, 0.34),
    0 0 0 1px rgba(70, 35, 120, 0.13) !important;
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  text-shadow: none;
}

:is(.video-card-framefusion, .video-card-portrait) .card-thumbnail-container .card-hover-actions .btn-card-quick svg {
  opacity: 0.95;
}

:is(.video-card-framefusion, .video-card-portrait) .card-thumbnail-container .card-hover-actions .btn-card-quick:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ece0ff 100%) !important;
  border-color: #fff !important;
  color: var(--am-accent-deep) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 9px 22px rgba(20, 7, 42, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.55) !important;
  transform: translateY(-1px) scale(1.015);
}

:is(.video-card-framefusion, .video-card-portrait) .card-thumbnail-container .card-hover-actions .btn-card-quick:active {
  transform: translateY(0) scale(0.985);
}

/* Portrait-card overlay action gets the same light treatment */
.video-card-hover-overlay {
  background: linear-gradient(180deg, rgba(28, 14, 48, 0.16), rgba(24, 12, 42, 0.52));
}

.btn-card-overlay-action {
  background: linear-gradient(180deg, rgba(255, 253, 255, 0.98), rgba(244, 236, 255, 0.94));
  color: #3a2263;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(20, 7, 42, 0.34);
}

.btn-card-overlay-action:hover {
  color: var(--am-accent-deep);
  background: #fff;
}

/* --------------------------------------------------------------------------
   SECONDARY CRYSTAL CONTROLS
   The gloss is painted as a background-image so it layers over any existing
   solid or semantic button colour without flattening it.
   -------------------------------------------------------------------------- */

:is(.btn-card-quick:not(.studio-action-gloss),
    .btn-script-action,
    .btn-search-type,
    .filter-chip,
    .btn-utility-icon,
    .ideas-tab-pill-btn:not(.active),
    .script-step-tab:not(.active),
    .status-toggle-btn:not(.active),
    .btn-collapse-sidebar,
    .modal-close-btn,
    .btn-bubble-action,
    .btn-card-action-modern,
    .btn-gap-add-url,
    .ff-secondary,
    .drawer-close-btn,
    .agent-preset-btn,
    .agent-subtab-btn:not(.active),
    .preset-prompt-chip,
    .btn-delete-project,
    .btn-vault-row-del,
    .metadata-retry) {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 1.8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.26) 36%, rgba(232, 217, 255, 0.2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(92, 60, 150, 0.05),
    inset 0 -1px 0 rgba(92, 60, 150, 0.12),
    0 1px 2px rgba(60, 30, 110, 0.07) !important;
  font-family: var(--font-sans);
  transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, color 0.2s ease;
}

:is(.btn-card-quick:not(.studio-action-gloss),
    .btn-script-action,
    .btn-search-type,
    .filter-chip,
    .btn-utility-icon,
    .ideas-tab-pill-btn:not(.active),
    .script-step-tab:not(.active),
    .status-toggle-btn:not(.active),
    .btn-collapse-sidebar,
    .modal-close-btn,
    .btn-bubble-action,
    .btn-card-action-modern,
    .btn-gap-add-url,
    .ff-secondary,
    .drawer-close-btn,
    .agent-preset-btn,
    .agent-subtab-btn:not(.active),
    .preset-prompt-chip,
    .btn-delete-project,
    .btn-vault-row-del,
    .metadata-retry):hover:not(:disabled) {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 1) 0 0.65px, transparent 1.9px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(226, 207, 255, 0.38) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 1px 0 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(92, 60, 150, 0.14),
    0 6px 16px -8px rgba(80, 40, 150, 0.38),
    0 0 0 1px rgba(155, 124, 240, 0.12) !important;
  transform: translateY(-1px);
}

/* Base card-quick button: light pearl rather than the old charcoal chip */
.btn-card-quick {
  background-color: rgba(255, 252, 255, 0.82);
  color: var(--am-body);
  border-color: var(--am-line);
  font-weight: 600;
  letter-spacing: 0;
}

.btn-card-quick:hover:not(.studio-action-gloss) {
  background-color: #f6efff !important;
  border-color: var(--am-line-strong) !important;
  color: var(--am-accent-deep) !important;
}

/* Script-studio buttons carry very assertive rules in the base sheet */
.btn-script-action,
#tab-scripts .btn-card-quick:not(.studio-action-gloss),
.script-step-content .btn-card-quick:not(.studio-action-gloss),
.script-lines-container .btn-card-quick:not(.studio-action-gloss),
#script-remix-breakdown-container .btn-card-quick:not(.studio-action-gloss),
.gap-concept-btn-copy,
.gap-concept-btn-teleprompter {
  background-color: #fff !important;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 0.6px, transparent 1.8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.28) 38%, rgba(232, 217, 255, 0.22) 100%) !important;
  border-color: var(--am-line) !important;
  color: var(--am-body) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(92, 60, 150, 0.10),
    0 1px 2px rgba(60, 30, 110, 0.06) !important;
}

.btn-script-action:hover,
#tab-scripts .btn-card-quick:not(.studio-action-gloss):hover,
.script-step-content .btn-card-quick:not(.studio-action-gloss):hover,
.script-lines-container .btn-card-quick:not(.studio-action-gloss):hover,
#script-remix-breakdown-container .btn-card-quick:not(.studio-action-gloss):hover,
.gap-concept-btn-copy:hover,
.gap-concept-btn-teleprompter:hover {
  background-color: #f7f1ff !important;
  border-color: var(--am-line-strong) !important;
  color: var(--am-ink) !important;
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px -8px rgba(80, 40, 150, 0.32) !important;
}

.btn-script-action-danger {
  background-color: #fff6fa !important;
  border-color: #f4c9dc !important;
  color: #a83264 !important;
}

.btn-script-action-danger:hover {
  background-color: #ffeef5 !important;
  border-color: #eaa8c4 !important;
  color: #8d2855 !important;
}

.btn-delete-project:hover,
.btn-vault-row-del:hover {
  color: #a83264 !important;
}

.btn-gap-add-url:hover {
  border-color: #c9b1ef !important;
  color: var(--am-accent-deep) !important;
  background-color: #f7f1ff !important;
}

/* Tabs and pill toggles that are “on” become polished amethyst crystals */
.ideas-tab-pill-btn.active,
:is(.ideas-tab-pill-btn, .script-step-tab, .tab-btn, .agent-subtab-btn).active {
  background: linear-gradient(152deg, #a98bff 0%, #8a63eb 38%, #6f48d6 72%, #5b35bd 100%) !important;
  background-image:
    radial-gradient(circle at 18% 24%, #fff 0 0.8px, transparent 2.2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 40%, transparent 54%),
    linear-gradient(152deg, #a98bff 0%, #8a63eb 38%, #6f48d6 72%, #5b35bd 100%) !important;
  border-color: #b79aff !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(45, 18, 94, 0.35),
    0 4px 12px -5px rgba(92, 52, 190, 0.55) !important;
  text-shadow: 0 1px 1px rgba(45, 18, 94, 0.35);
}

.ideas-tab-pill-btn.active:hover,
:is(.ideas-tab-pill-btn, .script-step-tab, .tab-btn, .agent-subtab-btn).active:hover {
  background-image:
    radial-gradient(circle at 18% 24%, #fff 0 0.8px, transparent 2.2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.16) 40%, transparent 54%),
    linear-gradient(152deg, #a98bff 0%, #8a63eb 38%, #6f48d6 72%, #5b35bd 100%) !important;
  border-color: #c4a6ff !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(45, 18, 94, 0.35),
    0 7px 16px -6px rgba(92, 52, 190, 0.6) !important;
  filter: brightness(1.06);
}

/* Dark floating / preset controls become soft amethyst glass too */
.mentor-presets button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 239, 255, 0.9)) !important;
  border-color: #e6daf6 !important;
  color: var(--am-ink) !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px -10px rgba(86, 44, 158, 0.4) !important;
}

.mentor-presets button:hover {
  border-color: #cdb6ee !important;
  background: #f9f3ff !important;
  color: var(--am-accent-deep) !important;
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.form-input-modern,
.filter-range-input,
.agent-text-input,
.script-chat-input,
.idea-notes-textarea,
.ff-chat-form textarea {
  color: var(--am-ink);
  background: #fff;
  border-color: var(--am-line);
  caret-color: var(--am-accent);
}

.form-input-modern::placeholder,
.agent-text-input::placeholder,
.script-chat-input::placeholder,
.idea-notes-textarea::placeholder,
.ff-chat-form textarea::placeholder {
  color: var(--am-placeholder);
  opacity: 1;
}

.form-input-modern:focus,
.filter-range-input:focus,
.agent-text-input:focus,
.script-chat-input:focus,
.idea-notes-textarea:focus,
.ff-chat-form textarea:focus {
  border-color: #c4a6ff;
  box-shadow: 0 0 0 4px rgba(124, 92, 230, 0.11);
}

.form-group-modern label,
.idea-notes-label {
  color: var(--am-body);
  font-weight: 600;
  letter-spacing: -0.004em;
}

/* --------------------------------------------------------------------------
   SURFACES · IDEAS, COLLECTIONS, AGENT & SCRIPT PANELS
   -------------------------------------------------------------------------- */

.idea-item-card,
.idea-detail-container,
.content-card-box,
.lego-brick-card,
.project-card,
.creator-channel-card,
.automation-card-rule,
.chapter-act-card,
.agent-kpi-card,
.subagent-card,
.vector-memory-card,
.hook-card-item,
.script-step-content,
.script-lines-container,
.remix-controls-panel,
.remix-preview-panel {
  background-color: #fff;
  border-color: var(--am-line);
}

.idea-item-card:hover,
.project-card:hover,
.creator-channel-card:hover,
.chapter-act-card:hover,
.lego-brick-card:hover {
  border-color: #d8c5f0;
  box-shadow: 0 16px 34px -24px rgba(70, 34, 132, 0.4);
}

.idea-item-card.active {
  background: #f6efff;
  border-color: #c9b1ef;
  box-shadow: 0 0 0 1px rgba(124, 92, 230, 0.35);
}

.idea-item-title,
.idea-card-title,
.lego-brick-title,
.idea-main-title,
.agent-sidebar-title,
.agent-title-group h3,
.box-title,
.project-card-title,
.creator-name-text,
.automation-rule-title,
.subagent-title {
  color: var(--am-ink);
  letter-spacing: -0.016em;
}

.box-title,
.modal-title,
.agent-title-group h3 {
  font-weight: 600;
}

.box-description,
.agent-title-group p,
.project-card-desc,
.creator-subs-text,
.idea-card-meta-line,
.automation-rule-criteria,
.agent-kpi-label,
.agent-kpi-sub,
.prompt-category-label,
.idea-main-summary,
.subagent-desc {
  color: var(--am-muted);
}

.idea-item-title,
.idea-main-title,
.project-card-title {
  font-weight: 600;
}

.idea-notes-label,
.prompt-category-label {
  letter-spacing: 0.01em;
}

.script-lines-container {
  background: linear-gradient(180deg, #fdfbff, #faf7ff);
  color: var(--am-ink-soft);
  line-height: 1.78;
  letter-spacing: -0.005em;
}

.agent-execution-box {
  background: #241638;
  border-color: #3a2657;
  color: #eadff8;
  box-shadow: 0 10px 30px -20px rgba(30, 12, 55, 0.7);
}

.chat-bubble.user .bubble-content {
  background: linear-gradient(135deg, #8a63eb, #6642cd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px -8px rgba(80, 40, 150, 0.5);
}

.chat-bubble.assistant .bubble-content {
  background: #faf7ff;
  border: 1px solid #f0e7fb;
}

/* --------------------------------------------------------------------------
   MODALS, MENUS, TOASTS, CHAT
   -------------------------------------------------------------------------- */

.modal-window,
.ff-dialog {
  background: linear-gradient(180deg, #ffffff 0%, #fdfaff 100%);
  border-color: #eee5fa;
  box-shadow: 0 30px 90px -34px rgba(42, 18, 82, 0.5);
}

.modal-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: #f2ecfa;
  backdrop-filter: blur(8px);
}

.modal-title {
  color: var(--am-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal-backdrop {
  background: rgba(35, 18, 61, 0.42);
  backdrop-filter: blur(5px);
}

.modal-close-btn {
  color: var(--am-muted);
  border-radius: 8px;
}

.modal-close-btn:hover {
  background: #f7f1ff;
  color: var(--am-ink);
}

.ff-dialog::backdrop {
  background: rgba(35, 18, 61, 0.42);
  backdrop-filter: blur(7px);
}

.ff-chat {
  border-color: #ebe1f8;
  box-shadow: 0 28px 80px -30px rgba(42, 18, 82, 0.5);
}

.ff-chat-header {
  background: linear-gradient(120deg, #f8f2ff, #fdfaff);
  border-bottom-color: #f2ebfb;
}

.ff-chat-message.user {
  background: linear-gradient(135deg, #8a63eb, #6642cd);
  color: #fff;
}

.ff-chat-message.assistant {
  background: #faf7ff;
}

.ff-chat-launcher {
  background: linear-gradient(180deg, #fffdfe, #f8f2ff);
  color: var(--am-accent-deep);
  border-color: #e7dcf5;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -16px rgba(74, 38, 140, 0.35);
}

.ff-chat-launcher span {
  background: #f1e8ff;
  color: var(--am-accent-deep);
}

.floating-copilot-trigger {
  background: linear-gradient(152deg, #a98bff, #7a53de 62%, #5b35bd);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 28px -10px rgba(92, 52, 190, 0.6);
}

.toast {
  background: linear-gradient(152deg, #3a2a58, #2b1c47);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 30px -14px rgba(30, 12, 55, 0.6);
}

.ff-plan-card.pro {
  background: linear-gradient(140deg, #f7f1ff, #fdfaff);
  border-color: #d4c4f2;
}

.ff-price,
.ff-price strong {
  color: var(--am-ink);
}

/* --------------------------------------------------------------------------
   TABLES, EMPTY STATES, SMALL DETAILS
   -------------------------------------------------------------------------- */

.channels-table th {
  color: var(--am-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.channels-table td {
  color: var(--am-body);
}

.studio-empty {
  background: rgba(255, 255, 255, 0.7);
  border-color: #e7dcf4;
}

.studio-empty h2 {
  color: var(--am-ink);
  font-weight: 600;
  letter-spacing: -0.022em;
}

.studio-empty p {
  color: var(--am-muted);
  line-height: 1.75;
}

.studio-empty button {
  color: var(--am-accent-deep);
  border-color: #e4d8f5;
}

.loading-state {
  color: var(--am-muted);
}

.teleprompter-overlay {
  background: #100a1c;
}

.teleprompter-hud {
  background: #1c1230;
  border-bottom-color: #2b1d44;
}

/* Tasteful amethyst scrollbars in the scrolling content areas */
.app-main,
.ideas-list-column,
.agent-react-feed,
textarea,
.script-lines-container {
  scrollbar-color: #cdbcf0 transparent;
}

.app-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 230, 0.28);
}

.app-sidebar:hover::-webkit-scrollbar-thumb:hover,
.ideas-list-column::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 92, 230, 0.46);
}

/* Keep motion preferences intact */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}