:where(.internal-app-shell, .locli-auth-shell),
:where(.internal-app-shell, .locli-auth-shell) * {
  box-sizing: border-box;
  letter-spacing: 0;
}

:where(.internal-app-shell, .locli-auth-shell) {
  margin: 0;
  min-width: 20rem;
  min-height: 100vh;
  background: var(--locli-background);
  color: var(--locli-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--locli-type-body);
  line-height: var(--locli-type-body-line);
  text-rendering: optimizeLegibility;
}

:where(.internal-app-shell, .locli-auth-shell) a {
  color: inherit;
}

:where(.internal-app-shell, .locli-auth-shell) button,
:where(.internal-app-shell, .locli-auth-shell) input,
:where(.internal-app-shell, .locli-auth-shell) select,
:where(.internal-app-shell, .locli-auth-shell) textarea {
  font: inherit;
}

:where(.internal-app-shell, .locli-auth-shell) :focus-visible {
  outline: 3px solid rgb(34 197 94 / 0.28);
  outline-offset: 2px;
}

/* Component rules use CSS nesting, covered by the application's modern-browser gate. */
:where(.internal-app-shell, .locli-auth-shell) {
& .locli-skip-link {
  position: fixed;
  top: var(--locli-space-3);
  left: var(--locli-space-3);
  z-index: 100;
  translate: 0 -200%;
  border-radius: var(--locli-radius-sm);
  background: var(--locli-ink);
  color: white;
  padding: var(--locli-space-2) var(--locli-space-4);
  font-size: var(--locli-type-small);
  font-weight: 600;
  text-decoration: none;
}

& .locli-skip-link:focus {
  translate: 0;
}

& .locli-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-2);
  color: var(--locli-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  text-decoration: none;
}

& .locli-logo__mark {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
}

& .locli-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

& .locli-icon--sm {
  width: 1rem;
  height: 1rem;
}

& .locli-icon--lg {
  width: 1.375rem;
  height: 1.375rem;
}

& .locli-icon--spinner,
& .locli-spinner {
  transform-origin: center;
  animation: locli-spin var(--locli-spinner-duration, 1.2s) linear infinite;
}

& .locli-app-frame {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 160ms ease;
}

& .locli-app-frame.is-sidebar-collapsed {
  grid-template-columns: 4.5rem minmax(0, 1fr);
}

& .locli-app-frame.locli-app-frame--editor {
  grid-template-columns: minmax(0, 1fr);
}

& .locli-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--locli-border);
  background: var(--locli-surface);
  padding: var(--locli-space-6) var(--locli-space-4) var(--locli-space-4);
}

& .locli-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-2);
  padding: 0 var(--locli-space-2);
}

& .locli-sidebar__toggle {
  width: 2.25rem;
  height: 2.25rem;
}

& .locli-sidebar__nav {
  margin-top: var(--locli-space-8);
}

& .locli-sidebar__label {
  margin: 0 var(--locli-space-3) var(--locli-space-2);
  color: var(--locli-subtle);
  font-size: var(--locli-type-label);
  font-weight: 600;
  line-height: var(--locli-type-label-line);
  text-transform: uppercase;
}

& .locli-nav-list {
  display: grid;
  gap: var(--locli-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

& .locli-nav-link {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--locli-space-3);
  border-radius: var(--locli-radius-sm);
  padding: var(--locli-space-2) var(--locli-space-3);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  font-weight: 600;
  text-decoration: none;
}

& .locli-nav-link:hover {
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-nav-link[aria-current="page"] {
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-sidebar__account {
  margin-top: auto;
  border-top: 1px solid var(--locli-divider);
  padding-top: var(--locli-space-4);
}

& .locli-app-frame.is-sidebar-collapsed .locli-sidebar {
  padding-inline: var(--locli-space-3);
}

& .locli-app-frame.is-sidebar-collapsed .locli-sidebar__brand {
  flex-direction: column;
  padding-inline: 0;
}

& .locli-app-frame.is-sidebar-collapsed .locli-logo > span,
& .locli-app-frame.is-sidebar-collapsed .locli-sidebar__label,
& .locli-app-frame.is-sidebar-collapsed .locli-nav-link > span,
& .locli-app-frame.is-sidebar-collapsed .locli-account-summary__copy,
& .locli-app-frame.is-sidebar-collapsed .locli-account-summary form {
  display: none;
}

& .locli-app-frame.is-sidebar-collapsed .locli-nav-link {
  justify-content: center;
  padding-inline: 0;
}

& .locli-app-frame.is-sidebar-collapsed .locli-account-summary {
  display: flex;
  justify-content: center;
}

& .locli-account-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--locli-space-3);
}

& .locli-account-summary__copy {
  min-width: 0;
}

& .locli-account-summary__name,
& .locli-account-summary__email {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-account-summary__name {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  font-weight: 600;
  line-height: var(--locli-type-small-line);
}

& .locli-account-summary__email {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-avatar {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-100);
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 700;
}

& .locli-icon-button {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--locli-radius-sm);
  background: transparent;
  color: var(--locli-muted);
  cursor: pointer;
}

& .locli-icon-button:hover {
  border-color: var(--locli-border);
  background: var(--locli-background);
  color: var(--locli-ink);
}

& .locli-mobile-header {
  display: none;
}

& .locli-app-main {
  min-width: 0;
}

& .locli-main-content {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--locli-space-12) var(--locli-space-8) var(--locli-space-16);
}

& .locli-main-content.locli-main-content--editor {
  max-width: none;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

& .locli-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--locli-space-6);
}

& .locli-page-header__copy {
  min-width: 0;
}

& .locli-page-title {
  margin: 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-page);
  font-weight: 650;
  line-height: var(--locli-type-page-line);
}

& .locli-page-description {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-section-title {
  margin: 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-section);
  font-weight: 650;
  line-height: var(--locli-type-section-line);
}

& .locli-card-title {
  margin: 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-card);
  font-weight: 650;
  line-height: var(--locli-type-card-line);
}

& .locli-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
  border: 1px solid transparent;
  border-radius: var(--locli-radius-sm);
  padding: var(--locli-space-2) var(--locli-space-4);
  font-size: var(--locli-type-small);
  font-weight: 650;
  line-height: var(--locli-type-small-line);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

& .locli-button:disabled,
& .locli-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

& .locli-button:disabled:hover,
& .locli-button[aria-disabled="true"]:hover {
  background: var(--locli-green-600);
}

& .locli-button--primary {
  background: var(--locli-green-600);
  color: white;
  box-shadow: var(--locli-shadow-sm);
}

& .locli-button--primary:hover {
  background: var(--locli-green-700);
}

& .locli-button--secondary {
  border-color: var(--locli-border);
  background: var(--locli-surface);
  color: var(--locli-text);
}

& .locli-button--secondary:hover {
  border-color: var(--locli-subtle);
  color: var(--locli-ink);
}

& .locli-button--ghost {
  background: transparent;
  color: var(--locli-green-700);
}

& .locli-button--ghost:hover {
  background: var(--locli-green-50);
}

& .locli-button--danger {
  background: var(--locli-danger);
  color: white;
}

& .locli-card {
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  box-shadow: var(--locli-shadow-card);
}

& .locli-page {
  display: grid;
  gap: var(--locli-space-8);
}

& .locli-stack {
  display: grid;
  gap: var(--locli-space-5);
  padding: var(--locli-space-6);
}

& .locli-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--locli-space-3);
}

& .locli-cluster--between {
  justify-content: space-between;
}

& .locli-list {
  margin: var(--locli-space-3) 0 0;
  padding-left: var(--locli-space-5);
}

& .locli-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-4);
  padding: var(--locli-space-4) 0;
  border-bottom: 1px solid var(--locli-divider);
}

& .locli-list-row:last-child {
  border-bottom: 0;
}

& .locli-version-page-list {
  display: grid;
  gap: var(--locli-space-3);
}

& .locli-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-4);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
}

& .locli-version-page-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--locli-space-4);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  padding: var(--locli-space-4);
  box-shadow: var(--locli-shadow-sm);
}

& .locli-version-page-row__marker {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-version-page-row__content {
  min-width: 0;
}

& .locli-body-sm,
& .locli-caption {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-caption {
  color: var(--locli-subtle);
}

& .locli-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--locli-space-5);
  margin: 0;
}

& .locli-detail-list div {
  min-width: 0;
}

& .locli-detail-list dt {
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
}

& .locli-detail-list dd {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-ink);
  font-weight: 650;
}

& .locli-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--locli-space-3);
  margin-top: var(--locli-space-8);
}

& .locli-stat-card {
  display: flex;
  min-height: 7.5rem;
  align-items: center;
  gap: var(--locli-space-4);
  padding: var(--locli-space-4);
}

& .locli-stat-card__icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
}

& .locli-stat-card__icon--published {
  background: var(--locli-success-bg);
  color: var(--locli-success);
}

& .locli-stat-card__icon--ready {
  background: var(--locli-info-bg);
  color: var(--locli-info);
}

& .locli-stat-card__icon--building {
  background: var(--locli-warning-bg);
  color: var(--locli-warning);
}

& .locli-stat-card__icon--failed {
  background: var(--locli-danger-bg);
  color: var(--locli-danger);
}

& .locli-stat-card__copy {
  min-width: 0;
}

& .locli-stat-card__label,
& .locli-stat-card__detail,
& .locli-stat-card__value {
  margin: 0;
}

& .locli-stat-card__label,
& .locli-stat-card__detail {
  overflow: hidden;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-stat-card__label {
  font-weight: 600;
}

& .locli-stat-card__value {
  margin: 0.125rem 0;
  color: var(--locli-ink);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 2rem;
}

& .locli-badge {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  border-radius: var(--locli-radius-full);
  padding: 0.125rem 0.625rem;
  font-size: var(--locli-type-label);
  font-weight: 650;
  line-height: var(--locli-type-label-line);
  white-space: nowrap;
}

& .locli-badge--published {
  background: var(--locli-success-bg);
  color: var(--locli-success);
}

& .locli-badge--ready {
  background: var(--locli-info-bg);
  color: var(--locli-info);
}

& .locli-badge--building {
  background: var(--locli-warning-bg);
  color: var(--locli-warning);
}

& .locli-badge--needs_details,
& .locli-badge--needs_brief {
  background: var(--locli-warning-bg);
  color: var(--locli-warning);
}

& .locli-badge--needs_confirmation {
  background: var(--locli-info-bg);
  color: var(--locli-info);
}

& .locli-badge--failed {
  background: var(--locli-danger-bg);
  color: var(--locli-danger);
}

& .locli-badge--neutral {
  background: var(--locli-neutral-bg);
  color: var(--locli-muted);
}

& .locli-project-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--locli-space-6);
  margin-top: var(--locli-space-8);
}

& .locli-project-card {
  overflow: hidden;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  box-shadow: var(--locli-shadow-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

& .locli-project-card:hover {
  border-color: var(--locli-subtle);
  box-shadow: var(--locli-shadow-card);
  transform: translateY(-2px);
}

& .locli-project-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

& .locli-project-thumbnail {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--locli-divider);
  background: var(--locli-background);
}

& .locli-project-thumbnail img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
}

& .locli-project-thumbnail img[hidden] {
  display: none;
}

& .locli-project-card:hover .locli-project-thumbnail img {
  transform: scale(1.015);
}

& .locli-project-thumbnail__fallback {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--locli-space-4) var(--locli-space-4) 3.75rem;
}

& .locli-project-thumbnail__status {
  position: absolute;
  bottom: var(--locli-space-3);
  left: var(--locli-space-3);
  z-index: 2;
  display: inline-flex;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: var(--locli-radius-full);
  box-shadow: 0 2px 8px rgb(15 23 42 / 0.12);
}

& .locli-project-thumbnail__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
}

& .locli-project-thumbnail__heading span,
& .locli-project-thumbnail__category {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-project-thumbnail__initial {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: rgb(255 255 255 / 0.72);
  font-size: var(--locli-type-card);
  font-weight: 700;
  box-shadow: var(--locli-shadow-sm);
}

& .locli-project-thumbnail__category {
  margin: var(--locli-space-3) 0 0;
  font-size: var(--locli-type-label);
  font-weight: 600;
  line-height: var(--locli-type-label-line);
}

& .locli-thumbnail--restaurant {
  background: #fef3c7;
  color: #451a03;
}

& .locli-thumbnail--beauty {
  background: #ffe4e6;
  color: #4c0519;
}

& .locli-thumbnail--healthcare {
  background: #d1fae5;
  color: #022c22;
}

& .locli-thumbnail--fitness {
  background: #fee2e2;
  color: #450a0a;
}

& .locli-thumbnail--manufacturing {
  background: #e0f2fe;
  color: #082f49;
}

& .locli-thumbnail--generic {
  background: var(--locli-neutral-bg);
  color: var(--locli-ink);
}

& .locli-project-card__body {
  min-width: 0;
  padding: var(--locli-space-4);
}

& .locli-project-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-4);
}

& .locli-project-card__heading > .locli-icon {
  color: var(--locli-subtle);
  transition: color 140ms ease, transform 140ms ease;
}

& .locli-project-card:hover .locli-project-card__heading > .locli-icon {
  color: var(--locli-green-700);
  transform: translateX(0.2rem);
}

& .locli-project-card__title {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-card);
  font-weight: 650;
  line-height: var(--locli-type-card-line);
}

& .locli-project-card__category {
  overflow: hidden;
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--locli-space-2) var(--locli-space-4);
  margin: var(--locli-space-4) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-project-meta__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--locli-space-2);
}

& .locli-project-meta dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

& .locli-project-meta dd {
  overflow: hidden;
  min-width: 0;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-empty-state {
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: var(--locli-space-8);
  border: 1px dashed var(--locli-subtle);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  padding: var(--locli-space-12) var(--locli-space-6);
  text-align: center;
}

& .locli-empty-state__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-empty-state h2 {
  margin: var(--locli-space-4) 0 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-card);
  font-weight: 650;
  line-height: var(--locli-type-card-line);
}

& .locli-empty-state p {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-empty-state .locli-button {
  margin-top: var(--locli-space-6);
}

& .locli-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--locli-space-3);
  margin-bottom: var(--locli-space-4);
  border: 1px solid;
  border-radius: var(--locli-radius-sm);
  padding: var(--locli-space-3) var(--locli-space-4);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
  transition: opacity 180ms ease, transform 180ms ease;
}

& .locli-alert.is-leaving {
  opacity: 0;
  transform: translateY(-0.375rem);
}

& .locli-alert p {
  flex: 1;
  margin: 0;
}

& .locli-alert__dismiss {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: -0.25rem;
  border: 0;
  border-radius: var(--locli-radius-sm);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0.7;
}

& .locli-alert__dismiss:hover,
& .locli-alert__dismiss:focus-visible {
  background: rgb(255 255 255 / 0.5);
  opacity: 1;
}

& .locli-alert--success {
  border-color: #bbf7d0;
  background: var(--locli-success-bg);
  color: var(--locli-success);
}

& .locli-alert--danger {
  border-color: #fecaca;
  background: var(--locli-danger-bg);
  color: #b91c1c;
}

& .locli-alert--warning {
  border-color: #fde68a;
  background: var(--locli-warning-bg);
  color: #92400e;
}

& .locli-alert--info {
  border-color: #bfdbfe;
  background: var(--locli-info-bg);
  color: #1d4ed8;
}

& .locli-field-group {
  display: grid;
  gap: var(--locli-space-2);
}

& .locli-label {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  font-weight: 600;
  line-height: var(--locli-type-small-line);
}

& .locli-input,
& .locli-select,
& .locli-textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  color: var(--locli-ink);
  padding: var(--locli-space-2) var(--locli-space-3);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-input::placeholder,
& .locli-textarea::placeholder {
  color: var(--locli-subtle);
}

& .locli-input:hover,
& .locli-select:hover,
& .locli-textarea:hover {
  border-color: var(--locli-subtle);
}

& .locli-input:focus,
& .locli-select:focus,
& .locli-textarea:focus {
  border-color: var(--locli-green-600);
  outline: 3px solid rgb(34 197 94 / 0.18);
}

& .locli-input:disabled,
& .locli-select:disabled,
& .locli-textarea:disabled {
  border-color: var(--locli-divider);
  background: var(--locli-neutral-bg);
  color: var(--locli-muted);
  cursor: not-allowed;
  opacity: 1;
}

& .locli-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--locli-space-2);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--locli-green-600);
}

& .locli-form-stack {
  display: grid;
  gap: var(--locli-space-4);
}

& .locli-form-help {
  margin: 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--locli-border);
  gap: var(--locli-space-6);
}

& .locli-tab {
  min-height: 2.75rem;
  border-bottom: 2px solid transparent;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

& .locli-tab[aria-current="page"],
& .locli-tab:hover {
  border-bottom-color: var(--locli-green-600);
  color: var(--locli-green-700);
}

&.locli-auth-shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--locli-space-12) var(--locli-space-4) var(--locli-space-16);
}

& .locli-auth-container {
  width: min(100%, 28rem);
}

& .locli-auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--locli-space-8);
}

& .locli-auth-legal-links {
  display: flex;
  justify-content: center;
  gap: var(--locli-space-2);
  margin-top: var(--locli-space-6);
  color: var(--locli-muted);
  font-size: var(--locli-type-caption);
}

& .locli-auth-legal-links a:hover {
  color: var(--locli-green-700);
}

& .locli-auth-card {
  padding: var(--locli-space-8);
}

& .locli-auth-eyebrow {
  margin: 0;
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 700;
  line-height: var(--locli-type-label-line);
  text-transform: uppercase;
}

& .locli-auth-title {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-section);
  font-weight: 650;
  line-height: var(--locli-type-section-line);
}

& .locli-auth-intro {
  margin: var(--locli-space-3) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-auth-card__header {
  margin-bottom: var(--locli-space-6);
}

& .locli-social-auth {
  display: grid;
  gap: var(--locli-space-3);
  margin-bottom: var(--locli-space-5);
}

& .locli-google-button-form {
  margin: 0;
}

& .locli-google-button {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid #747775;
  border-radius: var(--locli-radius);
  background: #fff;
  color: #1f1f1f;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

& .locli-google-button:hover:not(:disabled) {
  background: #f8fafd;
  box-shadow: 0 1px 2px rgb(60 64 67 / 0.2);
}

& .locli-google-button:disabled {
  border-color: var(--locli-border);
  color: var(--locli-muted);
  cursor: not-allowed;
}

& .locli-google-mark {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
}

& .locli-social-auth__note {
  margin: 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
  text-align: center;
}

& .locli-invitation-acceptance__note {
  margin-top: var(--locli-space-3);
}

& .locli-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--locli-space-3);
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-auth-divider::before,
& .locli-auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--locli-border);
  content: "";
}

& .locli-auth-card .locli-button--primary {
  width: 100%;
}

& .locli-auth-links {
  display: grid;
  gap: var(--locli-space-3);
  margin-top: var(--locli-space-4);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-auth-links p {
  margin: 0;
}

& .locli-auth-access-callout {
  display: grid;
  gap: var(--locli-space-4);
  margin-top: var(--locli-space-6);
  padding: var(--locli-space-4);
  border: 1px solid color-mix(in srgb, var(--locli-green-600) 26%, var(--locli-border));
  background: var(--locli-green-50);
}

& .locli-auth-access-callout h2,
& .locli-auth-access-callout p {
  margin: 0;
}

& .locli-auth-access-callout h2 {
  color: var(--locli-ink);
  font-size: var(--locli-type-body);
  line-height: var(--locli-type-body-line);
}

& .locli-auth-access-callout p {
  margin-top: var(--locli-space-1);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-auth-access-callout__button {
  width: 100%;
}

& .locli-text-link {
  color: var(--locli-green-700) !important;
  font-weight: 650;
  text-decoration-color: rgb(15 122 61 / 0.35);
  text-underline-offset: 0.2rem;
}

& .locli-text-link:hover {
  text-decoration-color: currentColor;
}

& .locli-eyebrow {
  margin: 0;
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 700;
  line-height: var(--locli-type-label-line);
  text-transform: uppercase;
}

& .locli-onboarding-flow {
  width: min(100%, 46rem);
  margin: 0 auto;
}

& .locli-onboarding-intro {
  max-width: 40rem;
  margin: 0 auto var(--locli-space-8);
  text-align: center;
}

& .locli-onboarding-intro__icon,
& .locli-issue-card__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-100);
  color: var(--locli-green-700);
}

& .locli-onboarding-intro .locli-eyebrow,
& .locli-generation-heading .locli-eyebrow,
& .locli-issue-card .locli-eyebrow {
  margin-top: var(--locli-space-4);
}

& .locli-onboarding-intro h1,
& .locli-generation-heading h1,
& .locli-issue-card h1 {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-ink);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 680;
  line-height: 1.08;
}

& .locli-onboarding-intro > p:last-child,
& .locli-generation-heading > p:last-child,
& .locli-issue-card > p {
  margin: var(--locli-space-3) auto 0;
  color: var(--locli-muted);
  line-height: 1.65;
}

& .locli-onboarding-card {
  padding: var(--locli-space-8);
}

& .locli-onboarding-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--locli-space-4);
}

& .locli-onboarding-disclosure {
  overflow: hidden;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
}

& .locli-onboarding-disclosure > summary {
  display: grid;
  min-height: 4.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--locli-space-3);
  padding: var(--locli-space-3) var(--locli-space-4);
  cursor: pointer;
  list-style: none;
}

& .locli-onboarding-more-options > summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

& .locli-onboarding-disclosure > summary::-webkit-details-marker {
  display: none;
}

& .locli-onboarding-disclosure > summary:focus-visible {
  outline: 3px solid var(--locli-green-100);
  outline-offset: -3px;
}

& .locli-onboarding-disclosure[open] > summary {
  border-bottom: 1px solid var(--locli-divider);
}

& .locli-onboarding-disclosure__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-onboarding-disclosure__copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

& .locli-onboarding-disclosure__copy strong {
  overflow-wrap: anywhere;
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-onboarding-disclosure__copy > span {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-onboarding-disclosure__action {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-1);
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 650;
  white-space: nowrap;
}

& .locli-onboarding-disclosure__action svg {
  transition: transform 150ms ease;
}

& .locli-onboarding-disclosure[open] .locli-onboarding-disclosure__action svg {
  transform: rotate(180deg);
}

& .locli-onboarding-disclosure__open-label,
& .locli-onboarding-disclosure[open] .locli-onboarding-disclosure__closed-label {
  display: none;
}

& .locli-onboarding-disclosure[open] .locli-onboarding-disclosure__open-label {
  display: inline;
}

& .locli-onboarding-disclosure__content {
  padding: var(--locli-space-4);
}

& .locli-onboarding-advanced-fields {
  display: grid;
  gap: var(--locli-space-4);
}

& .locli-confirmed-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-4);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-green-50);
  padding: var(--locli-space-3) var(--locli-space-4);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
}

& .locli-confirmed-detail strong {
  color: var(--locli-green-700);
}

& .locli-onboarding-submit {
  display: flex;
  align-items: center;
  gap: var(--locli-space-4);
  border-top: 1px solid var(--locli-divider);
  padding-top: var(--locli-space-6);
}

& .locli-onboarding-submit > span {
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-onboarding-assurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--locli-space-3) var(--locli-space-6);
  margin-top: var(--locli-space-4);
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-onboarding-assurance span {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-1);
}

& .locli-onboarding-assurance svg {
  color: var(--locli-green-600);
}

& .locli-generation-shell {
  width: min(100%, 68rem);
  margin: 0 auto;
}

& .locli-generation-heading {
  max-width: 48rem;
  margin: 0 auto var(--locli-space-8);
  text-align: center;
}

& .locli-generation-grid,
& .locli-ready-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
  align-items: center;
  gap: var(--locli-space-8);
}

& .locli-generation-shell[data-generation-state="building"] {
  width: min(100%, 48rem);
}

& .locli-generation-shell[data-generation-state="building"] .locli-generation-grid {
  display: block;
}

& .locli-generation-shell[data-generation-state="building"] .locli-generation-footnote {
  text-align: center;
}

& .locli-generation-shell[data-generation-state="building"] > .locli-text-link {
  display: block;
  text-align: center;
}

& .locli-progress-card,
& .locli-ready-card {
  padding: var(--locli-space-8);
}

& .locli-progress-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--locli-space-4);
}

& .locli-progress-card__label {
  margin: 0;
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 700;
  line-height: var(--locli-type-label-line);
  text-transform: uppercase;
}

& .locli-progress-card h2,
& .locli-ready-card h2 {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-section);
  line-height: var(--locli-type-section-line);
}

& .locli-progress-card__header p:last-child {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-progress-card__header > strong {
  color: var(--locli-green-700);
  font-size: 1.25rem;
}

& .locli-progress-track {
  height: 0.5rem;
  overflow: hidden;
  margin-top: var(--locli-space-4);
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-100);
}

& .locli-progress-track span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--locli-green-600);
  transform-origin: left center;
  will-change: transform;
}

& .locli-progress-track span::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
  content: "";
  transform: translateX(-100%);
  animation: locli-progress-sweep 1.8s ease-in-out infinite;
}

& .locli-step-list {
  display: grid;
  gap: 0;
  margin: var(--locli-space-6) 0 0;
  padding: 0;
  list-style: none;
}

& .locli-step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--locli-space-3);
  padding-bottom: var(--locli-space-4);
  transition: opacity 320ms ease;
}

& .locli-step:not(:last-child)::before {
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: 0.94rem;
  width: 2px;
  background: var(--locli-divider);
  content: "";
}

& .locli-step__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-full);
  background: var(--locli-surface);
  color: var(--locli-subtle);
  font-size: var(--locli-type-label);
  font-weight: 700;
  transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease;
}

& .locli-step h3,
& .locli-step p {
  margin: 0;
}

& .locli-step h3 {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-step p {
  margin-top: var(--locli-space-1);
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-step--complete .locli-step__marker,
& .locli-step--current .locli-step__marker {
  border-color: var(--locli-green-600);
  background: var(--locli-green-600);
  color: white;
}

& .locli-step__spinner {
  --locli-spinner-duration: 0.8s;

  display: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid rgb(255 255 255 / 0.45);
  border-top-color: white;
  border-radius: var(--locli-radius-full);
}

& .locli-step__check {
  display: none;
}

& .locli-step--complete .locli-step__number,
& .locli-step--current .locli-step__number {
  display: none;
}

& .locli-step--complete .locli-step__check,
& .locli-step--current .locli-step__spinner {
  display: inline-flex;
}

& .locli-step--complete .locli-step__check {
  animation: locli-check-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

& .locli-step--upcoming {
  opacity: 0.62;
}

& .locli-generation-footnote {
  margin: var(--locli-space-6) 0 var(--locli-space-2);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
}

& .locli-ready-preview {
  width: 100%;
  min-height: 23rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--locli-radius);
  box-shadow: var(--locli-shadow-card);
}

& .locli-ready-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

& .locli-ready-summary {
  display: grid;
  gap: 0.2rem;
}

& .locli-ready-summary span,
& .locli-ready-summary strong {
  display: block;
}

& .locli-ready-summary strong {
  margin-top: var(--locli-space-1);
  color: var(--locli-ink);
}

& .locli-ready-list {
  display: grid;
  gap: var(--locli-space-3);
  margin: var(--locli-space-6) 0 0;
  padding: 0;
  list-style: none;
}

& .locli-ready-list li {
  display: flex;
  align-items: center;
  gap: var(--locli-space-3);
  color: var(--locli-text);
  font-size: var(--locli-type-small);
}

& .locli-ready-list span {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-100);
  color: var(--locli-green-700);
}

& .locli-ready-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--locli-space-3);
  margin-top: var(--locli-space-6);
}

& .locli-ready-card > .locli-form-help { margin-top: var(--locli-space-4); }

& .locli-issue-card {
  width: min(100%, 36rem);
  margin: var(--locli-space-8) auto 0;
  padding: var(--locli-space-12);
  text-align: center;
}

& .locli-issue-card__icon {
  background: var(--locli-danger-bg);
  color: var(--locli-danger);
}

& .locli-issue-card .locli-ready-actions {
  justify-content: center;
  margin-bottom: var(--locli-space-4);
}

@media (max-width: 60rem) {
  & .locli-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  & .locli-generation-grid,
  & .locli-ready-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  & .locli-ready-preview {
    width: min(100%, 38rem);
    margin: 0 auto;
  }
}

@media (max-width: 80rem) {
  & .locli-project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  & .locli-app-frame {
    display: block;
  }

  & .locli-sidebar {
    display: none;
  }

  & .locli-mobile-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: 4.25rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--locli-space-3);
    border-bottom: 1px solid var(--locli-border);
    background: rgb(255 255 255 / 0.96);
    padding: var(--locli-space-3) var(--locli-space-4);
  }

  & .locli-mobile-header__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--locli-space-2);
  }

  & .locli-main-content {
    padding: var(--locli-space-8) var(--locli-space-4) var(--locli-space-12);
  }

  & .locli-project-list {
    grid-template-columns: minmax(0, 1fr);
  }

  & .locli-page-header {
    align-items: flex-start;
  }

}

@media (max-width: 36rem) {
  & .locli-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  & .locli-page-header .locli-button {
    width: 100%;
  }

  & .locli-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  &.locli-auth-shell {
    padding-top: var(--locli-space-8);
  }

  & .locli-auth-card {
    padding: var(--locli-space-6);
  }

  & .locli-onboarding-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  & .locli-onboarding-card,
  & .locli-progress-card,
  & .locli-ready-card,
  & .locli-issue-card {
    padding: var(--locli-space-6);
  }

  & .locli-onboarding-submit,
  & .locli-ready-actions {
    align-items: stretch;
    flex-direction: column;
  }

  & .locli-onboarding-submit .locli-button,
  & .locli-ready-actions .locli-button {
    width: 100%;
  }

  & .locli-generation-heading {
    margin-bottom: var(--locli-space-6);
  }

  & .locli-generation-heading h1,
  & .locli-onboarding-intro h1,
  & .locli-issue-card h1 {
    font-size: 2rem;
  }

}

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

  & .locli-icon--spinner,
  & .locli-spinner {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}
}

@keyframes locli-spin { to { transform: rotate(360deg); } }
@keyframes locli-progress-sweep { 50%, 100% { transform: translateX(100%); } }
@keyframes locli-check-in { from { opacity: 0; transform: scale(0.65); } to { opacity: 1; transform: scale(1); } }
@keyframes locli-preview-updated { from { box-shadow: inset 0 0 0 3px rgb(22 163 74 / 0.45); } to { box-shadow: inset 0 0 0 0 rgb(22 163 74 / 0); } }

body.is-resizing-voice-editor,
body.is-resizing-voice-editor * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.is-resizing-voice-editor .locli-voice-editor__layout {
  transition: none !important;
}

:where(.internal-app-shell, .locli-auth-shell) {
& .locli-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

& .locli-voice-editor {
  --locli-editor-panel-width: 22rem;

  display: grid;
  height: 100vh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

& .locli-voice-editor__layout {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-areas: "editor resizer preview";
  grid-template-columns: var(--locli-editor-panel-width) 0.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: var(--locli-surface);
  transition: grid-template-columns 160ms ease;
}

& .locli-voice-panel {
  position: relative;
  z-index: 5;
  display: grid;
  grid-area: editor;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--locli-surface);
  padding: 0;
}

& .locli-voice-panel--request {
  overflow: visible;
}

& .locli-voice-panel--state {
  overflow: hidden;
}

& .locli-voice-panel__header {
  position: relative;
  z-index: 30;
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-3);
  border-bottom: 1px solid var(--locli-divider);
  padding: var(--locli-space-3) var(--locli-space-4);
}

& .locli-project-switcher {
  position: relative;
  min-width: 0;
  flex: 1;
}

& .locli-voice-panel__header > .locli-logo--compact {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: var(--locli-radius-sm);
}

& .locli-voice-panel__header > .locli-logo--compact:hover {
  background: var(--locli-green-50);
}

& .locli-voice-panel__header > .locli-logo--compact .locli-logo__mark {
  width: 1.75rem;
  height: 1.75rem;
}

& .locli-voice-success-toast {
  position: absolute;
  right: var(--locli-space-4);
  bottom: var(--locli-space-4);
  left: var(--locli-space-4);
  z-index: 25;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--locli-space-2);
  border: 1px solid var(--locli-green-100);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  padding: var(--locli-space-3);
  box-shadow: var(--locli-shadow-card);
}

& .locli-voice-success-toast__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-voice-success-toast__copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

& .locli-voice-success-toast__copy strong,
& .locli-voice-success-toast__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-voice-success-toast__copy strong {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
}

& .locli-voice-success-toast__copy span {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
}

& .locli-voice-success-toast form {
  margin: 0;
}

& .locli-voice-success-toast__undo,
& .locli-voice-success-toast__dismiss {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--locli-radius-sm);
  background: transparent;
  color: var(--locli-green-700);
  cursor: pointer;
}

& .locli-voice-success-toast__undo {
  gap: var(--locli-space-1);
  padding: 0 var(--locli-space-2);
  font-size: var(--locli-type-label);
  font-weight: 700;
}

& .locli-voice-success-toast__dismiss {
  width: 2rem;
  padding: 0;
  color: var(--locli-muted);
}

& .locli-voice-success-toast__undo:hover,
& .locli-voice-success-toast__dismiss:hover {
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-project-switcher summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--locli-space-2);
  border-radius: var(--locli-radius-sm);
  padding: var(--locli-space-1);
  list-style: none;
  cursor: pointer;
}

& .locli-project-switcher summary::-webkit-details-marker {
  display: none;
}

& .locli-project-switcher summary:hover {
  background: var(--locli-background);
}

& .locli-project-switcher__mark,
& .locli-project-switcher__option-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-sm);
  background: var(--locli-green-100);
  color: var(--locli-green-700);
  font-weight: 700;
}

& .locli-project-switcher__mark {
  width: 2rem;
  height: 2rem;
  font-size: var(--locli-type-small);
}

& .locli-project-switcher__current {
  display: grid;
  min-width: 0;
  flex: 1;
}

& .locli-project-switcher__current strong,
& .locli-project-switcher__current small,
& .locli-project-switcher__option strong,
& .locli-project-switcher__option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-project-switcher__current strong {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-project-switcher__current small {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-project-switcher summary > .locli-icon {
  color: var(--locli-muted);
  transition: transform 140ms ease;
}

& .locli-project-switcher[open] summary > .locli-icon {
  transform: rotate(180deg);
}

& .locli-project-switcher__menu {
  position: absolute;
  top: calc(100% + var(--locli-space-2));
  left: 0;
  z-index: 40;
  width: min(20rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  box-shadow: var(--locli-shadow-card);
}

& .locli-project-switcher__label {
  margin: 0;
  padding: var(--locli-space-3) var(--locli-space-3) var(--locli-space-2);
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  font-weight: 700;
  line-height: var(--locli-type-label-line);
  text-transform: uppercase;
}

& .locli-project-switcher__options {
  display: grid;
  max-height: min(22rem, calc(100vh - 12rem));
  gap: var(--locli-space-1);
  overflow-y: auto;
  padding: 0 var(--locli-space-2) var(--locli-space-2);
}

& .locli-project-switcher__option {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--locli-space-3);
  border-radius: var(--locli-radius-sm);
  padding: var(--locli-space-2);
  text-decoration: none;
}

& .locli-project-switcher__option:hover,
& .locli-project-switcher__option.is-current {
  background: var(--locli-green-50);
}

& .locli-project-switcher__option-mark {
  width: 2rem;
  height: 2rem;
  font-size: var(--locli-type-label);
}

& .locli-project-switcher__option > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

& .locli-project-switcher__option strong {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-project-switcher__option small {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-project-switcher__option > .locli-icon {
  color: var(--locli-green-700);
}

& .locli-project-switcher__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--locli-divider);
  padding: var(--locli-space-2);
}

& .locli-project-switcher__footer a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
  border-radius: var(--locli-radius-sm);
  color: var(--locli-text);
  font-size: var(--locli-type-label);
  font-weight: 650;
  text-decoration: none;
}

& .locli-project-switcher__footer a:hover {
  background: var(--locli-background);
  color: var(--locli-green-700);
}

& .locli-voice-panel__expand {
  display: none;
}

& .locli-voice-panel__content {
  min-height: 0;
  overflow: hidden;
}

& .locli-conversation-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

& .locli-conversation-shell[hidden] {
  display: none;
}

& .locli-conversation {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: var(--locli-space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--locli-space-6) var(--locli-space-6) var(--locli-space-8) var(--locli-space-4);
  background: #fafbfc;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
}

& .locli-conversation-welcome {
  display: flex;
  align-items: flex-start;
  gap: var(--locli-space-3);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  padding: var(--locli-space-4);
}

& .locli-conversation-welcome strong {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
}

& .locli-conversation-welcome p {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-small-line);
}

& .locli-conversation-entry {
  display: grid;
  gap: var(--locli-space-3);
  scroll-margin: var(--locli-space-6);
}

& .locli-conversation-entry + .locli-conversation-entry {
  border-top: 1px solid var(--locli-divider);
  padding-top: var(--locli-space-6);
}

& .locli-conversation-message {
  min-width: 0;
}

& .locli-conversation-message--user {
  display: grid;
  justify-items: end;
  margin-left: var(--locli-space-8);
}

& .locli-conversation-message--locli {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--locli-space-2);
}

& .locli-conversation-message__avatar {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-conversation-entry.is-active .locli-conversation-message__avatar:not(.is-processing) .locli-icon {
  animation: locli-check-in 180ms ease-out;
}

& .locli-conversation-message__body {
  display: grid;
  min-width: 0;
  gap: var(--locli-space-1);
}

& .locli-conversation-message__meta {
  display: flex;
  align-items: center;
  gap: var(--locli-space-2);
  margin-bottom: var(--locli-space-1);
  color: var(--locli-muted);
  font-size: 0.6875rem;
  line-height: 1.3;
}

& .locli-conversation-message--user .locli-conversation-message__meta {
  justify-content: flex-end;
}

& .locli-conversation-message__meta strong {
  color: var(--locli-text);
  font-weight: 700;
}

& .locli-conversation-message__bubble {
  max-width: 100%;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  color: var(--locli-text);
  padding: var(--locli-space-3);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
  overflow-wrap: anywhere;
}

& .locli-conversation-message--user .locli-conversation-message__bubble {
  border-color: #cfe0f3;
  background: #eef6ff;
}

& .locli-conversation-message__bubble h3 {
  margin: 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  font-weight: 700;
  line-height: var(--locli-type-small-line);
}

& .locli-conversation-message__bubble > p {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-small-line);
}

& .locli-conversation-entry.is-newly-applied .locli-conversation-message--locli .locli-conversation-message__bubble {
  border-color: var(--locli-green-100);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.08);
}

& .locli-conversation-entry.is-selected .locli-conversation-message--locli .locli-conversation-message__bubble {
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.12);
}

& .locli-conversation-status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-neutral-bg);
  color: var(--locli-muted);
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
}

& .locli-conversation-status--proposal_ready {
  background: #eff6ff;
  color: #1d4ed8;
}

& .locli-conversation-status--completed {
  background: var(--locli-success-bg);
  color: var(--locli-success);
}

& .locli-conversation-status--failed {
  background: var(--locli-danger-bg);
  color: var(--locli-danger);
}

& .locli-conversation-status--discarded {
  color: var(--locli-text-tertiary);
}

& .locli-conversation-status--undone {
  background: var(--locli-neutral-bg);
  color: var(--locli-text);
}

& .locli-conversation-activity {
  display: grid;
  gap: var(--locli-space-2);
  margin: var(--locli-space-3) 0 0;
  border-top: 1px solid var(--locli-divider);
  padding: var(--locli-space-3) 0 0;
  list-style: none;
}

& .locli-conversation-activity__item {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--locli-space-2);
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
}

& .locli-conversation-activity__icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-conversation-activity__item--undone .locli-conversation-activity__icon,
& .locli-conversation-activity__item--discarded .locli-conversation-activity__icon {
  background: var(--locli-neutral-bg);
  color: var(--locli-muted);
}

& .locli-conversation-activity__item strong {
  overflow-wrap: anywhere;
  color: var(--locli-text);
  font-weight: 650;
}

& .locli-conversation-activity__item time {
  color: var(--locli-text-tertiary);
  white-space: nowrap;
}

& .locli-conversation-message__bubble .locli-voice-change-list,
& .locli-conversation-message__bubble .locli-confirmation-stack,
& .locli-conversation-message__bubble .locli-voice-actions {
  margin-top: var(--locli-space-3);
}

& .locli-conversation-message__bubble .locli-voice-change-list li {
  gap: var(--locli-space-2);
  font-size: var(--locli-type-label);
}

& .locli-conversation-message__bubble .locli-confirmation-card {
  padding: var(--locli-space-3);
}

& .locli-conversation-message__bubble .locli-voice-actions {
  padding-top: var(--locli-space-3);
}

& .locli-conversation-composer {
  position: relative;
  z-index: 15;
  display: grid;
  gap: var(--locli-space-2);
  border-top: 1px solid var(--locli-border);
  background: var(--locli-surface);
  padding: var(--locli-space-3) var(--locli-space-6) var(--locli-space-4) var(--locli-space-4);
  box-shadow: 0 -6px 18px rgb(15 23 42 / 0.04);
}

& .locli-conversation-composer .locli-conversation-composer__voice {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--locli-space-2);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-background);
  padding: var(--locli-space-2);
}

& .locli-conversation-composer__separator {
  display: flex;
  align-items: center;
  gap: var(--locli-space-2);
  color: var(--locli-text-tertiary);
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
}

& .locli-conversation-composer__separator::before,
& .locli-conversation-composer__separator::after {
  height: 1px;
  flex: 1;
  background: var(--locli-divider);
  content: "";
}

& .locli-conversation-composer__text-form {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--locli-space-2);
}

& .locli-conversation-composer__text-form .locli-textarea {
  min-height: 3rem;
  max-height: 8rem;
  resize: vertical;
}

& .locli-conversation-composer__text-form .locli-button {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}

& .locli-conversation-composer .locli-language-menu__popover {
  top: auto;
  bottom: calc(100% + var(--locli-space-2));
}

& .locli-conversation-composer .locli-language-menu.is-disabled > summary {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

& .locli-voice-resizer {
  position: relative;
  z-index: 20;
  display: flex;
  grid-area: resizer;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--locli-border);
  border-left: 1px solid var(--locli-border);
  background: var(--locli-background);
  color: var(--locli-text-tertiary);
  cursor: col-resize;
  touch-action: none;
}

& .locli-voice-resizer::before {
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: transparent;
  content: "";
}

& .locli-voice-resizer:hover,
& .locli-voice-resizer:focus-visible {
  background: #eef6ff;
  color: #2563eb;
  outline: none;
}

& .locli-voice-resizer:hover::before,
& .locli-voice-resizer:focus-visible::before {
  background: #60a5fa;
}

& .locli-voice-panel__content > .locli-voice-request-card,
& .locli-voice-panel__content > .locli-voice-state-card {
  height: 100%;
}

& .locli-voice-request-card,
& .locli-voice-state-card {
  display: grid;
  gap: var(--locli-space-6);
  min-height: 0;
  overflow: auto;
  padding: var(--locli-space-6) var(--locli-space-4);
}

& .locli-voice-request-card--dock {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--locli-space-6);
}

& .locli-voice-command-dock {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--locli-space-3);
}

& .locli-voice-request-card__heading,
& .locli-voice-state-card__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--locli-space-4);
}

& .locli-voice-request-card__heading strong {
  color: var(--locli-ink);
}

& .locli-voice-request-card__icon,
& .locli-voice-state-card__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-voice-request-card h2,
& .locli-voice-state-card h2,
& .locli-voice-change-list h3,
& .locli-confirmation-stack h3,
& .locli-voice-clarification h3 {
  margin: 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-card);
  font-weight: 650;
  line-height: var(--locli-type-card-line);
}

& .locli-voice-request-card__heading p,
& .locli-voice-state-card__heading p:last-child {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-voice-form {
  display: grid;
  gap: var(--locli-space-4);
}

& .locli-voice-form--dock {
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  gap: var(--locli-space-2);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-background);
  padding: var(--locli-space-2);
}

& .locli-voice-recorder {
  display: grid;
  justify-items: center;
  gap: var(--locli-space-3);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-background);
  padding: var(--locli-space-8) var(--locli-space-6);
}

& .locli-voice-form--compact {
  gap: var(--locli-space-3);
}

& .locli-voice-recorder--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-2);
  padding: var(--locli-space-4);
}

& .locli-voice-recorder--dock {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--locli-space-2);
  border: 0;
  background: transparent;
  padding: 0;
}

& .locli-voice-record-button {
  display: grid;
  justify-items: center;
  gap: var(--locli-space-3);
  border: 0;
  background: transparent;
  color: var(--locli-ink);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

& .locli-voice-record-button > span {
  position: relative;
  display: inline-flex;
  width: 5rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #15803d;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-600);
  color: white;
  box-shadow: 0 8px 24px rgb(22 163 74 / 0.2);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

& .locli-voice-record-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}

& .locli-voice-record-button__icon--loader {
  display: none;
}

& .locli-voice-record-button.is-processing .locli-voice-record-button__icon--microphone {
  display: none;
}

& .locli-voice-record-button.is-processing .locli-voice-record-button__icon--loader {
  display: block;
}

& .locli-voice-record-button--compact {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
}

& .locli-voice-record-button--compact strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-voice-record-button--dock {
  display: inline-flex;
  min-width: 0;
  min-height: 3.25rem;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: var(--locli-space-2);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-green-600);
  color: white;
  padding: 0.375rem var(--locli-space-3) 0.375rem 0.375rem;
  box-shadow: var(--locli-shadow-sm);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

& .locli-voice-record-button--dock strong {
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: var(--locli-type-small-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-voice-record-button--compact > span {
  width: 3rem;
  height: 3rem;
  box-shadow: none;
}

& .locli-voice-record-button--dock > span {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: rgb(255 255 255 / 0.14);
  box-shadow: none;
}

& .locli-voice-record-button--dock:hover {
  background: var(--locli-green-700);
}

& .locli-voice-record-button:hover > span {
  background: var(--locli-green-700);
}

& .locli-voice-record-button:focus-visible > span {
  outline: 3px solid rgb(34 197 94 / 0.3);
  outline-offset: 3px;
}

& .locli-voice-record-button.is-pressed > span {
  border-color: var(--locli-warning);
  background: var(--locli-warning);
  box-shadow: 0 4px 14px rgb(180 83 9 / 0.22), 0 0 0 5px rgb(180 83 9 / 0.1);
}

& .locli-voice-record-button.is-recording > span {
  border-color: var(--locli-danger);
  background: var(--locli-danger);
  box-shadow: 0 4px 14px rgb(220 38 38 / 0.24), 0 0 0 5px rgb(220 38 38 / 0.12);
}

& .locli-voice-record-button--dock.is-pressed {
  background: var(--locli-warning);
  box-shadow: 0 0 0 4px rgb(180 83 9 / 0.1);
}

& .locli-voice-record-button--dock.is-recording {
  background: var(--locli-danger);
  box-shadow: 0 0 0 4px rgb(220 38 38 / 0.12);
}

& .locli-voice-record-button.locli-voice-record-button--dock:hover > span,
& .locli-voice-record-button.locli-voice-record-button--dock.is-pressed > span,
& .locli-voice-record-button.locli-voice-record-button--dock.is-recording > span {
  background: rgb(255 255 255 / 0.16);
  box-shadow: none;
}

& .locli-voice-record-button.is-recording > span::after {
  position: absolute;
  inset: -0.3rem;
  border: 2px solid rgb(220 38 38 / 0.24);
  border-radius: var(--locli-radius-full);
  content: "";
}

& .locli-voice-record-button--dock.is-recording > span::after {
  border-color: rgb(255 255 255 / 0.36);
}

& .locli-voice-record-button.is-processing:disabled {
  color: var(--locli-muted);
  opacity: 1;
}

& .locli-voice-record-button--dock.is-processing:disabled {
  background: var(--locli-ink);
  color: white;
  box-shadow: none;
}

& .locli-voice-record-button--dock.is-processing:disabled > span {
  border-color: transparent;
  background: rgb(255 255 255 / 0.12);
  box-shadow: none;
}

& .locli-voice-record-button--compact.is-processing:disabled > span {
  border-color: var(--locli-ink);
  background: var(--locli-ink);
  color: white;
  box-shadow: none;
}

& .locli-voice-record-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

& .locli-voice-recorder__status,
& .locli-voice-recorder__timer {
  margin: 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-voice-recorder__meta {
  display: grid;
  width: 4.5rem;
  flex: 0 0 auto;
  gap: 0;
}

& .locli-voice-recorder__status.is-live {
  color: var(--locli-danger);
  font-weight: 650;
}

& .locli-voice-recorder__status.is-starting {
  color: var(--locli-warning);
  font-weight: 650;
}

& .locli-voice-recorder__timer {
  color: var(--locli-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

& .locli-voice-type-toggle {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  color: var(--locli-green-700);
  padding: var(--locli-space-2) var(--locli-space-3);
  font-size: var(--locli-type-small);
  font-weight: 650;
  cursor: pointer;
  width: 100%;
}

& .locli-voice-type-toggle:hover {
  border-color: var(--locli-green-600);
  background: var(--locli-green-50);
}

& .locli-voice-typed {
  grid-column: 1 / -1;
  border-top: 1px solid var(--locli-divider);
  padding-top: var(--locli-space-4);
}

& .locli-language-menu {
  position: relative;
  flex: 0 0 auto;
}

& .locli-language-menu summary {
  list-style: none;
}

& .locli-language-menu summary::-webkit-details-marker {
  display: none;
}

& .locli-language-menu.has-selection summary::after {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.4rem;
  height: 0.4rem;
  border: 2px solid white;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-600);
  content: "";
}

& .locli-language-menu__popover {
  position: absolute;
  top: calc(100% + var(--locli-space-2));
  bottom: auto;
  left: 0;
  z-index: 20;
  display: grid;
  width: min(18rem, calc(100vw - 2rem));
  gap: var(--locli-space-2);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  padding: var(--locli-space-4);
  box-shadow: var(--locli-shadow-card);
}

& .locli-voice-transcript {
  border-left: 3px solid var(--locli-green-600);
  background: var(--locli-green-50);
  padding: var(--locli-space-4);
}

& .locli-voice-transcript span {
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 700;
  text-transform: uppercase;
}

& .locli-voice-transcript blockquote {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-voice-change-list,
& .locli-confirmation-stack,
& .locli-voice-clarification {
  display: grid;
  gap: var(--locli-space-3);
}

& .locli-voice-clarification__divider {
  display: flex;
  align-items: center;
  gap: var(--locli-space-3);
  margin: 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
}

& .locli-voice-clarification__divider::before,
& .locli-voice-clarification__divider::after {
  height: 1px;
  flex: 1;
  background: var(--locli-divider);
  content: "";
}

& .locli-voice-change-list ul {
  display: grid;
  gap: var(--locli-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

& .locli-voice-change-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--locli-space-3);
  color: var(--locli-text);
  font-size: var(--locli-type-small);
}

& .locli-voice-change-list li span {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-success-bg);
  color: var(--locli-success);
}

& .locli-confirmation-card {
  display: flex;
  align-items: flex-start;
  gap: var(--locli-space-3);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  padding: var(--locli-space-4);
}

& .locli-confirmation-card > span {
  display: grid;
  gap: var(--locli-space-1);
  min-width: 0;
}

& .locli-confirmation-card strong,
& .locli-confirmation-card b,
& .locli-confirmation-card small {
  overflow-wrap: anywhere;
}

& .locli-confirmation-card strong,
& .locli-confirmation-card small {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-confirmation-card b {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
}

& .locli-voice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--locli-space-2);
  border-top: 1px solid var(--locli-divider);
  padding-top: var(--locli-space-4);
}

& .locli-voice-actions form {
  margin: 0;
}

& .locli-voice-preview-action {
  display: none;
}

& .locli-version-history {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

& .locli-version-history[hidden] {
  display: none;
}

& .locli-version-history__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--locli-space-3);
  border-bottom: 1px solid var(--locli-divider);
  padding: var(--locli-space-4);
}

& .locli-version-history__header h2 {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-ink);
  font-size: var(--locli-type-card);
  line-height: var(--locli-type-card-line);
}

& .locli-version-history__header p:last-child {
  margin: var(--locli-space-1) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-version-history__list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--locli-space-3);
  scrollbar-gutter: stable;
}

& .locli-version-history__page-frame {
  display: block;
}

& .locli-version-history__page {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--locli-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

& .locli-version-history__page-frame + .locli-version-history__page-frame,
& .locli-version-history__page-frame > .locli-version-history__page-frame {
  margin-top: var(--locli-space-2);
}

& .locli-version-history__load-more,
& .locli-version-history__end {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
}

& .locli-version-history__load-more .locli-icon {
  color: var(--locli-green-700);
}

& .locli-version-history__page-link {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  padding: 0 var(--locli-space-3);
  color: var(--locli-green-700);
  font-weight: 650;
  text-decoration: none;
}

& .locli-version-history__page-link:hover {
  border-color: var(--locli-green-600);
  background: var(--locli-green-50);
}

& .locli-version-history__item {
  overflow: hidden;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

& .locli-version-history__item:hover,
& .locli-version-history__item.is-selected {
  border-color: var(--locli-green-600);
}

& .locli-version-history__item.is-selected {
  box-shadow: 0 0 0 2px var(--locli-green-100);
}

& .locli-version-history__preview {
  display: grid;
  width: 100%;
  gap: var(--locli-space-2);
  border: 0;
  background: transparent;
  padding: var(--locli-space-3);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

& .locli-version-history__item-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-2);
}

& .locli-version-history__item-topline > strong {
  color: var(--locli-ink);
  font-size: var(--locli-type-small);
}

& .locli-version-history__badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--locli-space-1);
}

& .locli-version-history__summary,
& .locli-version-history__meta {
  overflow-wrap: anywhere;
}

& .locli-version-history__summary {
  color: var(--locli-text);
  font-size: var(--locli-type-small);
  line-height: var(--locli-type-small-line);
}

& .locli-version-history__meta {
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
  line-height: var(--locli-type-label-line);
}

& .locli-version-history__restore {
  display: inline-flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
  border: 0;
  border-top: 1px solid var(--locli-divider);
  background: var(--locli-background);
  color: var(--locli-green-700);
  font-size: var(--locli-type-small);
  font-weight: 650;
  cursor: pointer;
}

& .locli-version-history__restore:hover {
  background: var(--locli-green-50);
}

& .locli-voice-preview {
  display: grid;
  grid-area: preview;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f8fafc;
}

& .locli-voice-preview__toolbar {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--locli-space-4);
  border-bottom: 1px solid var(--locli-border);
  background: var(--locli-surface);
  padding: var(--locli-space-2) var(--locli-space-4);
}

& .locli-voice-preview__toolbar-start {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-2);
}

& .locli-voice-preview__toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-2);
}

& .locli-editor-publish {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-2);
  border-left: 1px solid var(--locli-divider);
  padding-left: var(--locli-space-2);
}

& .locli-editor-publish form {
  margin: 0;
}

& .locli-editor-publish__button {
  min-height: 2.25rem;
  padding: var(--locli-space-1) var(--locli-space-3);
  white-space: nowrap;
}

& .locli-editor-publish__status {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: var(--locli-space-1);
  color: var(--locli-success);
  font-size: var(--locli-type-label);
  font-weight: 700;
  white-space: nowrap;
}

& .locli-editor-publish__status--working {
  color: var(--locli-text);
}

& .locli-publication-dialog {
  position: fixed;
  inset: 0;
  width: min(30rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  margin: auto;
  border: 0;
  border-radius: var(--locli-radius);
  background: transparent;
  padding: 0;
  color: var(--locli-ink);
  box-shadow: var(--locli-shadow-lg);
}

& .locli-publication-dialog::backdrop {
  background: rgb(15 23 42 / 0.48);
  backdrop-filter: blur(2px);
}

& .locli-publication-dialog__surface {
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  padding: var(--locli-space-6);
}

& .locli-publication-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

& .locli-publication-dialog__icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-primary-light);
  color: var(--locli-primary);
}

& .locli-publication-dialog h2 {
  margin: var(--locli-space-5) 0 0;
  font-size: var(--locli-type-h2);
  line-height: var(--locli-type-h2-line);
}

& .locli-publication-dialog p {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-body);
  line-height: var(--locli-type-body-line);
}

& .locli-publication-dialog__field {
  display: grid;
  gap: var(--locli-space-2);
  margin-top: var(--locli-space-5);
}

& .locli-publication-dialog__field label {
  color: var(--locli-text);
  font-size: var(--locli-type-small);
  font-weight: 700;
}

& .locli-publication-dialog__field input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  padding: 0 var(--locli-space-3);
  color: var(--locli-ink);
  font: inherit;
}

& .locli-publication-dialog__field input:focus {
  border-color: var(--locli-primary);
  outline: 3px solid var(--locli-primary-light);
}

& .locli-publication-dialog__url {
  overflow: hidden;
  margin-top: var(--locli-space-5);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-background);
  padding: var(--locli-space-3);
  color: var(--locli-text);
  font-size: var(--locli-type-label);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

& .locli-publication-dialog__checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--locli-space-2) var(--locli-space-4);
  margin: var(--locli-space-5) 0 0;
  padding: 0;
  color: var(--locli-text);
  font-size: var(--locli-type-label);
  list-style: none;
}

& .locli-publication-dialog__checklist li {
  display: flex;
  align-items: center;
  gap: var(--locli-space-2);
}

& .locli-publication-dialog__checklist .locli-icon {
  color: var(--locli-success);
}

& .locli-publication-dialog__icon--danger {
  background: var(--locli-danger-bg);
  color: var(--locli-danger);
}

& .locli-publication-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--locli-space-2);
  margin-top: var(--locli-space-6);
}

& .locli-publication-dialog__actions form {
  margin: 0;
}

& .locli-editor-publish__menu {
  position: relative;
}

& .locli-editor-publish__menu > summary {
  list-style: none;
}

& .locli-editor-publish__menu > summary::-webkit-details-marker {
  display: none;
}

& .locli-editor-publish__menu-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--locli-space-2));
  right: 0;
  width: 12rem;
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  padding: var(--locli-space-1);
  box-shadow: var(--locli-shadow-card);
}

& .locli-editor-publish__menu-popover > button {
  width: 100%;
  border: 0;
  border-radius: var(--locli-radius-sm);
  background: transparent;
  padding: var(--locli-space-2) var(--locli-space-3);
  color: var(--locli-danger);
  font: inherit;
  font-size: var(--locli-type-small);
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

& .locli-editor-publish__menu-popover > button:hover {
  background: var(--locli-danger-bg);
}

& .locli-editor-publish__failure {
  display: inline-flex;
  color: var(--locli-danger);
}

& .locli-publication-toasts {
  position: fixed;
  z-index: 100;
  top: var(--locli-space-5);
  right: var(--locli-space-5);
  display: grid;
  width: min(24rem, calc(100vw - 2rem));
  gap: var(--locli-space-2);
  pointer-events: none;
}

& .locli-publication-toast {
  display: flex;
  align-items: center;
  gap: var(--locli-space-3);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-surface);
  padding: var(--locli-space-3);
  color: var(--locli-text);
  box-shadow: var(--locli-shadow-lg);
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}

& .locli-publication-toast.is-leaving {
  opacity: 0;
  transform: translateY(-0.375rem);
}

& .locli-publication-toast--success .locli-publication-toast__icon {
  color: var(--locli-success);
}

& .locli-publication-toast--danger .locli-publication-toast__icon {
  color: var(--locli-danger);
}

& .locli-publication-toast p {
  flex: 1;
  margin: 0;
  font-size: var(--locli-type-small);
  font-weight: 650;
}

& .locli-publication-toast__dismiss {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--locli-radius-sm);
  background: transparent;
  color: var(--locli-muted);
  cursor: pointer;
}

& .locli-publication-toast__dismiss:hover {
  background: var(--locli-neutral-bg);
  color: var(--locli-ink);
}

@media (max-width: 520px) {
  & .locli-publication-dialog__checklist {
    grid-template-columns: 1fr;
  }

  & .locli-publication-toasts {
    top: var(--locli-space-3);
    right: var(--locli-space-3);
  }
}

& .locli-voice-preview__history-label {
  border-radius: var(--locli-radius-full);
  background: var(--locli-neutral-bg);
  color: var(--locli-text);
  padding: var(--locli-space-1) var(--locli-space-2);
  font-size: var(--locli-type-label);
  font-weight: 650;
}

& .locli-voice-preview__history-label[hidden] {
  display: none;
}

& .locli-voice-preview__mode,
& .locli-voice-preview__devices {
  display: inline-flex;
  align-items: center;
  gap: var(--locli-space-1);
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-sm);
  background: var(--locli-background);
  padding: 0.1875rem;
}

& .locli-voice-preview__mode button,
& .locli-voice-preview__devices button {
  min-height: 2rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--locli-muted);
  padding: 0.25rem 0.625rem;
  font-size: var(--locli-type-label);
  font-weight: 650;
  cursor: pointer;
}

& .locli-voice-preview__mode button.is-active,
& .locli-voice-preview__devices button.is-active {
  background: var(--locli-surface);
  color: var(--locli-ink);
  box-shadow: 0 0 0 1px var(--locli-border), var(--locli-shadow-sm);
}

& .locli-voice-preview__mode button:not(.is-active, :disabled):hover,
& .locli-voice-preview__devices button:not(.is-active):hover {
  background: var(--locli-neutral-bg);
  color: var(--locli-ink);
}

& .locli-voice-preview__mode button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

& .locli-voice-preview__stage {
  position: relative;
  display: flex;
  min-height: 0;
  justify-content: center;
  overflow: auto;
  padding: 0;
}

& .locli-voice-preview__stage.is-updated {
  animation: locli-preview-updated 1.6s ease-out;
}

& .locli-voice-preview__feedback {
  position: absolute;
  top: var(--locli-space-4);
  left: 50%;
  z-index: 10;
  display: grid;
  max-width: min(30rem, calc(100% - (2 * var(--locli-space-4))));
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--locli-space-2);
  border: 1px solid var(--locli-green-100);
  border-radius: var(--locli-radius);
  background: var(--locli-surface);
  color: var(--locli-text);
  padding: var(--locli-space-2);
  box-shadow: var(--locli-shadow-card);
  font-size: var(--locli-type-label);
  font-weight: 700;
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

& .locli-voice-preview__feedback.is-leaving {
  opacity: 0;
  transform: translate(-50%, -0.375rem);
}

& .locli-voice-preview__feedback--error {
  border-color: #fecaca;
}

& .locli-voice-preview__feedback-icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-voice-preview__feedback--error .locli-voice-preview__feedback-icon {
  background: var(--locli-danger-bg);
  color: var(--locli-danger);
}

& .locli-voice-preview__feedback-message {
  min-width: 0;
  line-height: var(--locli-type-small-line);
}

& .locli-voice-preview__feedback-dismiss {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--locli-radius-sm);
  background: transparent;
  color: var(--locli-muted);
  cursor: pointer;
}

& .locli-voice-preview__feedback-dismiss:hover,
& .locli-voice-preview__feedback-dismiss:focus-visible {
  background: var(--locli-neutral-bg);
  color: var(--locli-text);
}

& .locli-voice-preview__stage.is-loading .locli-voice-preview__feedback {
  opacity: 0;
}

& .locli-voice-preview__stage iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: white;
  box-shadow: none;
  opacity: 1;
  transition: opacity 140ms ease;
}

& .locli-voice-preview__stage .locli-voice-preview__staging-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

& .locli-voice-preview__stage .locli-voice-preview__staging-frame.is-ready {
  opacity: 1;
}

& .locli-voice-preview__stage.is-loading:not(.is-refreshing) iframe,
& .locli-voice-preview__stage.is-switching:not(.is-refreshing) iframe {
  opacity: 0;
}

& .locli-voice-preview__loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--locli-space-2);
  background: var(--locli-background);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  font-weight: 600;
  pointer-events: none;
}

& .locli-voice-preview__loading[hidden] {
  display: none;
}

& .locli-voice-preview__stage.is-refreshing .locli-voice-preview__loading {
  inset: var(--locli-space-4) auto auto 50%;
  width: max-content;
  max-width: calc(100% - (2 * var(--locli-space-4)));
  border: 1px solid var(--locli-border);
  border-radius: var(--locli-radius-full);
  background: rgb(255 255 255 / 0.94);
  padding: var(--locli-space-2) var(--locli-space-3);
  box-shadow: var(--locli-shadow-card);
  color: var(--locli-text);
  transform: translateX(-50%);
}

& .locli-voice-preview__stage.is-mobile iframe {
  width: min(100%, 24rem);
}

& .locli-voice-mobile-tabs {
  display: none;
}

@media (min-width: 48.0625rem) {
  & .locli-voice-editor.is-editor-panel-collapsed .locli-voice-editor__layout {
    grid-template-areas: "preview";
    grid-template-columns: minmax(0, 1fr);
  }

  & .locli-voice-editor.is-editor-panel-collapsed .locli-voice-panel,
  & .locli-voice-editor.is-editor-panel-collapsed .locli-voice-resizer {
    display: none;
  }

  & .locli-voice-editor.is-editor-panel-collapsed .locli-voice-panel__expand {
    display: inline-flex;
  }
}

@media (max-width: 72rem) {
  & .locli-voice-request-card--dock {
    grid-template-columns: minmax(0, 1fr);
  }

  & .locli-voice-command-dock {
    justify-content: flex-start;
  }
}

@media (max-width: 48rem) {
  & .locli-version-page-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  & .locli-version-page-row > .locli-button {
    grid-column: 2;
    justify-self: start;
  }

  & .locli-voice-editor {
    grid-template-rows: auto minmax(0, 1fr);
  }

  & .locli-voice-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--locli-border);
  }

  & .locli-voice-mobile-tab {
    min-height: 2.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--locli-muted);
    font-weight: 650;
  }

  & .locli-voice-mobile-tab.is-active {
    border-bottom-color: var(--locli-green-600);
    color: var(--locli-green-700);
  }

  & .locli-voice-editor__layout {
    display: block;
    height: calc(100vh - 2.75rem);
    min-height: 0;
  }

  & .locli-voice-panel {
    height: 100%;
    max-height: none;
    border-right: 0;
    padding: 0;
  }

  & .locli-voice-resizer {
    display: none;
  }

  & .locli-voice-panel__collapse,
  & .locli-voice-panel__expand {
    display: none;
  }

  & .locli-voice-panel.is-mobile-hidden {
    display: none;
  }

  & .locli-voice-preview {
    display: none;
    height: 100%;
    min-height: 0;
  }

  & .locli-voice-preview.is-mobile-visible {
    display: grid;
  }

  & .locli-voice-preview__stage iframe {
    min-height: 0;
  }

  & .locli-voice-request-card--dock {
    display: grid;
  }

  & .locli-voice-preview-action {
    display: inline-flex;
  }

  & .locli-voice-command-dock,
  & .locli-voice-form--dock {
    align-items: stretch;
    flex-wrap: wrap;
  }
}

@media (max-width: 36rem) {
  & .locli-voice-editor__header .locli-button,
  & .locli-voice-actions,
  & .locli-voice-actions form,
  & .locli-voice-actions .locli-button,
  & .locli-confirmation-stack .locli-button {
    width: 100%;
  }

  & .locli-voice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  & .locli-voice-preview__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  & .locli-voice-command-dock,
  & .locli-voice-form--dock {
    width: 100%;
  }

  & .locli-voice-command-dock {
    align-items: stretch;
    flex-direction: column;
  }

  & .locli-conversation {
    padding: var(--locli-space-4) var(--locli-space-4) var(--locli-space-6);
  }

  & .locli-conversation-composer {
    padding: var(--locli-space-3) var(--locli-space-4);
  }

  & .locli-conversation-message--user {
    margin-left: var(--locli-space-6);
  }

  & .locli-conversation-composer__voice {
    flex-wrap: wrap;
  }

  & .locli-conversation-composer__voice .locli-voice-recorder__meta {
    width: 3.5rem;
  }

}

& .locli-understanding-page {
  display: grid;
  width: min(100%, 48rem);
  gap: var(--locli-space-6);
  margin: 0 auto;
}

& .locli-understanding-header {
  display: grid;
  gap: var(--locli-space-5);
}

& .locli-understanding-back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--locli-space-2);
  color: var(--locli-muted);
  font-size: var(--locli-type-small);
  font-weight: 600;
  text-decoration: none;
}

& .locli-understanding-back:hover {
  color: var(--locli-green-700);
}

& .locli-understanding-eyebrow {
  margin: 0 0 var(--locli-space-2);
  color: var(--locli-green-700);
  font-size: var(--locli-type-label);
  font-weight: 700;
  text-transform: uppercase;
}

& .locli-understanding-intro {
  max-width: 40rem;
  color: var(--locli-muted);
  font-size: 1rem;
  line-height: 1.65;
}

& .locli-understanding-intro p {
  margin: 0;
}

& .locli-understanding-intro p + p {
  margin-top: var(--locli-space-2);
}

& .locli-understanding-failure {
  margin: 0;
}

& .locli-understanding-failure p {
  display: grid;
  gap: var(--locli-space-1);
}

& .locli-understanding-failure strong {
  color: currentColor;
  font-size: 0.9375rem;
}

& .locli-understanding-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--locli-space-4);
  padding: var(--locli-space-6);
}

& .locli-understanding-card__content {
  display: grid;
  min-width: 0;
  gap: var(--locli-space-4);
}

& .locli-understanding-icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--locli-green-50);
  color: var(--locli-green-700);
}

& .locli-understanding-processing {
  align-items: center;
}

& .locli-understanding-processing p,
& .locli-understanding-summary {
  margin: var(--locli-space-2) 0 0;
  color: var(--locli-muted);
}

& .locli-understanding-form {
  margin-top: var(--locli-space-2);
}

& .locli-understanding-form .locli-button,
& .locli-understanding-brief .locli-button {
  width: fit-content;
  min-width: 10rem;
}

& .locli-understanding-brief {
  grid-template-columns: minmax(0, 1fr);
}

& .locli-understanding-label-row {
  display: flex;
  align-items: center;
  gap: var(--locli-space-2);
}

& .locli-understanding-label-row .locli-label {
  margin: 0;
}

& .locli-understanding-suggestion {
  display: inline-flex;
  align-items: center;
  border-radius: var(--locli-radius-full);
  background: var(--locli-info-bg);
  color: var(--locli-info);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.25rem;
  padding: 0 var(--locli-space-2);
}

& .locli-understanding-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--locli-space-2);
  margin: 0;
  color: var(--locli-muted);
  font-size: var(--locli-type-label);
}

@media (max-width: 40rem) {
  & .locli-understanding-card {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--locli-space-4);
  }

  & .locli-understanding-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  & .locli-understanding-form .locli-button,
  & .locli-understanding-brief .locli-button {
    width: 100%;
  }
}
}