:root {
  --instruction-radius: 10px;
  --instruction-border: var(--border, #E1E5EF);
  --instruction-panel: var(--bg-card, #fff);
  --instruction-surface: var(--bg-body, #F6F7FB);
  --instruction-text: var(--text-main, #1E2430);
  --instruction-muted: var(--text-sub, #4B5565);
}

.instruction-manager-page {
  padding-top: 0.85rem;
}

.instruction-shell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 0.85rem;
  min-height: calc(100vh - var(--layout-topbar-height, 56px) - 1.9rem);
}

.instruction-sidebar,
.instruction-workspace {
  min-width: 0;
}

.instruction-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.instruction-sidebar__header,
.workspace-header,
.workspace-panel,
.workspace-empty {
  background: var(--instruction-panel);
  border: 1px solid var(--instruction-border);
  border-radius: var(--instruction-radius);
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.instruction-sidebar__header {
  padding: 1rem;
}

.instruction-eyebrow {
  color: var(--color-primary-dark, #A80F15);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.instruction-sidebar__header h1 {
  color: var(--instruction-text);
  font-size: 1.12rem;
  font-weight: 800;
  margin: 0.15rem 0 0;
}

.instruction-count {
  align-items: center;
  background: rgba(var(--primary-rgb, 215, 25, 32), 0.11);
  border: 1px solid rgba(var(--primary-rgb, 215, 25, 32), 0.18);
  border-radius: 999px;
  color: var(--color-primary, #D71920);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.25rem 0.55rem;
}

.instruction-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.instruction-metrics span,
.instruction-last-updated {
  align-items: center;
  color: var(--instruction-muted);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.35rem;
}

.instruction-metrics span {
  background: var(--instruction-surface);
  border: 1px solid var(--instruction-border);
  border-radius: 999px;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
}

.instruction-last-updated {
  margin-top: 0.55rem;
}

.instruction-search {
  align-items: center;
  background: #fff;
  border: 1px solid var(--instruction-border);
  border-radius: 9px;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.45rem 0.65rem;
}

.instruction-search i {
  color: var(--instruction-muted);
}

.instruction-search input {
  border: 0;
  color: var(--instruction-text);
  font-size: 0.9rem;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.instruction-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.42rem;
  max-height: calc(100vh - var(--layout-topbar-height, 56px) - 12rem);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.instruction-list-item {
  background: linear-gradient(135deg, #fff 0%, #fafbfd 100%);
  border: 1px solid var(--instruction-border);
  border-radius: var(--instruction-radius);
  cursor: pointer;
  display: block;
  padding: 0.85rem 0.95rem;
  position: relative;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  width: 100%;
}

.instruction-list-item:hover {
  border-color: rgba(var(--primary-rgb, 215, 25, 32), 0.35);
  box-shadow: 0 8px 18px rgba(22, 34, 56, 0.08);
  transform: translateY(-1px);
}

.instruction-list-item.active {
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 215, 25, 32), 0.09) 0%, rgba(var(--primary-rgb, 215, 25, 32), 0.03) 100%);
  border-color: var(--color-primary, #D71920);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 215, 25, 32), 0.1);
}

.instruction-list-item.active::before {
  background: var(--color-primary, #D71920);
  border-radius: 0 4px 4px 0;
  bottom: 12px;
  content: "";
  left: 0;
  position: absolute;
  top: 12px;
  width: 3px;
}

.instruction-list-item__title {
  align-items: center;
  color: var(--instruction-text);
  display: flex;
  font-size: 0.94rem;
  font-weight: 800;
  gap: 0.45rem;
  min-width: 0;
}

.instruction-list-item__title span,
.instruction-list-item__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instruction-list-item__title i {
  color: var(--color-primary, #D71920);
  flex: 0 0 auto;
}

.instruction-list-item__desc {
  color: var(--instruction-muted);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.instruction-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.instruction-list-item__meta span {
  align-items: center;
  background: #f1f3f8;
  border: 1px solid var(--instruction-border);
  border-radius: 999px;
  color: var(--instruction-muted);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 800;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
}

.instruction-list-empty {
  align-items: center;
  border: 1px dashed var(--instruction-border);
  border-radius: var(--instruction-radius);
  color: var(--instruction-muted);
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.instruction-sidebar__footer .btn,
.workspace-actions .btn,
.btn-add-item {
  border-radius: 8px;
  font-weight: 700;
}

.instruction-workspace {
  display: flex;
  flex-direction: column;
}

.workspace-empty {
  align-items: center;
  color: var(--instruction-muted);
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  padding: 2rem;
  text-align: center;
}

.workspace-empty__icon {
  align-items: center;
  background: rgba(var(--primary-rgb, 215, 25, 32), 0.1);
  border-radius: 18px;
  color: var(--color-primary, #D71920);
  display: inline-flex;
  font-size: 1.8rem;
  height: 4rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 4rem;
}

.workspace-empty__title {
  color: var(--instruction-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.workspace-empty__desc {
  max-width: 420px;
}

.workspace-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.workspace-header {
  padding: 0.9rem 1rem;
}

.workspace-header__top {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.workspace-title-wrap {
  min-width: 0;
}

.workspace-title-wrap h2 {
  color: var(--instruction-text);
  font-size: 1.14rem;
  font-weight: 800;
  margin: 0;
  overflow-wrap: break-word;
}

.workspace-title-wrap p {
  color: var(--instruction-muted);
  font-size: 0.84rem;
  margin: 0.18rem 0 0;
  overflow-wrap: break-word;
}

.workspace-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.workspace-toolbar {
  align-items: center;
  border-top: 1px solid rgba(225, 229, 239, 0.75);
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding-top: 0.75rem;
}

.workspace-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.workspace-stats div {
  background: var(--instruction-surface);
  border: 1px solid var(--instruction-border);
  border-radius: 8px;
  min-width: 5.3rem;
  padding: 0.36rem 0.6rem;
}

.workspace-stats strong {
  color: var(--instruction-text);
  display: block;
  font-size: 0.94rem;
  line-height: 1.1;
}

.workspace-stats span {
  color: var(--instruction-muted);
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  margin-top: 0.08rem;
  text-transform: uppercase;
}

.workspace-tabs {
  background: #f0f2f7;
  border: 1px solid var(--instruction-border);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.15rem;
  padding: 0.18rem;
}

.workspace-tab {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--instruction-muted);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
}

.workspace-tab.active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 34, 56, 0.08);
  color: var(--color-primary, #D71920);
}

.workspace-panel {
  display: none;
  padding: 0.8rem;
}

.workspace-panel.active {
  display: block;
}

.ws-data-row {
  align-items: center;
  background: var(--instruction-surface);
  border: 1px solid var(--instruction-border);
  border-radius: 9px;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  padding: 0.62rem 0.72rem;
}

.ws-data-row + .ws-data-row {
  margin-top: 0.38rem;
}

.ws-data-row__main {
  min-width: 0;
}

.ws-data-row__title {
  align-items: center;
  color: var(--instruction-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.94rem;
  font-weight: 800;
  gap: 0.35rem;
}

.ws-data-row__meta {
  color: var(--instruction-muted);
  font-size: 0.8rem;
  margin-top: 0.14rem;
}

.type-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.16rem 0.45rem;
  text-transform: uppercase;
}

.type-badge.type-text {
  background: rgba(61, 127, 193, 0.12);
  color: var(--color-info, #B7791F);
}

.type-badge.type-table {
  background: rgba(45, 143, 111, 0.12);
  color: var(--color-success, #2D8F6F);
}

.data-item-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.data-item-actions .btn {
  --bs-btn-font-size: 0.78rem;
  --bs-btn-padding-x: 0.45rem;
  --bs-btn-padding-y: 0.28rem;
  border-radius: 7px;
}

.btn-add-item {
  background: rgba(var(--primary-rgb, 215, 25, 32), 0.08);
  border: 1px dashed rgba(var(--primary-rgb, 215, 25, 32), 0.35);
  color: var(--color-primary, #D71920);
  width: 100%;
}

.instruction-editor-status {
  align-items: center;
  background: rgba(45, 143, 111, 0.08);
  border: 1px solid rgba(45, 143, 111, 0.18);
  border-radius: 8px;
  color: var(--color-success, #2D8F6F);
  display: flex;
  min-height: 38px;
  padding: 0.45rem 0.65rem;
}

.instruction-editor-status.is-dirty {
  background: rgba(255, 201, 40, 0.12);
  border-color: rgba(255, 201, 40, 0.28);
  color: #9a6a13;
}

.workspace-editor-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: space-between;
  margin-top: 1rem;
}

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

.preview-box {
  background: #111827;
  border-radius: 9px;
  color: #e5e7eb;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
  max-height: 52vh;
  overflow: auto;
  padding: 1rem;
  white-space: pre-wrap;
}

.preview-stats {
  color: var(--instruction-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.preview-stats span {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.starter-status-badge {
  border: 1px solid var(--instruction-border);
}

.starter-status-badge.is-on {
  background: rgba(45, 143, 111, 0.12);
  border-color: rgba(45, 143, 111, 0.26);
  color: var(--color-success, #2D8F6F);
}

.starter-status-badge.is-off {
  background: rgba(139, 146, 163, 0.12);
  border-color: rgba(139, 146, 163, 0.24);
  color: #5c6372;
}

.conversation-starter-modal .modal-body {
  background: #f8f9fc;
}

.starter-modal-switch-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.starter-modal-counter {
  align-items: center;
  background: #fff;
  border: 1px solid var(--instruction-border);
  border-radius: 999px;
  color: var(--instruction-muted);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.starter-modal-help {
  color: var(--instruction-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.starter-modal-toolbar,
.starter-message-actions,
.starter-message-head-left {
  align-items: center;
  display: flex;
  gap: 0.45rem;
}

.starter-modal-toolbar {
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.starter-message-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.starter-message-empty {
  background: #fff;
  border: 1px dashed #d8dde9;
  border-radius: 9px;
  color: var(--instruction-muted);
  font-size: 0.9rem;
  padding: 0.9rem;
  text-align: center;
}

.starter-message-item {
  background: #fff;
  border: 1px solid var(--instruction-border);
  border-radius: 9px;
  padding: 0.75rem;
}

.starter-message-item__head {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.starter-message-order {
  align-items: center;
  background: rgba(var(--primary-rgb, 215, 25, 32), 0.12);
  border-radius: 999px;
  color: var(--color-primary, #D71920);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.starter-message-type {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  text-transform: uppercase;
}

.starter-message-type.type-text {
  background: rgba(61, 127, 193, 0.12);
  color: var(--color-info, #B7791F);
}

.starter-message-type.type-image {
  background: rgba(45, 143, 111, 0.12);
  color: var(--color-success, #2D8F6F);
}

.starter-message-type.type-video {
  background: rgba(198, 122, 38, 0.14);
  color: #9a5b16;
}

.starter-message-actions .btn {
  --bs-btn-font-size: 0.76rem;
  --bs-btn-padding-x: 0.42rem;
  --bs-btn-padding-y: 0.2rem;
}

.starter-message-text {
  min-height: 80px;
  resize: vertical;
}

.starter-message-image-wrap {
  align-items: flex-start;
  display: flex;
  gap: 0.7rem;
}

.starter-message-image-thumb {
  background: #f8f9fc;
  border: 1px solid var(--instruction-border);
  border-radius: 8px;
  height: 92px;
  object-fit: cover;
  width: 92px;
}

.starter-message-image-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.starter-message-image-url {
  color: var(--instruction-muted);
  font-size: 0.78rem;
  word-break: break-all;
}

.starter-message-video-preview {
  background: #f8f9fc;
  border: 1px solid var(--instruction-border);
  border-radius: 8px;
  max-height: 120px;
  max-width: 100%;
  width: 180px;
}

.starter-message-video-empty {
  align-items: center;
  color: var(--instruction-muted);
  display: flex;
  font-weight: 800;
  height: 92px;
  justify-content: center;
}

.app-toast-container {
  position: fixed;
  right: 1rem;
  top: 5rem;
  z-index: 1080;
}

.app-toast {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--instruction-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
  min-width: 260px;
  padding: 0.75rem 0.85rem;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.hide {
  opacity: 0;
  transform: translateY(-6px);
}

.app-toast__icon {
  color: var(--color-primary, #D71920);
}

.app-toast--success .app-toast__icon {
  color: var(--color-success, #2D8F6F);
}

.app-toast--danger .app-toast__icon {
  color: var(--color-danger, #D2555A);
}

.app-toast--warning .app-toast__icon {
  color: var(--color-warning, #B7791F);
}

.app-toast__body {
  flex: 1;
}

.app-toast__title {
  color: var(--instruction-text);
  font-size: 0.9rem;
  font-weight: 700;
}

.app-toast__close {
  background: transparent;
  border: 0;
  color: var(--instruction-muted);
  line-height: 1;
}

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

  .instruction-list {
    max-height: 36vh;
  }

  .workspace-header__top,
  .workspace-toolbar,
  .preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-actions {
    justify-content: flex-start;
  }

  .starter-modal-switch-row,
  .starter-message-image-wrap {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .instruction-manager-page {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .workspace-tabs,
  .workspace-actions,
  .data-item-actions {
    width: 100%;
  }

  .workspace-tab,
  .workspace-actions .btn,
  .data-item-actions .btn {
    flex: 1;
  }

  .ws-data-row {
    align-items: stretch;
    flex-direction: column;
  }
}