/* ==========================================================================
   Kiln — Global Stylesheet
   One file for the entire app. Every screen (auth, admin, dashboard) should
   pull from this same set of tokens and components rather than introducing
   page-specific CSS files.
   ========================================================================== */

:root {
  /* Color */
  --bg: #15140f;
  --surface: #1c1b15;
  --surface-raised: #22211a;
  --ink: #f5f1e8;
  --ink-dim: #b8b3a6;
  --ink-faint: #7a766a;
  --ember: #ff6b35;
  --ember-soft: #ffb088;
  --slate: #3a4a4a;
  --slate-line: #2b322f;
  --hairline: rgba(245, 241, 232, 0.1);
  --danger: #f5487b;
  --success: #6fcf97;

  /* Type */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Shape & motion */
  --radius: 8px;
  --radius-sm: 6px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

button, input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Visible keyboard focus everywhere, no exceptions */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------- Layout shell ---------- */

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  background: var(--bg);
  overflow: hidden;
  border-right: 1px solid var(--hairline);
}

.brand-panel__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.brand-panel__glow::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 107, 53, 0.55) 0%,
    rgba(255, 107, 53, 0.22) 32%,
    rgba(255, 107, 53, 0.06) 55%,
    transparent 70%);
  animation: kiln-breathe 7s ease-in-out infinite;
}

@keyframes kiln-breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.brand-panel__top,
.brand-panel__bottom {
  position: relative;
  z-index: 1;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.logo__mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.logo__word {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-panel__headline {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 20ch;
}

.brand-panel__subtext {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: var(--ink-dim);
  max-width: 34ch;
  line-height: 1.6;
}

.brand-panel__footnote {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: 3rem 2rem;
}

.form-card {
  width: 100%;
  max-width: 380px;
}

.form-card__eyebrow-link {
  display: block;
  margin-bottom: 2.5rem;
}

.form-card h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.form-card__lede {
  margin-top: 0.5rem;
  color: var(--ink-dim);
  font-size: 0.9375rem;
}

.form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.field__help {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.field a {
  font-size: 0.8125rem;
  color: var(--ember-soft);
}

.field a:hover { color: var(--ember); }

.input {
  width: 100%;
  padding: 0.7rem 0.1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--slate-line);
  color: var(--ink);
  transition: border-color 0.15s var(--ease);
}

.input::placeholder { color: var(--ink-faint); }

.input:hover { border-bottom-color: var(--ink-faint); }

.input:focus {
  border-bottom-color: var(--ember);
  outline: none;
}

.input.has-error { border-bottom-color: var(--danger); }

.field__error {
  font-size: 0.8125rem;
  color: var(--danger);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--ink-dim);
}

.checkbox-row a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--slate-line);
  text-underline-offset: 2px;
}

/* ---------- Custom checkbox — applies to every checkbox in the app,
   not just .checkbox-row, since they're all the same native input
   element. No blade template changes needed anywhere this renders. ---------- */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--slate-line);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}

input[type="checkbox"]:hover {
  border-color: var(--ember);
}

input[type="checkbox"]:active {
  transform: scale(0.92);
}

input[type="checkbox"]:checked {
  background: var(--ember);
  border-color: var(--ember);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ember-soft);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.05s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ember);
  color: #1a1108;
}

.btn--primary:hover { background: #ff7d4f; }

.btn--ghost {
  background: transparent;
  border-color: var(--slate-line);
  color: var(--ink);
}

.btn--ghost:hover { border-color: var(--ink-faint); }

.btn__icon {
  width: 18px;
  height: 18px;
  margin-right: 0.6rem;
  flex-shrink: 0;
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--slate-line);
}

.form-card__footer {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--ink-dim);
}

.form-card__footer a {
  color: var(--ember-soft);
  font-weight: 500;
}

.form-card__footer a:hover { color: var(--ember); }

.banner {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(111, 207, 151, 0.1);
  border: 1px solid rgba(111, 207, 151, 0.3);
  color: var(--success);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.banner--error {
  background: rgba(245, 72, 123, 0.1);
  border-color: rgba(245, 72, 123, 0.3);
  color: var(--danger);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .brand-panel {
    padding: 2rem;
    min-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }

  .brand-panel__glow::before {
    width: 420px;
    height: 420px;
  }

  .brand-panel__headline {
    font-size: 1.75rem;
  }

  .brand-panel__subtext {
    display: none;
  }

  .brand-panel__bottom {
    display: none;
  }

  .form-panel {
    padding: 2.5rem 1.5rem;
  }
}
/* ==========================================================================
   App shell — sidebar + main content (dashboard and beyond)
   Append this into the same app.css used by the auth flow. Same tokens,
   same file — no separate stylesheet for this section of the app.
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  padding: 1.5rem 1.25rem;
}

.sidebar__top {
  margin-bottom: 2rem;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
}

.nav-group {
  margin-bottom: 1.75rem;
}

.nav-group__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
  padding: 0 0.6rem;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--ink-dim);
  cursor: pointer;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--surface-raised);
}

.nav-link.is-active {
  color: var(--ember-soft);
  background: var(--surface-raised);
  font-weight: 600;
  border-left: 2px solid var(--ember);
  padding-left: calc(0.6rem - 2px);
}

.nav-link.is-disabled {
  color: var(--ink-faint);
  cursor: default;
}

.nav-link.is-disabled:hover {
  background: transparent;
  color: var(--ink-faint);
}

.nav-link__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.nav-link__label i {
  font-size: 0.9rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge {
  font-size: 0.6875rem;
  font-style: normal;
  color: var(--ink-faint);
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.sidebar__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.credit-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.credit-pill__label {
  color: var(--ink-faint);
}

.credit-pill__value {
  color: var(--ember-soft);
  font-weight: 600;
}

.user-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.user-menu__name {
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__logout {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
  font-size: 0.8125rem;
}

.user-menu__logout:hover {
  color: var(--ember-soft);
}

.app-main {
  background: var(--surface);
  overflow-y: auto;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 3rem 2.5rem;
}

.page__header {
  margin-bottom: 2rem;
}

.page__greeting {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page__subtext {
  margin-top: 0.4rem;
  color: var(--ink-dim);
  font-size: 0.9375rem;
}

.page__section {
  margin-top: 2.5rem;
}

.section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}

.studio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.studio-card__label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.studio-card.is-disabled {
  opacity: 0.55;
}

.empty-state {
  padding: 2rem;
  border: 1px dashed var(--slate-line);
  border-radius: var(--radius);
  text-align: left;
  color: var(--ink-dim);
  font-size: 0.9375rem;
}

.empty-state__hint {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.flash-banner-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.5rem 2.5rem 0;
}

@media (max-width: 991.98px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar:not(.offcanvas-lg) {
    display: none; /* plain (non-offcanvas) sidebars still just hide below this width */
  }

  .studio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page {
    padding: 2rem 1.25rem;
  }
}
/* ==========================================================================
   Admin panel — tables, badges, detail panels
   Append into the same app.css. Same tokens, no new stylesheet.
   ========================================================================== */

.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-dim);
}

.back-link:hover {
  color: var(--ink);
}

/* Bootstrap's own .table-responsive utility provides the actual
   overflow-x: auto + touch-scrolling behavior — no need to
   reimplement it. This just layers visual polish on top of it. */
.table-responsive {
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
}

.table {
  /* Bootstrap's .table component sets cell background/color/border via
     its own CSS custom properties (--bs-table-bg defaults to
     var(--bs-body-bg), which is white) rather than a plain declaration
     we could simply out-cascade by loading later. Overriding the
     variables themselves is the correct fix — it flows straight into
     Bootstrap's own rule instead of fighting its selector specificity. */
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-dim);
  --bs-table-border-color: var(--hairline);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.015);
  --bs-table-hover-bg: var(--surface-raised);
  --bs-table-hover-color: var(--ink);
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-raised);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-line);
  white-space: nowrap;
}

.table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-dim);
}

.table tbody tr {
  transition: background 0.12s var(--ease);
}

.table tbody tr:nth-child(even) {
  background: var(--bs-table-striped-bg);
}

.table td a {
  color: var(--ink);
  font-weight: 500;
}

.table td a:hover {
  color: var(--ember-soft);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--slate-line);
  color: var(--ink-dim);
}

.badge--success {
  border-color: rgba(111, 207, 151, 0.35);
  color: var(--success);
}

.badge--ember {
  border-color: rgba(255, 107, 53, 0.35);
  color: var(--ember-soft);
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pagination-bar__status {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.btn--sm {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.panel {
  padding: 1.5rem;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.kv-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 320px;
}

.kv-list__row dt {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.kv-list__row dd {
  margin: 0;
  font-size: 0.9rem;
}

.kv-list__emphasis {
  color: var(--ember-soft);
  font-weight: 600;
  font-size: 1.1rem;
}
/* ==========================================================================
   Providers module — small additions
   Append into the same app.css.
   ========================================================================== */

.textarea {
  resize: vertical;
  min-height: 4rem;
  font-family: inherit;
  line-height: 1.55;
}

.page__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
/* ==========================================================================
   Bootstrap integration — layout restructure, header, offcanvas theming,
   and Bootstrap component overrides so they match the rest of the app
   instead of Bootstrap's own light-theme defaults.
   Append into the same app.css, AFTER the Bootstrap CDN <link> in the
   layout (Bootstrap loads first in HTML so this file's rules win on any
   class-name collision).
   ========================================================================== */

/* ---------- Layout: header + main stacked in the right column ---------- */

.app-main-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--surface);
}

.app-main-wrap .app-main {
  flex: 1;
}

/* ---------- Sidebar as a Bootstrap offcanvas-lg panel ---------- */

.sidebar.offcanvas-lg {
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: var(--bg);
  --bs-offcanvas-color: var(--ink);
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  /* The base .sidebar rule above (shared with the plain, non-offcanvas
     user-app sidebar) sets padding directly on .sidebar itself. Here
     that same element also wraps an .offcanvas-body/.sidebar__body
     child that carries its own padding — without this override, admin
     gets that padding applied twice (outer + inner) and ends up with
     a visibly oversized inset compared to the user-app sidebar. */
  padding: 0;
}

.sidebar .offcanvas-header {
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 1.25rem;
}

/* Bootstrap's own offcanvas-lg rule for min-width: 992px deliberately
   sets background-color: transparent !important and zeroes out the
   body's padding/flex-grow/overflow — that's correct for Bootstrap's
   intended use case (an offcanvas that becomes an inline, chrome-less
   toolbar on desktop) but wrong for ours, where the sidebar should
   look identical whether it's the mobile drawer or the static desktop
   column. This is what caused it to render "distorted" — transparent
   background blending into the page, no padding, collapsed flex — on
   desktop specifically, while mobile (which Bootstrap doesn't touch
   this way) looked correct. Beating Bootstrap's !important requires
   our own !important here; there's no lower-specificity way to win.
   Same fix must live in your live app.css after Bootstrap's CSS. */
@media (min-width: 992px) {
  .sidebar.offcanvas-lg {
    background-color: var(--bg) !important;
  }

  .sidebar.offcanvas-lg .offcanvas-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
    padding: 1.5rem 1.25rem !important;
    overflow-y: auto !important;
  }
}

.sidebar__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
}

.sidebar-divider {
  border: none;
  height: 1px;
  margin: 1.25rem 0;
  background: linear-gradient(to right, transparent, var(--slate-line) 50%, transparent);
  opacity: 1;
}

/* ---------- Header / topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  font-size: 1.1rem;
  cursor: pointer;
  position: relative;
}

.topbar__icon-btn:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

.topbar__notif-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
}

.topbar__search {
  position: relative;
  max-width: 360px;
  width: 100%;
}

.topbar__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 0.875rem;
  pointer-events: none;
}

.topbar__search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.875rem;
}

.topbar__search-input::placeholder {
  color: var(--ink-faint);
}

.topbar__search-input:focus {
  outline: none;
  border-color: var(--ember);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.topbar__plan-badge {
  white-space: nowrap;
}

.topbar__profile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  color: var(--ink);
}

.topbar__profile:hover {
  background: var(--surface-raised);
}

.topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ember);
  color: #1a1108;
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
}

.topbar__profile-name {
  font-size: 0.875rem;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Bootstrap dropdown menu, re-themed ---------- */

.topbar-dropdown {
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  padding: 0.4rem;
  min-width: 220px;
}

.topbar-dropdown .dropdown-header {
  color: var(--ink-faint);
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem 0.2rem;
}

.topbar-dropdown .dropdown-item-text {
  color: var(--ink-dim);
  font-size: 0.875rem;
  padding: 0.3rem 0.6rem;
}

.topbar-dropdown__email {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.topbar-dropdown .dropdown-divider {
  border-color: var(--slate-line);
  margin: 0.4rem 0;
}

.topbar-dropdown .dropdown-item {
  color: var(--ink-dim);
  font-size: 0.875rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.topbar-dropdown .dropdown-item:hover,
.topbar-dropdown .dropdown-item:focus {
  background: var(--surface);
  color: var(--ink);
}

.topbar-dropdown__empty {
  color: var(--ink-faint);
  font-size: 0.8125rem;
}

/* ---------- Fix: <select> rendering with a white native background ----------
   The browser's default UA styling gives a <select> a solid white
   background regardless of our .input rule's "transparent" background,
   which is why the (light) text color read as barely-visible "greyed
   out" text on white. Fixing this needs an explicit background-color,
   not transparent, plus a custom arrow since appearance:none removes
   the native one. Targets any <select class="input">, current and
   future, with no markup changes required. */

select.input {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b8b3a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 14px;
  padding-right: 1.75rem;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-sm);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  padding-left: 0.6rem;
}

/* Chrome/Firefox respect option styling; Safari mostly ignores it and
   falls back to the OS-native list — this covers the majority case. */
select.input option {
  background-color: var(--surface-raised);
  color: var(--ink);
}

@media (max-width: 991.98px) {
  .topbar__plan-badge {
    display: none; /* keeps the mobile header from wrapping/crowding */
  }
}
/* ==========================================================================
   Copy Studio — editor + context menu
   ========================================================================== */

.copy-studio-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2rem;
  align-items: start;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.editor-toolbar__label {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.editor-surface {
  min-height: 420px;
  padding: 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.7;
  outline: none;
}

.editor-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
}

.editor-surface:focus {
  border-color: var(--ember);
}

.context-menu {
  position: fixed;
  z-index: 60;
  min-width: 200px;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  padding: 0.35rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.context-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: 0.875rem;
  cursor: pointer;
}

.context-menu__item:hover {
  background: var(--surface);
  color: var(--ink);
}

.context-menu__item--back {
  color: var(--ink-faint);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0.25rem;
  border-radius: 0;
}

.editor-loading {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

@media (max-width: 991.98px) {
  .copy-studio-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   User app — mobile-only topbar strip (just the sidebar toggle + logo,
   not the full admin header — this app has no header at all otherwise)
   ========================================================================== */

.mobile-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}

/* ==========================================================================
   Copy Studio — formatting toolbar + generation-settings strip
   ========================================================================== */

.editor-toolbar__formats {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  margin-left: 1rem;
}

.editor-toolbar__formats button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.9rem;
}

.editor-toolbar__formats button:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

.editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.editor-meta__item {
  font-size: 0.75rem;
  color: var(--ink-faint);
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* ==========================================================================
   Documents vault — filter tabs, row actions
   ========================================================================== */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--slate-line);
  background: transparent;
  color: var(--ink-dim);
  font-size: 0.875rem;
  cursor: pointer;
}

.tab:hover {
  color: var(--ink);
}

.tab.is-active {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--ember);
}

.tab.is-disabled {
  opacity: 0.5;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

/* ==========================================================================
   Documents vault — folders, breadcrumbs, drag-and-drop
   ========================================================================== */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.breadcrumbs__item {
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
}

.breadcrumbs__item:hover {
  color: var(--ink);
}

.breadcrumbs__item.is-current {
  color: var(--ink);
  font-weight: 500;
  cursor: default;
}

.breadcrumbs__sep {
  color: var(--ink-faint);
}

.new-folder-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  max-width: 420px;
}

.new-folder-form .input {
  flex: 1;
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.folder-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.folder-card__icon {
  font-size: 1.5rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.folder-card__body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.folder-card__name {
  font-size: 0.9375rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-card__count {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* Shared drag-over highlight — used by folder cards and breadcrumb
   items alike, since both are valid drop targets for moving a
   document. */
.is-drag-over {
  border-color: var(--ember) !important;
  background: rgba(255, 107, 53, 0.08) !important;
}

.breadcrumbs__item.is-drag-over {
  background: rgba(255, 107, 53, 0.15) !important;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Documents vault — bulk selection bar
   ========================================================================== */

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.bulk-bar__count {
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 500;
  margin-right: 0.25rem;
}

.bulk-bar__danger {
  color: var(--danger);
  border-color: rgba(245, 72, 123, 0.35);
}

.bulk-bar__danger:hover {
  border-color: var(--danger);
}

.bulk-bar__clear {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  cursor: pointer;
}

.bulk-bar__clear:hover {
  color: var(--ink);
}

/* ==========================================================================
   AI Assistants — picker cards
   ========================================================================== */

.assistant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.assistant-card {
  position: relative;
}

.assistant-card__favorite {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ink-faint);
  cursor: pointer;
}

.assistant-card__favorite:hover {
  background: var(--surface);
  color: var(--ember);
}

.assistant-card__favorite .bi-star-fill {
  color: var(--ember);
}

.assistant-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 1.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}

.assistant-card__body:hover {
  border-color: var(--ember);
}

.assistant-card__icon {
  font-size: 1.75rem;
}

.assistant-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  padding-right: 1.5rem; /* keeps the title from running under the star */
}

.assistant-card__description {
  font-size: 0.8125rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ==========================================================================
   AI Assistants — chat interface
   Deliberately bypasses the standard .page wrapper (max-width, padding)
   since a chat UI needs to fill available height, not sit in a
   constrained content column.

   Height/scroll fix: every element in the flex chain down to
   .chat-messages needs min-height: 0 — without it, a flex item won't
   shrink below its content's natural size, so a long message list
   just grows .chat-main/.chat-shell taller instead of letting
   .chat-messages scroll internally, which pushes the whole page into
   scrolling. The wrapper also fixes total height to exactly one
   viewport (header + shell together), rather than each independently
   claiming 100vh and doubling up.
   ========================================================================== */

.chat-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-page-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 2.5rem 1rem;
}

.chat-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.chat-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem;
}

.chat-sidebar__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.chat-sidebar__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chat-sidebar__item {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}

.chat-sidebar__item:hover {
  background: var(--surface-raised);
}

.chat-sidebar__item.is-active {
  background: var(--surface-raised);
  border-left-color: var(--ember);
}

.chat-sidebar__item-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem;
  color: var(--ink-dim);
}

.chat-sidebar__item:hover .chat-sidebar__item-link,
.chat-sidebar__item.is-active .chat-sidebar__item-link {
  color: var(--ink);
}

.chat-sidebar__item-link i {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.chat-sidebar__item-delete {
  background: none;
  border: none;
  color: var(--ink-faint);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
}

.chat-sidebar__item:hover .chat-sidebar__item-delete {
  opacity: 1;
}

.chat-sidebar__item-delete:hover {
  color: var(--danger);
}

.chat-sidebar__item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-sidebar__item-title {
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-sidebar__item-date {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.chat-sidebar__new {
  margin-top: 1rem;
  width: 100%;
  flex-shrink: 0;
}

.chat-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
  font-weight: 500;
}

.chat-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  font-size: 1rem;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--ink-faint);
  max-width: 360px;
}

.chat-empty__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.chat-row--user {
  justify-content: flex-end;
}

.chat-row--assistant {
  justify-content: flex-start;
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.chat-avatar--assistant {
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
}

.chat-avatar--user {
  background: var(--ember);
  color: #1a1108;
  font-weight: 600;
  font-size: 0.8125rem;
}

.chat-bubble {
  max-width: 65%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.chat-bubble--user {
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  color: var(--ink);
}

.chat-bubble--assistant {
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  color: var(--ink);
}

.chat-bubble__content.is-plain {
  white-space: pre-wrap;
}

.chat-bubble__attachment {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  opacity: 0.85;
  margin-bottom: 0.4rem;
}

.chat-typing {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-input {
  flex-shrink: 0;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--hairline);
}

.chat-input__attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.6rem;
}

.chat-input__attachment button {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.chat-input__row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  padding: 0.5rem;
}

.chat-input__attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  cursor: pointer;
  flex-shrink: 0;
}

.chat-input__attach-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

.chat-input__textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9375rem;
  resize: none;
  max-height: 160px;
  padding: 0.4rem 0;
}

.chat-input__textarea:focus {
  outline: none;
}

.chat-input__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--ember);
  color: #1a1108;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-input__send:hover {
  background: #ff7d4f;
}

.chat-input__send:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 991.98px) {
  .chat-sidebar {
    display: none; /* mobile chat nav is a future increment, same gap the main app sidebar had before offcanvas-lg */
  }

  .chat-bubble {
    max-width: 88%;
  }

  .chat-page-header {
    padding: 1.25rem 1.25rem 0.75rem;
  }
}

/* ==========================================================================
   Markdown content — shared typography for anywhere AI-generated
   Markdown gets rendered as real HTML: chat bubbles (assistant
   messages + live streaming preview), Copy Studio's editor, and its
   live streaming preview. One set of rules, applied everywhere so
   headings/bold/lists look consistent across the whole app rather
   than each surface styling them differently.
   ========================================================================== */

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  margin: 1em 0 0.4em;
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.markdown-content h5:first-child,
.markdown-content h6:first-child {
  margin-top: 0;
}

.markdown-content h1 { font-size: 1.4em; }
.markdown-content h2 { font-size: 1.25em; }
.markdown-content h3 { font-size: 1.1em; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 1em; }

.markdown-content p {
  margin: 0 0 0.75em;
}

.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content strong {
  font-weight: 700;
  color: var(--ink);
}

.markdown-content em {
  font-style: italic;
}

.markdown-content u {
  text-decoration: underline;
}

.markdown-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

.markdown-content ul,
.markdown-content ol {
  margin: 0 0 0.75em;
  padding-left: 1.4em;
}

.markdown-content li {
  margin-bottom: 0.25em;
}

.markdown-content li:last-child {
  margin-bottom: 0;
}

.markdown-content code {
  background: var(--surface);
  border: 1px solid var(--slate-line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.markdown-content pre {
  background: var(--surface);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-sm);
  padding: 0.75em 1em;
  overflow-x: auto;
  margin: 0 0 0.75em;
}

.markdown-content pre code {
  background: none;
  border: none;
  padding: 0;
}

.markdown-content blockquote {
  border-left: 2px solid var(--ember);
  padding-left: 0.85em;
  margin: 0 0 0.75em;
  color: var(--ink-dim);
}

.markdown-content blockquote:last-child {
  margin-bottom: 0;
}

.markdown-content a {
  color: var(--ember-soft);
  text-decoration: underline;
}

.markdown-content a:hover {
  color: var(--ember);
}

.markdown-content hr {
  border: none;
  border-top: 1px solid var(--slate-line);
  margin: 1em 0;
}

.markdown-content table {
  border-collapse: collapse;
  margin: 0 0 0.75em;
  font-size: 0.9em;
  width: 100%;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--slate-line);
  padding: 0.4em 0.6em;
  text-align: left;
}

.markdown-content th {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   Chat sidebar — inline rename form
   ========================================================================== */

.chat-sidebar__rename-form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  flex: 1;
}

.chat-sidebar__rename-form .input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

/* ==========================================================================
   Audio Studio — project form, speeches repeater, voice library modal
   ========================================================================== */

.studio-project-title {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--slate-line);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.4rem 0;
  margin-bottom: 1.5rem;
}

.studio-project-title::placeholder {
  color: var(--ink-faint);
  font-weight: 600;
}

.studio-project-title:focus {
  outline: none;
  border-bottom-color: var(--ember);
}

.audio-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.audio-voice-picker {
  flex: 1;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-speeches__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.audio-speech-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.audio-speech-row .textarea {
  flex: 1;
}

/* ---------- Voice picker — plain Alpine overlay, not a Bootstrap modal ----------
   Deliberately not using Bootstrap's modal component here: its
   imperative JS-managed backdrop lost track of itself when
   wire:model.live re-rendered the modal's contents on every
   keystroke, leaving a stuck, unclickable backdrop. A plain x-show
   toggle with our own backdrop div has no separate lifecycle for
   Livewire's re-renders to desync from. */

.voice-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 6, 0.7);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.voice-modal {
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}

.voice-modal__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.voice-modal__body {
  padding: 1.25rem;
  overflow-y: auto;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.voice-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
}

.voice-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.voice-card__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.voice-card__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  color: var(--ember);
  cursor: pointer;
  flex-shrink: 0;
}

.voice-card__meta {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.voice-card__description {
  font-size: 0.8125rem;
  color: var(--ink-dim);
  line-height: 1.5;
  flex: 1;
}

/* ==========================================================================
   Music Studio — link button and advanced-settings toggle
   ========================================================================== */

.link-button {
  background: none;
  border: none;
  color: var(--ember-soft);
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.link-button:hover {
  color: var(--ember);
}

.advanced-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.advanced-settings-toggle:hover {
  color: var(--ink);
}

/* ==========================================================================
   Narration Studio — cost/duration estimate strip, progress bar
   ========================================================================== */

.narration-estimate {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.narration-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.narration-progress__bar {
  height: 100%;
  background: var(--ember);
  transition: width 0.4s ease;
}

/* ==========================================================================
   Image Studio — result grid, upload preview
   ========================================================================== */

.image-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.image-thumb {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  padding: 0.6rem;
}

.image-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.image-upload-preview {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.image-upload-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-line);
}

/* ==========================================================================
   Documents vault — inline image thumbnail in the Name column
   ========================================================================== */

.doc-row__thumb-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.doc-row__thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ==========================================================================
   Image Studio — hero banner, tool cards, favorites/creations galleries
   ========================================================================== */

.studio-hero {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, #1c1a14 0%, #24160f 55%, #150f1c 100%);
  border: 1px solid var(--slate-line);
  margin-bottom: 2rem;
}

.studio-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
}

.studio-hero__title {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.studio-hero__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--ember) 0%, #c77dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.studio-hero__subtext {
  color: var(--ink-dim);
  font-size: 0.9375rem;
  max-width: 46ch;
  margin-bottom: 1.5rem;
}

.studio-hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.studio-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0.75rem;
  align-content: flex-start;
}

.studio-hero__stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.studio-hero__stat-label {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.35rem;
}

.studio-hero__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Tool cards ---------- */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 210px;
  border-radius: var(--radius);
  border: 1px solid var(--slate-line);
  overflow: hidden;
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--ember);
}

.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 6, 0.92) 0%, rgba(10, 9, 6, 0.35) 55%, rgba(10, 9, 6, 0.05) 100%);
  z-index: 0;
}

.tool-card--grad-0 { background-image: linear-gradient(135deg, #3a2a1c, #1c1410); }
.tool-card--grad-1 { background-image: linear-gradient(135deg, #22303a, #12181c); }
.tool-card--grad-2 { background-image: linear-gradient(135deg, #3a1c22, #1c1013); }
.tool-card--grad-3 { background-image: linear-gradient(135deg, #2a2438, #14121c); }

.tool-card__badge {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  margin-bottom: auto;
}

.tool-card__icon-fallback {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  margin-bottom: auto;
}

.tool-card__name {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
}

.tool-card__description {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  margin-top: 0.2rem;
}

/* ---------- Favorites / creations galleries ---------- */

.creation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}

.creation-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--slate-line);
  aspect-ratio: 3 / 4;
  background: var(--surface);
}

.creation-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.creation-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem;
  background: linear-gradient(to top, rgba(10, 9, 6, 0.85) 0%, rgba(10, 9, 6, 0) 40%);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.creation-card:hover .creation-card__overlay {
  opacity: 1;
}

.creation-card__tag {
  align-self: flex-end;
  font-size: 0.6875rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.creation-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
}

.creation-card__actions button {
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.creation-card__actions button .bi-star-fill {
  color: var(--ember);
}

/* ==========================================================================
   Image Studio — "agent card" generation screen (aspect ratio, style ref)
   ========================================================================== */

.agent-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.agent-header__icon {
  font-size: 1.5rem;
}

.agent-header__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.agent-header__subtext {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.875rem;
  margin: 0.35rem 0 1.5rem;
}

.agent-card {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-lg, 16px);
  padding: 1.25rem 0 0.75rem;
  display: flex;
  flex-direction: column;
}

.agent-card__textarea {
  width: 100%;
  background: transparent;
  border: none;
  resize: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-family: inherit;
  padding: 0 1.25rem;
  min-height: 80px;
}

.agent-card__textarea:focus {
  outline: none;
}

.agent-card__textarea::placeholder {
  color: var(--ink-faint);
}

.agent-card__uploads {
  padding: 0 1.25rem;
  margin-top: 0.5rem;
}

.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.agent-chip--upload:hover {
  border-color: var(--ember);
  color: var(--ink);
}

.agent-chip--active {
  color: var(--ember-soft);
  border-color: var(--ember);
  cursor: default;
}

.agent-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  margin-top: 1rem;
  padding: 0.65rem 1.25rem 0;
}

.agent-toolbar__group {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.agent-toolbar__spacer {
  flex: 1;
}

.agent-toolbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
}

.agent-toolbar__icon-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

.agent-ratio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.agent-ratio-btn:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.agent-ratio-btn.is-active {
  color: #fff;
  background: var(--ember);
  border-color: var(--ember);
}

.agent-ratio-btn__shape {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}

.agent-ratio-btn__shape--square { width: 12px; height: 12px; }
.agent-ratio-btn__shape--portrait { width: 10px; height: 13px; }
.agent-ratio-btn__shape--story { width: 8px; height: 14px; }
.agent-ratio-btn__shape--landscape { width: 14px; height: 9px; }

.agent-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin: -0.2rem 0 0.5rem;
}

.agent-send-btn:hover {
  background: var(--ember-soft);
}

.agent-send-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.agent-cost-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Image Studio — generation screen gradient backdrop + glow animation
   ========================================================================== */

.agent-screen {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  padding: 2rem 1rem 3rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 107, 53, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(199, 125, 255, 0.06) 0%, transparent 70%);
}

.agent-glow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1.25rem;
  padding: 4rem 1rem;
}

.agent-glow {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-glow__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--ember) 50%, transparent 100%);
  animation: agent-glow-spin 1.6s linear infinite;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.agent-glow__core {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember) 0%, rgba(255, 107, 53, 0.15) 70%, transparent 100%);
  animation: agent-glow-pulse 1.8s ease-in-out infinite;
}

.agent-glow__label {
  color: var(--ink-dim);
  font-size: 0.875rem;
  font-weight: 500;
  animation: agent-glow-pulse 1.8s ease-in-out infinite;
}

@keyframes agent-glow-spin {
  to { transform: rotate(360deg); }
}

@keyframes agent-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ==========================================================================
   Real waveform audio player (Wavesurfer.js)
   ========================================================================== */

.wave-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  width: 100%;
}

.wave-player__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.wave-player__toggle:hover {
  background: var(--ember-soft);
}

.wave-player__toggle:disabled {
  opacity: 0.5;
  cursor: default;
}

.wave-player__waveform {
  flex: 1;
  min-width: 0;
}

.wave-player__time {
  font-size: 0.75rem;
  color: var(--ink-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}