/* ========================================
 * AI Panel (ai.css)
 * - Built on top of sf_new.css theme tokens
 * - Theme-aware via CSS variables
 * ======================================== */

/* ----------------------------------------
 * Panel shell
 * ---------------------------------------- */

.panel--ai .code-container.ai-panel-body {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* ----------------------------------------
 * Header status pills
 * ---------------------------------------- */

.ai-panel-status-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.ai-model-pill,
.ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.ai-model-pill i {
  font-size: 11px;
}

.ai-model-name {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Status dot + variants */

.ai-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  flex-shrink: 0;
  background: var(--color-text-muted);
}

.ai-status-dot.ai-status-idle {
  background: var(--color-success);
}

.ai-status-dot.ai-status-busy {
  background: var(--color-info);
}

.ai-status-dot.ai-status-error {
  background: var(--color-danger);
}

/* Optional: tint status pill background by state (if you toggle classes) */

.ai-status-pill.ai-status-idle {
  background: var(--color-success-soft);
  color: var(--color-text);
}

.ai-status-pill.ai-status-busy {
  background: var(--color-info-soft);
  color: var(--color-text);
}

.ai-status-pill.ai-status-error {
  background: var(--color-danger-soft);
  color: var(--color-text);
}

.ai-status-text {
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ----------------------------------------
 * Context bar
 * ---------------------------------------- */

.ai-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-context-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-context-right {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Context chips */

.ai-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 11px;
}

.ai-context-chip i {
  font-size: 11px;
}

/* Highlighted / “attention” context chip (optional class) */

.ai-context-chip--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* ----------------------------------------
 * Chat shell
 * ---------------------------------------- */

.ai-chat-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

/* Optional: slightly different bg to distinguish from editors */
.panel--ai .ai-chat-list {
  background: var(--color-bg);
}

/* ----------------------------------------
 * Messages
 * ---------------------------------------- */

.ai-msg {
  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 8px 10px 6px;
  box-shadow: var(--pz-shadow-soft);
  font-size: 13px;
}

/* Read-only bubbles (author preview on someone else's show) */
.ai-msg--readonly{
  opacity: 0.96;
}
.ai-msg--readonly .ai-msg-actions{
  display: none !important;
}

/* 只读预览：允许看到补丁卡片，但禁用“应用/媒体/CDN”等操作 */
.ai-msg--readonly .ai-edit-card-footer [data-ai-edit-action="apply"],
.ai-msg--readonly .ai-edit-card-footer [data-ai-edit-action="cdn"],
.ai-msg--readonly .ai-edit-card-footer [data-ai-edit-action="media"]{
  display: none !important;
}
.ai-msg--readonly .ai-msg-action{
  pointer-events: none;
}

.ai-msg--assistant {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.ai-msg--user {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

/* Message header */

.ai-msg-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ai-msg-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 12px;
  flex-shrink: 0;
}

.ai-msg-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-msg-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ai-msg-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
}

.ai-msg-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ai-msg-tags {
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Message body */

.ai-msg-body {
  margin-top: 4px;
  /* padding-left: 32px; */
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-msg-markdown {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

.ai-msg-markdown.md-auto-format ol, 
.ai-msg-markdown.md-auto-format ul {
  padding: 0 !important;
  margin: 0 !important;
  padding-left: 1.25em !important;
}

/* Code blocks inside AI markdown */
.ai-msg-markdown pre,
.ai-msg-markdown code {
  font-family: var(--font-mono);
}

/* Card list for patches under a message */

.ai-edit-card-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Message footer: actions */

.ai-msg-footer {
  margin-top: 6px;
  padding-left: 32px;
}

.ai-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-msg-action {
  border: none;
  background: transparent;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.ai-msg-action i {
  font-size: 11px;
}

.ai-msg-action:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

.ai-msg-action.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Puzzle action highlighted slightly more */

.ai-msg-action--puzzle {
  border: 1px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ----------------------------------------
 * Media bubble (generated images)
 * ---------------------------------------- */

.ai-msg-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-msg-media-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--pz-shadow-soft);
  object-fit: cover;
}

.ai-msg-media-caption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
  padding: 0 2px;
  word-break: break-word;
}

.ai-msg-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 520px) {
  .ai-msg-media-img {
    max-width: 100%;
  }
}

/* ----------------------------------------
 * Code replacement / patch cards
 * ---------------------------------------- */

.ai-edit-card {
  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 8px 10px;
  font-size: 12px;
}

.ai-edit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.ai-edit-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--color-text);
}

.ai-edit-card-file {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.ai-edit-card-action {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.ai-edit-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.ai-edit-card-length {
  white-space: nowrap;
}

.ai-edit-card-status {
  white-space: nowrap;
}

/* Body */

.ai-edit-card-body {
  margin-bottom: 6px;
}

.ai-edit-card-preview {
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Progress bar */

.ai-edit-card-progress {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-edit-card-progress-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-bg);
  overflow: hidden;
}

.ai-edit-card-progress-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.25s ease-out;
}

.ai-edit-card-progress-label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Footer */

.ai-edit-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}

/* ----------------------------------------
 * Composer
 * ---------------------------------------- */

.ai-composer-shell {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-composer-top {
  display: flex;
  flex-direction: column;
}

.ai-input {
  width: 100%;
  min-height: 34px;
  max-height: 140px;
  resize: none;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}

.ai-input::placeholder {
  color: var(--color-text-muted);
}

.ai-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-soft);
}

.ai-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-composer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-composer-right {
  display: flex;
  gap: 6px;
}

/* Make composer buttons smaller inside AI panel */

.ai-composer-toolbar .topbar-btn {
  padding-inline: 8px;
  font-size: 11px;
}

/* ----------------------------------------
 * Puzzle panel overlay (extras on top of save-panel styles)
 * ---------------------------------------- */

.puzzle-panel-card {
  max-width: 960px;
}

.puzzle-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 16px;
}

.puzzle-preview {
  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

.puzzle-visibility-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.puzzle-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.puzzle-radio input {
  margin: 0;
}

/* ----------------------------------------
 * Scrollbars (optional, subtle)
 * ---------------------------------------- */

.ai-chat-list::-webkit-scrollbar,
.puzzle-preview::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-list::-webkit-scrollbar-track,
.puzzle-preview::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-list::-webkit-scrollbar-thumb,
.puzzle-preview::-webkit-scrollbar-thumb {
  background: var(--pz-scrollbar-thumb);
  border-radius: 9999px;
}

/* ----------------------------------------
 * Responsive: mobile-friendly layout
 * ---------------------------------------- */

@media (max-width: 768px) {
  .ai-context-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-context-right {
    width: 100%;
    justify-content: flex-start;
  }

  .ai-msg-body,
  .ai-msg-footer {
    padding-left: 0;
  }

  .ai-msg-avatar {
    width: 20px;
    height: 20px;
  }

  .ai-msg {
    padding: 8px 8px 6px;
  }

  .ai-chat-list {
    padding-inline: 6px;
  }
}

@media (max-width: 640px) {
  .ai-composer-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-composer-right {
    align-self: flex-end;
  }

  .ai-panel-status-pills {
    display: none; /* header has less space on very small screens */
  }

  .puzzle-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ========================================
 * AI Snapshots View
 * - lightweight, theme-aware (sf_new.css vars)
 * ======================================== */

.ai-view-stack { min-height: 0; }

.ai-view--snapshots {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.ai-snapshots-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ai-snapshots-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}

.ai-snapshots-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-snapshots-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.ai-snapshots-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  background: var(--color-bg);
}

/* Tree container */
.ai-snapshots-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* details/summary reset */
.ai-snapshots-tree details {
  border-left: 1px solid var(--color-border);
  margin-left: 10px;
  padding-left: 10px;
}

.ai-snapshots-tree details > summary {
  list-style: none;
  cursor: pointer;
}

.ai-snapshots-tree details > summary::-webkit-details-marker {
  display: none;
}

/* Node card */
.ai-snap-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ai-snap-card:hover {
  border-color: var(--color-accent);
}

.ai-snap-thumb {
  width: 54px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-snap-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-snap-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-snap-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-snap-title {
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ai-snap-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg);
  flex: 0 0 auto;
}

.ai-snap-badge--self {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.ai-snap-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-snap-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ai-snap-fav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.ai-snap-fav:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.ai-snap-fav.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.ai-snap-link {
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: none;
}

.ai-snap-link:hover {
  text-decoration: underline;
}

.ai-snap-card.ai-snap-card--self {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* children container (lazy rendered) */
.ai-snap-children {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-snapshots-empty {
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 10px;
  border-radius: var(--panel-radius-sm);
  border: 1px dashed var(--color-border);
}

/* ===== AI view stack: only ONE view visible ===== */
.ai-view-stack{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* prevents "two halves" feeling */
}

.ai-view-stack > .ai-view{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* IMPORTANT: do NOT rely only on [hidden] because some styles/scripts may toggle display.
   We'll also use .is-hidden for hard hide. */
.is-hidden{
  display: none !important;
}

/* Ensure internal scroll areas behave */
.ai-view--chat .ai-chat-shell{
  flex: 1 1 auto;
  min-height: 0;
}

/* ========================================
 * Project Workbench
 * - themed by sf_new.css semantic tokens
 * - used by platform_tasks.js
 * ======================================== */

.ptw-shell{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
  margin-top:14px;
  min-width:0;
  max-width:100%;
  container-type:inline-size;
  container-name:ptw-shell;
}

.ptw-shell-tabs{
  display:none;
  grid-column:1 / -1;
  align-items:center;
  gap:8px;
  padding:4px 0 0;
}

.ptw-shell-tab{
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-text-muted);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
}

.ptw-shell-tab.is-active{
  border-color:var(--color-accent);
  background:var(--ai-workbench-accent-soft);
  color:var(--color-text);
}

.ptw-panel{
  min-width:0;
  border:1px solid var(--ai-workbench-border-strong);
  border-radius:var(--panel-radius-lg);
  background:var(--ai-workbench-surface);
  box-shadow:var(--ai-workbench-shadow);
  padding:14px;
}

.ptw-panel--hero{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 92%, var(--color-bg)), var(--ai-workbench-surface));
}

.ptw-panel--soft{
  background:var(--ai-workbench-surface-soft);
}

.ptw-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.ptw-kicker{
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:6px;
}

.ptw-title{
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:var(--color-text);
}

.ptw-title--hero{
  font-size:18px;
  line-height:1.35;
}

.ptw-subtitle{
  margin-top:4px;
  font-size:12px;
  line-height:1.6;
  color:var(--color-text-muted);
}

.ptw-chip-row,
.ptw-action-row,
.ptw-tabbar,
.ptw-filterbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.ptw-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--ai-workbench-accent-soft);
  color:var(--color-text);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.ptw-chip--ok{
  background:var(--ai-workbench-success-soft);
  border-color:color-mix(in srgb, var(--color-success) 55%, var(--color-border));
}

.ptw-chip--warn{
  background:var(--ai-workbench-warning-soft);
  border-color:color-mix(in srgb, var(--color-warning) 52%, var(--color-border));
}

.ptw-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:10px;
  margin-top:12px;
}

.ptw-layout-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12px;
  margin-top:12px;
}

.ptw-focus-card,
.ptw-next-card{
  padding:14px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
  min-width:0;
}

.ptw-focus-title{
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  color:var(--color-text);
}

.ptw-focus-copy{
  margin-top:6px;
  font-size:13px;
  line-height:1.6;
  color:var(--color-text-muted);
}

.ptw-next-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ptw-next-item{
  padding:10px 12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--ai-workbench-surface-muted);
}

.ptw-next-item strong{
  display:block;
  font-size:12px;
  line-height:1.35;
  color:var(--color-text);
}

.ptw-next-item span{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.5;
  color:var(--color-text-muted);
}

.ptw-choice-groups{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.ptw-choice-group{
  padding:12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
}

.ptw-choice-group--backend{
  background:color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
}

.ptw-choice-group--static{
  background:color-mix(in srgb, var(--color-success) 10%, var(--color-bg));
}

.ptw-choice-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.ptw-choice-group-title{
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:var(--color-text);
}

.ptw-choice-group-copy{
  font-size:11px;
  line-height:1.5;
  color:var(--color-text-muted);
}

.ptw-choice-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ptw-diag{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ptw-diag-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.ptw-diag-card{
  min-width:0;
  padding:13px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
}

.ptw-diag-card--apps{
  background:var(--ai-workbench-surface-muted);
}

.ptw-diag-pair + .ptw-diag-pair{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.ptw-diag-label{
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

.ptw-diag-value{
  margin-top:4px;
  font-size:13px;
  line-height:1.55;
  color:var(--color-text);
}

.ptw-diag-signals{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ptw-diag-signal{
  padding:11px 12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  background:var(--ai-workbench-surface-muted);
}

.ptw-diag-signal-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ptw-diag-signal-title{
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:var(--color-text);
}

.ptw-diag-signal-copy{
  margin-top:6px;
  font-size:12px;
  line-height:1.55;
  color:var(--color-text-muted);
}

.ptw-diag-apps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
}

.ptw-diag-app{
  min-width:0;
  padding:12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
}

.ptw-diag-app-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.ptw-diag-app-title{
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  color:var(--color-text);
}

.ptw-diag-app-copy{
  margin-top:7px;
  font-size:12px;
  line-height:1.6;
  color:var(--color-text-muted);
}

.ptw-metric{
  min-width:0;
  padding:12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
}

.ptw-metric-label{
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

.ptw-metric-value{
  margin-top:6px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color:var(--color-text);
}

.ptw-metric-sub{
  margin-top:5px;
  font-size:12px;
  line-height:1.5;
  color:var(--color-text-muted);
}

.ptw-nav-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.ptw-nav-list--grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.ptw-node-btn{
  width:100%;
  min-width:0;
  text-align:left;
  padding:12px 13px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-text);
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.ptw-node-btn:hover{
  border-color:color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  background:var(--ai-workbench-surface-muted);
  transform:translateY(-1px);
}

.ptw-node-btn.is-active{
  border-color:var(--color-accent);
  background:var(--ai-workbench-accent-soft);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent) inset;
}

.ptw-node-btn--nav{
  padding:14px;
}

.ptw-node-title{
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  color:var(--color-text);
  word-break:break-word;
}

.ptw-node-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}

.ptw-node-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--ai-workbench-surface-muted);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  color:var(--color-text-muted);
  white-space:nowrap;
}

.ptw-node-badge--running{
  border-color:color-mix(in srgb, var(--color-info) 48%, var(--color-border));
  background:color-mix(in srgb, var(--color-info) 16%, transparent);
  color:var(--color-text);
}

.ptw-node-badge--done{
  border-color:color-mix(in srgb, var(--color-success) 52%, var(--color-border));
  background:var(--ai-workbench-success-soft);
  color:var(--color-text);
}

.ptw-node-badge--failed{
  border-color:color-mix(in srgb, var(--color-danger) 52%, var(--color-border));
  background:var(--ai-workbench-danger-soft);
  color:var(--color-text);
}

.ptw-node-badge--queued{
  border-color:color-mix(in srgb, var(--color-warning) 52%, var(--color-border));
  background:var(--ai-workbench-warning-soft);
  color:var(--color-text);
}

.ptw-node-meta{
  margin-top:4px;
  font-size:12px;
  line-height:1.55;
  color:var(--color-text-muted);
  word-break:break-word;
}

.ptw-node-progress{
  margin-top:7px;
  font-size:11px;
  line-height:1.5;
  color:var(--color-text-muted);
}

.ptw-node-foot{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}

.ptw-node-foot .ptw-hint{
  margin:0;
  font-size:11px;
  min-width:0;
  word-break:break-word;
}

.ptw-progress{
  margin-top:8px;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb, var(--color-border) 28%, transparent);
}

.ptw-progress-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, white));
}

.ptw-section{
  margin-top:14px;
}

.ptw-section--soft{
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
}

.ptw-section-title{
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

.ptw-hint{
  font-size:12px;
  line-height:1.6;
  color:var(--color-text-muted);
}

.ptw-empty{
  font-size:12px;
  line-height:1.6;
  color:var(--color-text-muted);
}

.ptw-scroll-x{
  overflow:auto hidden;
  scrollbar-width:thin;
}

.ptw-scroll-box{
  max-height:260px;
  overflow:auto;
  padding:10px 12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-text);
  font-size:12px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}

.ptw-card-list{
  display:grid;
  gap:10px;
}

.ptw-event{
  padding:10px 12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
}

.ptw-event-title{
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  color:var(--color-text);
}

.ptw-event-meta{
  margin-top:4px;
  font-size:11px;
  line-height:1.55;
  color:var(--color-text-muted);
  word-break:break-word;
}

.ptw-json details{
  border:1px solid var(--color-border);
  border-radius:var(--panel-radius-sm);
  background:var(--color-bg);
  padding:10px 12px;
}

.ptw-json summary{
  list-style:none;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  color:var(--color-text);
}

.ptw-json summary::-webkit-details-marker{
  display:none;
}

.ptw-json pre{
  margin:10px 0 0;
  max-height:220px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  line-height:1.55;
  color:var(--color-text-muted);
}

.ptw-tab,
.ptw-filter{
  white-space:nowrap;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-text-muted);
  cursor:pointer;
  font-weight:700;
}

.ptw-tab{
  padding:6px 10px;
  font-size:12px;
}

.ptw-filter{
  padding:5px 9px;
  font-size:11px;
}

.ptw-tab.is-active,
.ptw-filter.is-active{
  border-color:var(--color-accent);
  background:var(--ai-workbench-accent-soft);
  color:var(--color-text);
}

.ptw-action-row .sf-ai-task-copybtn{
  flex:0 0 auto;
}

.ptw-action-row--stack{
  align-items:stretch;
}

.ptw-action-row--stack .sf-ai-task-copybtn{
  min-height:34px;
}

.ptw-detail-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(220px, 280px);
  gap:12px;
}

.ptw-detail-grid > *{
  min-width:0;
}

.ptw-detail-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.ptw-side-card{
  padding:12px;
  border-radius:var(--panel-radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-bg);
  min-width:0;
}

.ptw-side-card .ptw-section-title{
  margin-bottom:6px;
}

.ptw-side-card .ptw-hint{
  margin:0;
  word-break:break-word;
}

.ptw-side-card .sf-ai-task-copybtn,
.ptw-action-row--stack .sf-ai-task-copybtn{
  max-width:100%;
}

@container ptw-shell (max-width: 920px) {
  .ptw-shell-tabs{
    display:flex;
    flex-wrap:wrap;
  }

  .ptw-shell{
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-shell[data-pane="nav"] .ptw-shell-pane--detail{
    display:none;
  }

  .ptw-shell[data-pane="detail"] .ptw-shell-pane--nav{
    display:none;
  }

  .ptw-layout-grid,
  .ptw-detail-grid,
  .ptw-diag-grid{
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-nav-list{
    flex-direction:column;
    overflow:visible;
    padding-bottom:0;
  }

  .ptw-nav-list--grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-node-btn{
    flex:0 1 auto;
    width:100%;
  }

  .ptw-tabbar,
  .ptw-filterbar,
  .ptw-chip-row,
  .ptw-action-row{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
  }

  .ptw-action-row--stack{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-action-row--stack .sf-ai-task-copybtn,
  .ptw-side-card .sf-ai-task-copybtn{
    width:100%;
  }

  .ptw-diag-apps{
    grid-template-columns:minmax(0, 1fr);
  }
}

@container ptw-shell (max-width: 640px) {
  .ptw-panel{
    padding:12px;
  }

  .ptw-title{
    font-size:14px;
  }

  .ptw-title--hero{
    font-size:16px;
  }

  .ptw-subtitle,
  .ptw-hint,
  .ptw-node-meta{
    font-size:11px;
  }

  .ptw-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ptw-scroll-box{
    max-height:220px;
  }
}

@media (max-width: 980px) {
  .ptw-shell{
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-layout-grid,
  .ptw-detail-grid,
  .ptw-diag-grid{
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-nav-list{
    flex-direction:column;
    overflow:visible;
    padding-bottom:0;
  }

  .ptw-nav-list--grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
  }

  .ptw-node-btn{
    flex:0 1 auto;
    width:100%;
  }

  .ptw-tabbar,
  .ptw-filterbar,
  .ptw-chip-row,
  .ptw-action-row{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
  }
}

@media (max-width: 640px) {
  .ptw-panel{
    padding:12px;
  }

  .ptw-title{
    font-size:14px;
  }

  .ptw-subtitle,
  .ptw-hint,
  .ptw-node-meta{
    font-size:11px;
  }

  .ptw-node-btn{
    flex-basis:auto;
  }

  .ptw-node-btn--nav{
    padding:12px;
  }

  .ptw-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ptw-diag-apps{
    grid-template-columns:1fr;
  }

  .ptw-action-row--stack{
    grid-template-columns:1fr;
  }

  .ptw-scroll-box{
    max-height:220px;
  }
}

.ai-view--snapshots .ai-snapshots-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}


/* =========================================
 * AI Diff Overlay (review & apply)
 * ========================================= */
.ai-diff-overlay[hidden] { display: none !important; }

.ai-diff-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-diff-backdrop{
  position: absolute;
  inset: 0;
  background: var(--pz-backdrop);
  backdrop-filter: blur(6px);
}

.ai-diff-card{
  position: relative;
  width: min(1200px, calc(100vw - 24px));
  height: min(760px, calc(100vh - 24px));
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: 0 20px 80px var(--pz-backdrop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

.ai-diff-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ai-diff-titlegroup{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ai-diff-titlegroup h2{
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
}

.ai-diff-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.ai-diff-header-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ai-diff-close{
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
}

.ai-diff-close:hover{
  background: var(--pz-frost-2);
  color: var(--color-text);
}

.ai-diff-body{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.ai-diff-files{
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
}

.ai-diff-files-title{
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.ai-diff-filelist{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-diff-filebtn{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 10px;
  padding: 8px 8px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.ai-diff-filebtn:hover{ border-color: var(--color-accent); }
.ai-diff-filebtn.is-active{
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.ai-diff-warnings{
  padding: 8px;
  border-radius: 10px;
  border: 1px dashed var(--color-border);
  background: var(--pz-mark-warn-bg);
  color: var(--color-text);
  font-size: 12px;
}

.ai-diff-editors{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-diff-editorbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ai-diff-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

.ai-diff-editorgrid{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.ai-diff-editorpane{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}
.ai-diff-editorpane:last-child{ border-right: none; }

.ai-diff-editorlabel{
  padding: 6px 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.ai-diff-cm{
  flex: 1 1 auto;
  min-height: 0;
}
.ai-diff-cm .CodeMirror{
  height: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
}

.ai-diff-footer{
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 820px){
  .ai-diff-body{ grid-template-columns: 1fr; }
  .ai-diff-files{ display: none; }
  .ai-diff-editorgrid{ grid-template-columns: 1fr; }
  .ai-diff-editorpane{ border-right: none; }
}


/* =========================================
 * AI Media Overlay (lightweight)
 * - append to END of ai.css
 * ========================================= */

.ai-media-overlay { position: fixed; inset: 0; z-index: 99999; }
.ai-media-overlay[hidden] { display: none !important; }

.ai-media-backdrop {
  position: absolute;
  inset: 0;
  background: var(--pz-backdrop-soft);
  backdrop-filter: blur(4px);
}

.ai-media-card{
  position: relative;
  margin: 24px auto;
  width: min(1040px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 24px));
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 18px 70px var(--pz-backdrop);
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.ai-media-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ai-media-titlegroup{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-media-titlegroup h2{ margin:0; font-size:14px; }
.ai-media-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}

.ai-media-body{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

.ai-media-slots{
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 10px;
  overflow: auto;
}

.ai-media-slots-title{
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.ai-media-slot{
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 9px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--color-bg);
}

.ai-media-slot:hover{ border-color: var(--color-accent); }

.ai-media-slot.is-active{
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.ai-media-slot-title{ font-size: 12px; color: var(--color-text); margin-bottom: 4px; }
.ai-media-slot-meta{ font-size: 12px; color: var(--color-text-muted); }

.ai-media-dashboard{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-media-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ai-media-tabs{ display:flex; gap: 6px; flex-wrap: wrap; }
.ai-media-tab{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
}
.ai-media-tab.is-active{
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.ai-media-tools{ display:flex; gap: 6px; align-items:center; flex-wrap: wrap; }

.ai-media-query{
  width: min(320px, 42vw);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 7px 9px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 12px;
}

.ai-media-type{
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 7px 9px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 12px;
}

.ai-media-swiper{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 10px;
  background: var(--color-bg);
}

.ai-media-track{
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 10px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

.ai-media-item{
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  height: fit-content;
}

.ai-media-item.is-picked{
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent-soft);
}

.ai-media-item-thumb{
  width: 100%;
  height: 150px;
  background: var(--pz-frost-1);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ai-media-item-thumb img,
.ai-media-item-thumb video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-media-item-body{ padding: 9px; font-size: 12px; }
.ai-media-item-title{ font-size: 12px; color: var(--color-text); margin-bottom: 6px; }
.ai-media-item-meta{ font-size: 12px; color: var(--color-text-muted); }

.ai-media-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--color-border);
  background: var(--pz-tint-3);
  color: var(--color-text);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
}
.ai-media-nav--prev{ left: 10px; }
.ai-media-nav--next{ right: 10px; }
.ai-media-nav:hover{ border-color: var(--color-accent); }

.ai-media-footerbar{
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ai-media-status{ font-size: 12px; color: var(--color-text-muted); }
.ai-media-footer-actions{ display:flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 860px){
  .ai-media-card{
    width: min(960px, calc(100vw - 20px));
    height: min(720px, calc(100vh - 20px));
  }
  .ai-media-body{ grid-template-columns: 1fr; }
  .ai-media-slots{ display: none; }
  .ai-media-track{ grid-auto-columns: 240px; }
}


/* ===========================
   AI Media Overlay: Desktop grid mode
   - Wide screens: multi-row grid + vertical scroll
   - Hide prev/next buttons (they’re for horizontal swiper mode)
   =========================== */

@media (min-width: 861px){
  .ai-media-swiper{
    overflow: hidden; /* keep chrome clean */
  }

  .ai-media-track{
    /* switch from horizontal “swiper row” to a proper responsive grid */
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;

    /* scroll vertically instead of horizontally */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: none;

    /* keep full height usage */
    height: 100%;
    padding-bottom: 10px;
  }

  .ai-media-item{
    scroll-snap-align: unset;
  }

  .ai-media-nav{
    display: none;
  }
}


/* =========================================================
   AI Diff: summary pills + tabs + CodeMirror highlights
   ========================================================= */

.ai-diff-locatorbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ai-diff-tabs{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:12px;
  border:1px solid var(--pz-frost-3);
  background: var(--pz-tint-3);
  backdrop-filter: blur(10px);
}

.ai-diff-tab{
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.75);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}

.ai-diff-tab.is-active{
  background: var(--pz-frost-3);
  color: rgba(255,255,255,0.92);
}

.ai-diff-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ai-diff-pill{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--pz-frost-3);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.85);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ai-diff-pill b{
  font-weight:700;
  color: rgba(255,255,255,0.95);
}

/* CodeMirror marked ranges */
.ai-diff-mark-del{
  background: var(--pz-mark-del-bg);
  border-left: 3px solid var(--pz-mark-del-border);
}

.ai-diff-mark-add{
  background: rgba(80, 255, 160, 0.16);
  border-left: 3px solid rgba(80, 255, 160, 0.55);
}

/* Optional: make highlight visible in dark themes */
.ai-diff-cm .CodeMirror-linebackground{
  opacity: 1;
}


/* sf_puzzle.css
   Puzzle picker UI inside AI panel.
   Targets classes exactly as created in sf.js:
   .ai-puzzle-picker-overlay -> .ai-puzzle-picker-card -> header/toolbar/body/footer
   Uses sf_new.css theme variables with fallbacks.
*/

/* ---------- Theme tokens (fallbacks) ---------- */
body{
  --pz-bg: var(--color-bg, #0f1115);
  --pz-surface: var(--color-bg-elevated, #151924);
  --pz-border: var(--color-border, rgba(255,255,255,.12));
  --pz-text: var(--color-text, rgba(255,255,255,.92));
  --pz-muted: var(--color-text-muted, rgba(255,255,255,.65));
  --pz-accent: var(--color-accent, #5b8cff);
  --pz-accent-soft: var(--color-accent-soft, rgba(91,140,255,.18));
  --pz-danger: var(--color-danger, #ff4d4f);
  --pz-radius-lg: var(--panel-radius-lg, 14px);
  --pz-radius-sm: var(--panel-radius-sm, 10px);
  --pz-shadow: var(--panel-shadow-strong, 0 12px 34px rgba(0,0,0,.35));
  --pz-shadow-soft: var(--panel-shadow-soft, 0 8px 22px rgba(0,0,0,.22));
  --pz-glass-blur: var(--glass-blur, 10px);
  --pz-font: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji");
  --pz-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);

  --pz-pad: 12px;
  --pz-gap: 10px;
  /* AI-specific translucent surfaces (theme-tunable) */
  --pz-backdrop: rgba(0,0,0,0.55);
  --pz-backdrop-soft: rgba(0,0,0,0.48);

  /* Frost layers (used for pills/tabs where old CSS used rgba(255,255,255,*) or rgba(0,0,0,*)) */
  --pz-frost-1: rgba(255,255,255,0.04);
  --pz-frost-2: rgba(255,255,255,0.08);
  --pz-frost-3: rgba(255,255,255,0.12);

  /* Neutral dark tint layer (for dark themes). Light theme overrides below. */
  --pz-tint-1: rgba(0,0,0,0.06);
  --pz-tint-2: rgba(0,0,0,0.12);
  --pz-tint-3: rgba(0,0,0,0.18);

  /* Scrollbar */
  --pz-scrollbar-thumb: rgba(0,0,0,0.30);

  /* Marked diff ranges (semantic) */
  --pz-mark-del-bg: var(--color-danger-soft, rgba(255, 80, 80, 0.22));
  --pz-mark-del-border: var(--color-danger, rgba(255, 80, 80, 0.65));
  --pz-mark-add-bg: var(--color-success-soft, rgba(80, 255, 160, 0.22));
  --pz-mark-add-border: var(--color-success, rgba(80, 255, 160, 0.65));
  --pz-mark-warn-bg: var(--color-warning-soft, rgba(255, 180, 0, 0.10));
  --pz-mark-warn-border: var(--color-warning, rgba(255, 140, 0, 0.55));
}

/* Light theme tuning (body.elegant) */
body.elegant{
  --pz-backdrop: rgba(17,24,39,0.35);
  --pz-backdrop-soft: rgba(17,24,39,0.28);

  --pz-frost-1: rgba(0,0,0,0.04);
  --pz-frost-2: rgba(0,0,0,0.06);
  --pz-frost-3: var(--pz-tint-1);

  --pz-tint-1: rgba(0,0,0,0.04);
  --pz-tint-2: rgba(0,0,0,0.06);
  --pz-tint-3: var(--pz-tint-1);

  --pz-scrollbar-thumb: rgba(17,24,39,0.18);
}


/* ---------- Overlay shell ---------- */
/* If your overlay uses a different wrapper, keep this as a safe no-op */
.ai-puzzle-picker-overlay{
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--pz-tint-3);
  backdrop-filter: blur(var(--pz-glass-blur));
  -webkit-backdrop-filter: blur(var(--pz-glass-blur));
}

/* The card in your markup */
.ai-puzzle-picker-card{
  width: min(1040px, calc(100% - 18px));
  height: min(720px, calc(100vh - 24px));
  max-height: min(720px, calc(100% - 18px));
  display: flex;
  flex-direction: column;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  box-shadow: var(--pz-shadow);
  overflow: hidden;
  font-family: var(--pz-font);
}

/* ---------- Header ---------- */
.ai-puzzle-picker-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pz-border);
  background:
    linear-gradient(180deg, var(--pz-frost-1), rgba(255,255,255,0));
}

.ai-puzzle-picker-title{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--pz-text);
  font-weight: 700;
  letter-spacing: .2px;
}
.ai-puzzle-picker-title i{
  color: var(--pz-accent);
}
.ai-puzzle-picker-title span{
  white-space: nowrap;
}
.ai-puzzle-picker-meta{
  margin-left: 6px;
  color: var(--pz-muted);
  font-weight: 600;
  font-size: 12px;
}

.ai-puzzle-picker-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Toolbar ---------- */
.ai-puzzle-picker-toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pz-border);
  background: var(--pz-frost-1);
}

.ai-puzzle-picker-search,
.ai-puzzle-picker-type{
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
  color: var(--pz-text);
  outline: none;
  padding: 0 12px;
}

.ai-puzzle-picker-search{
  flex: 1;
  min-width: 140px;
}
.ai-puzzle-picker-search::placeholder{
  color: var(--pz-muted);
}

.ai-puzzle-picker-type{
  min-width: 140px;
  padding-right: 32px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 14px,
    calc(100% - 12px) 14px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ai-puzzle-picker-search:focus,
.ai-puzzle-picker-type:focus{
  border-color: rgba(91,140,255,.55);
  box-shadow: 0 0 0 3px var(--pz-accent-soft);
}


/* Compact mode: no right-side JSON preview (better UX) */
.ai-puzzle-picker-card.is-no-preview .ai-puzzle-picker-body{
  grid-template-columns: 1fr;
}
.ai-puzzle-picker-card.is-no-preview .ai-puzzle-picker-right{
  display: none;
}

/* ---------- Tabs (热门 / 我的) ---------- */
.ai-puzzle-tabs{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
  flex: 0 0 auto;
}
.ai-puzzle-tab{
  border: 1px solid transparent;
  background: transparent;
  color: var(--pz-muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
.ai-puzzle-tab:hover{
  color: var(--pz-text);
  border-color: var(--pz-frost-2);
  background: var(--pz-frost-1);
}
.ai-puzzle-tab.is-active{
  color: var(--pz-text);
  border-color: var(--pz-frost-2);
  background: var(--pz-frost-1);
}



/* ---------- Mini tabs (我的 / 已喜欢) ---------- */
.ai-puzzle-mini-tabs{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
  flex: 0 0 auto;
}
.ai-puzzle-mini-tab{
  border: 1px solid transparent;
  background: transparent;
  color: var(--pz-muted);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
.ai-puzzle-mini-tab:hover{
  color: var(--pz-text);
  border-color: var(--pz-frost-2);
  background: var(--pz-frost-1);
}
.ai-puzzle-mini-tab.is-active{
  color: var(--pz-text);
  border-color: var(--pz-frost-2);
  background: var(--pz-frost-1);
}
/* ---------- Body layout ---------- */
.ai-puzzle-picker-body{
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0; /* allows scroll children */
}

.ai-puzzle-picker-left{
  border-right: 1px solid var(--pz-border);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-puzzle-picker-right{
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--pz-tint-1);
}

/* ---------- List ---------- */
.ai-puzzle-picker-list{
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-puzzle-empty{
  padding: 14px 12px;
  border: 1px dashed var(--pz-frost-3);
  border-radius: 12px;
  color: var(--pz-muted);
  background: var(--pz-frost-1);
  font-size: 13px;
  line-height: 1.4;
}

/* List rows: your JS should create these.
   Keep styles permissive: if your row uses extra inner elements, it still looks ok. */
.ai-puzzle-row{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  color: var(--pz-text);
}
.ai-puzzle-row + .ai-puzzle-row{ margin-top: 8px; }

.ai-puzzle-row:hover{
  background: var(--pz-frost-1);
  border-color: var(--pz-frost-2);
}

.ai-puzzle-row.is-selected{
  background: var(--pz-accent-soft);
  border-color: rgba(91,140,255,.45);
}

.ai-puzzle-row .ai-puzzle-check{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--pz-frost-3);
  display: grid;
  place-items: center;
  background: var(--pz-tint-3);
  color: var(--pz-text);
  font-size: 12px;
}
.ai-puzzle-row.is-selected .ai-puzzle-check{
  border-color: rgba(91,140,255,.7);
  background: rgba(91,140,255,.18);
}

.ai-puzzle-row .ai-puzzle-main{
  min-width: 0;
}
.ai-puzzle-row .ai-puzzle-title{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-puzzle-row .ai-puzzle-sub{
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--pz-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- Stripe v2 (title + content + tags) ---------- */
.ai-puzzle-row-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ai-puzzle-row-header .ai-puzzle-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ai-puzzle-row-content{
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ai-puzzle-row-contentText{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--pz-muted);
  white-space: pre-wrap;
}
.ai-puzzle-row-contentText.is-collapsed{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.ai-puzzle-row-toggle{
  flex: 0 0 auto;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
  color: var(--pz-text);
  border-radius: 999px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.ai-puzzle-row-toggle:hover{
  border-color: var(--pz-frost-2);
  background: var(--pz-frost-1);
}

.ai-puzzle-row-tags{
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--pz-muted);
  font-size: 12px;
}

.ai-puzzle-tag{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--pz-frost-3);
  background: var(--pz-tint-2);
  color: var(--pz-text);
}
.ai-puzzle-time{
  margin-left: auto;
  font-size: 12px;
  color: var(--pz-muted);
}

.ai-puzzle-badge{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--pz-frost-3);
  background: var(--pz-tint-2);
  /* color: rgba(255,255,255,.82); */
}
.ai-puzzle-badge.is-api{ border-color: rgba(91,140,255,.28); background: rgba(91,140,255,.12); }
.ai-puzzle-badge.is-style{ border-color: var(--pz-mark-warn-bg); background: var(--pz-mark-warn-bg); }
.ai-puzzle-badge.is-media{ border-color: rgba(0,200,150,.28); background: rgba(0,200,150,.10); }
.ai-puzzle-badge.is-storage{ border-color: rgba(255,77,79,.26); background: rgba(255,77,79,.10); }
.ai-puzzle-badge.is-file{ border-color: rgba(160,160,255,.26); background: rgba(160,160,255,.10); }
.ai-puzzle-badge.is-program{ border-color: rgba(170,255,200,.22); background: rgba(170,255,200,.08); }
.ai-puzzle-badge.is-functional{ border-color: var(--pz-mark-warn-border); background: var(--pz-mark-warn-bg); }

/* ---------- Editor (right) ---------- */
.ai-puzzle-editor{
  flex: 1;
  padding: 12px;
  /* overflow: auto; */
}

.ai-puzzle-editor-card{
  /* background: var(--pz-frost-1); */
  background: var(--color-bg);
  border: 1px solid var(--pz-border);
  border-radius: 14px;
  box-shadow: var(--pz-shadow-soft);
  overflow: hidden;
}

.ai-puzzle-editor-h{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pz-border);
  background: linear-gradient(180deg, var(--pz-frost-1), rgba(255,255,255,0));
}



/* ---------- Fork panel (editor) ---------- */
.ai-puzzle-fork-panel{
  padding: 10px 14px;
  border-bottom: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
}
.ai-puzzle-fork-loading{
  font-size: 12px;
  color: var(--pz-muted);
}
.ai-puzzle-fork-h{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ai-puzzle-fork-title{
  font-size: 12px;
  font-weight: 900;
  color: var(--pz-text);
}
.ai-puzzle-fork-hint{
  font-size: 12px;
  color: var(--pz-muted);
}
.ai-puzzle-fork-line{
  margin-top: 6px;
  font-size: 12px;
  color: var(--pz-muted);
}
.ai-puzzle-fork-line a{
  color: var(--pz-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-fork-tree{
  margin-top: 8px;
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--pz-frost-1);
  max-height: 220px;
  overflow: auto;
}
.ai-fork-tree-ul{
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}
.ai-fork-node{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.ai-fork-toggle{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
  color: var(--pz-muted);
  cursor: pointer;
}
.ai-fork-toggle:hover{
  color: var(--pz-text);
  border-color: var(--pz-frost-2);
  background: var(--pz-frost-1);
}
.ai-fork-toggle[disabled]{
  opacity: .35;
  cursor: default;
}
.ai-fork-toggle[disabled]:hover{
  color: var(--pz-muted);
  border-color: var(--pz-border);
  background: var(--pz-tint-2);
}
.ai-fork-node a{
  color: var(--pz-text);
  text-decoration: none;
}
.ai-fork-node a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-fork-node-tag{
  font-size: 11px;
  color: var(--pz-muted);
  border: 1px solid var(--pz-border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  background: var(--pz-tint-2);
}
.ai-fork-node-empty{
  font-size: 12px;
  color: var(--pz-muted);
  padding: 4px 0 4px 22px;
}
.ai-puzzle-editor-title{
  font-weight: 800;
  color: var(--pz-text);
  letter-spacing: .2px;
}
.ai-puzzle-editor-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--pz-muted);
}

.ai-puzzle-editor-form{
  padding: 12px 14px 14px;
  /* display: grid; */
  display: block;
  gap: 12px;
  position: relative;
}

.ai-puzzle-form-body{
  position: relative;
}

.ai-puzzle-field{
  display: grid;
  /* display: block; */
  gap: 8px;
  margin-top: 10px;
}
.ai-puzzle-field > span{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
}
.ai-puzzle-field input:not([type="radio"]),
.ai-puzzle-field select,
.ai-puzzle-field textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-2);
  color: var(--pz-text);
  outline: none;
  padding: 10px 12px;
  font-family: var(--pz-font);
}
.ai-puzzle-field textarea{
  font-family: var(--pz-mono);
  line-height: 1.45;
  resize: vertical;
  /* min-height: 220px; */
  min-height: 100px;
}

.ai-puzzle-field input:focus,
.ai-puzzle-field select:focus,
.ai-puzzle-field textarea:focus{
  border-color: rgba(91,140,255,.55);
  box-shadow: 0 0 0 3px var(--pz-accent-soft);
}

.ai-puzzle-field-hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--pz-muted);
  line-height: 1.35;
}

.ai-puzzle-editor-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

/* ---------- Footer ---------- */
.ai-puzzle-picker-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--pz-border);
  /* background: var(--pz-frost-1); */
  background: var(--color-bg);
  z-index: 10;
}

.ai-puzzle-picker-footer-left{
  color: var(--pz-muted);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-puzzle-picker-footer-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Enabled puzzle bar (in AI composer) ---------- */
.ai-puzzlebar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--pz-frost-2);
}

.ai-puzzle-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--pz-frost-3);
  background: var(--pz-tint-2);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  max-width: 100%;
}
.ai-chip-ref-index{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  padding:0;
  border-radius:999px;
  background:var(--ai-chip-ref-bg, #7b61ff) !important;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  flex:0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  text-align:center;
}
.ai-chip-ref-index::before{
  content:none;
}
.ai-chip-ref-index--photo{
  background:#2276f5 !important;
}
.ai-chip-ref-index--upload{
  background:#159a58 !important;
}
.ai-chip-ref-index--resource{
  background:#d9822b !important;
}
.ai-chip-ref-index--puzzle{
  background:#7b61ff !important;
}
.ai-chip-ref-index--generic{
  background:#667085 !important;
}
.ai-puzzle-chip i{
  color: var(--pz-accent);
}
.ai-puzzle-chip .ai-puzzle-chip-title{
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-puzzle-chip .ai-puzzle-chip-x{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.ai-puzzle-chip .ai-puzzle-chip-x:hover{
  color: rgba(255,255,255,.95);
}

/* ---------- Also polish your existing #puzzle-panel-overlay modal (optional) ---------- */
.puzzle-panel-card{
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  box-shadow: var(--pz-shadow);
}
.puzzle-preview{
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  background: var(--pz-tint-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .ai-puzzle-picker-card{
    width: calc(100% - 10px);
    max-height: calc(100% - 10px);
  }
  .ai-puzzle-picker-body{
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 760px){
  .ai-puzzle-picker-toolbar{
    flex-wrap: wrap;
  }
  .ai-puzzle-picker-type{
    min-width: 0;
    flex: 1;
  }
  .ai-puzzle-picker-body{
    grid-template-columns: 1fr;
    grid-template-rows: 240px 1fr;
  }
  .ai-puzzle-picker-left{
    border-right: none;
    border-bottom: 1px solid var(--pz-border);
  }
  .ai-puzzle-editor{
    padding: 10px;
  }
  .ai-puzzle-field textarea{
    min-height: 180px;
  }
}

@media (max-width: 420px){
  .ai-puzzle-picker-header{
    padding: 10px 12px;
  }
  .ai-puzzle-picker-toolbar{
    padding: 10px 12px;
  }
  .ai-puzzle-picker-footer{
    padding: 10px 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .ai-puzzle-picker-footer-left{
    width: 100%;
    margin-bottom: 6px;
  }
}


/* =========================================================
   AI Puzzle: Media picker (grid + items)
   - Theme-aware via --pz-* tokens
   - Works for <button class="ai-puzzle-media-item"> with <img> + name
   ========================================================= */

/* Container: media grid */
.ai-puzzle-media-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 8px;

  border-radius: 14px;
  border: 1px solid var(--pz-border);
  background: var(--pz-tint-1);

  /* allow grid to scroll if it gets tall */
  max-height: 320px;
  overflow: auto;
}

/* Scrollbars (subtle) */
.ai-puzzle-media-grid::-webkit-scrollbar{ width: 8px; height: 8px; }
.ai-puzzle-media-grid::-webkit-scrollbar-track{ background: transparent; }
.ai-puzzle-media-grid::-webkit-scrollbar-thumb{
  background: var(--pz-frost-3);
  border-radius: 999px;
}
.ai-puzzle-media-grid::-webkit-scrollbar-thumb:hover{
  background: var(--pz-frost-3);
}

/* Each media item (your markup uses <button>) */
.ai-puzzle-media-item{
  all: unset; /* normalize button defaults without losing accessibility */
  display: flex;
  flex-direction: column;
  gap: 8px;

  border-radius: 14px;
  border: 1px solid var(--pz-border);
  background: var(--pz-frost-1);
  box-shadow: var(--pz-shadow-soft);
  cursor: pointer;
  overflow: hidden;

  transition: transform .08s ease, border-color .12s ease, background .12s ease,
              box-shadow .12s ease;
}

/* Hover/active */
.ai-puzzle-media-item:hover{
  border-color: var(--pz-border);
  background: var(--pz-frost-1);
  transform: translateY(-1px);
}

.ai-puzzle-media-item:active{
  transform: translateY(0);
}

/* Keyboard focus */
.ai-puzzle-media-item:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(91,140,255,.18),
    var(--pz-shadow-soft);
  border-color: rgba(91,140,255,.55);
}

/* Thumbnail */
.ai-puzzle-media-item img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;

  background: var(--pz-frost-1);
  border-bottom: 1px solid var(--pz-frost-2);
}

/* If you ever render video thumbs inside the same item */
.ai-puzzle-media-item video{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  background: var(--pz-frost-1);
  border-bottom: 1px solid var(--pz-frost-2);
}

/* Filename */
.ai-puzzle-media-name{
  padding: 0 10px 10px;
  font-size: 12px;
  color: var(--pz-text);
  line-height: 1.25;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .92;
}

/* Selected state (your markup uses .is-selected) */
.ai-puzzle-media-item.is-selected{
  border-color: rgba(91,140,255,.70);
  background: var(--pz-accent-soft);
  box-shadow:
    0 0 0 1px rgba(91,140,255,.35),
    var(--pz-shadow);
}

.ai-puzzle-media-item.is-selected .ai-puzzle-media-name{
  color: var(--pz-text);
  opacity: 1;
}

/* Optional: small “picked” corner indicator without extra markup */
.ai-puzzle-media-item.is-selected{
  position: relative;
}
.ai-puzzle-media-item.is-selected::after{
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: var(--pz-tint-2);
  border: 1px solid rgba(91,140,255,.65);
  color: var(--pz-text);
  font-size: 12px;
  backdrop-filter: blur(6px);
}

/* Dense layout on smaller screens */
@media (max-width: 760px){
  .ai-puzzle-media-grid{
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    max-height: 260px;
    padding: 8px;
  }

  .ai-puzzle-media-item img,
  .ai-puzzle-media-item video{
    height: 96px;
  }
}

@media (max-width: 420px){
  .ai-puzzle-media-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 240px;
  }

  .ai-puzzle-media-name{
    font-size: 11px;
    padding: 0 8px 8px;
  }
}


/* Picker body single column + modal overlay */
.ai-puzzle-picker-body--single{
  grid-template-columns: 1fr !important;
}

.ai-puzzle-picker-body--single .ai-puzzle-picker-right{
  display:none !important;
}
.ai-puzzle-picker-body--single .ai-puzzle-picker-left{
  border-right: none !important;
}

.ai-puzzle-modal{
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.ai-puzzle-modal.is-hidden{ display:none !important; }

.ai-puzzle-modal-backdrop{
  position:absolute;
  inset:0;
  background: var(--pz-tint-3);
  backdrop-filter: blur(var(--pz-glass-blur, 10px));
}

.ai-puzzle-modal-card{
  position: relative;
  width: min(960px, calc(100% - 18px));
  max-height: min(720px, calc(100% - 18px));
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  box-shadow: var(--pz-shadow);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  z-index:1;
}

.ai-puzzle-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pz-border);
}

.ai-puzzle-modal-title{
  font-weight: 800;
  color: var(--pz-text);
}

.ai-puzzle-modal-body{
  padding: 12px 14px 14px;
  overflow:auto;
  min-height: 0;
}


/* 1) 让 body 不去“撑开”整个卡片，而是把滚动交给内部区域 */
.ai-puzzle-picker-body{
  min-height: 0;        /* 你已有，但再强调 */
  overflow: hidden;     /* 关键：防止内容把 footer 顶/压 */
}

/* 2) 左右两侧作为可收缩容器 */
.ai-puzzle-picker-left,
.ai-puzzle-picker-right{
  min-height: 0;
}

/* 3) 真正滚动的区域：左侧列表 & 右侧预览/编辑区 */
.ai-puzzle-picker-list{
  flex: 1 1 auto;       /* 关键：在 left 的 flex column 中吃满剩余高度 */
  min-height: 0;
  overflow: auto;       /* 你已有 */
  /* z-index: 100; */
}

.ai-puzzle-editor{
  flex: 1 1 auto;       /* 让 editor 吃满 right 的剩余高度 */
  min-height: 0;
  overflow: auto;       /* 你现在注释掉了 overflow:auto，建议打开 */
}

/* 4) 移动端：用 minmax() 把两行都“夹紧”，避免 1fr 溢出顶到 footer */
@media (max-width: 760px){
  .ai-puzzle-picker-body{
    grid-template-rows: minmax(0, 240px) minmax(0, 1fr);
  }
}

/* 5) footer 不参与滚动、也不被挤压 */
.ai-puzzle-picker-footer{
  flex: 0 0 auto;       /* 明确不收缩 */
}

/* ----------------------------------------
 * Chat bubble puzzle chips
 * ---------------------------------------- */
.ai-msg-puzzle-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 1px solid var(--color-border);
  background: var(--pz-tint-1);
  color: var(--color-text);

  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  line-height: 1.6;

  cursor: pointer;
  user-select: none;
}

.ai-msg-puzzle-chip:hover{
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.ai-msg-puzzle-chip i{
  font-size: 11px;
  opacity: 0.9;
}

.ai-msg-puzzle-chip-text{
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------
 * Puzzle picker locate emphasis (flash + outline)
 * ---------------------------------------- */
.ai-puzzle-row.is-locate{
  outline: 2px solid var(--pz-accent);
  outline-offset: 2px;
  border-radius: 12px;
  animation: aiPuzzleLocateFlash 1.6s ease-out 1;
}

@keyframes aiPuzzleLocateFlash{
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
  15%  { box-shadow: 0 0 0 6px var(--pz-accent-soft); transform: scale(1.01); }
  45%  { box-shadow: 0 0 0 10px rgba(0,0,0,0); transform: scale(1.00); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
}

.ai-puzzle-editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.ai-puzzle-editor-overlay.is-hidden {
  display: none !important;
}

.ai-puzzle-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(var(--pz-glass-blur, 10px));
}

.ai-puzzle-editor-cardwrap {
  position: relative;
  width: min(900px, calc(100% - 18px));
  max-height: min(720px, calc(100% - 18px));
  overflow: auto;
}

.ai-puzzle-editor-cardwrap .ai-puzzle-editor-card {
  box-shadow: var(--panel-shadow-strong, 0 12px 34px rgba(0, 0, 0, .35));
}

.ai-puzzle-row-actions {
  display: flex;
  gap: 6px;
}


.ai-puzzle-row-iconbtn{
  border: 1px solid var(--pz-border, rgba(255, 255, 255, .12));
  background: rgba(0, 0, 0, .12);
  color: var(--pz-text, rgba(255, 255, 255, .92));
  border-radius: 999px;
  width: 30px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}
.ai-puzzle-row-iconbtn:hover{
  border-color: var(--pz-accent, #5b8cff);
}
.ai-puzzle-row-iconbtn .ai-puzzle-row-count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid var(--pz-border, rgba(255,255,255,.18));
  background: rgba(0,0,0,.35);
  color: var(--pz-text, rgba(255,255,255,.92));
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}
.ai-puzzle-row-iconbtn.is-liked i{
  color: var(--pz-accent, #5b8cff);
}
.ai-puzzle-row-btn {
  border: 1px solid var(--pz-border, rgba(255, 255, 255, .12));
  background: rgba(0, 0, 0, .12);
  color: var(--pz-text, rgba(255, 255, 255, .92));
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

.ai-puzzle-row-btn:hover {
  border-color: var(--pz-accent, #5b8cff);
}

.ai-puzzle-row-check input {
  width: 16px;
  height: 16px;
}


/* ========================================
 * Media Puzzle v2 (stripe-based editor)
 * ======================================== */

.ai-media-stripe-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.ai-media-stripe-empty{
  padding:12px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:12px;
  opacity:.85;
}

.ai-media-stripe{
  display:flex;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(255,255,255,.03);
}

/* .ai-media-stripe-left{
  display:flex;
  gap:10px;
  align-items:flex-start;
} */
.ai-media-stripe-select{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
}
.ai-media-stripe-select:hover{
  background: rgba(255,255,255,.10);
}

.ai-media-stripe-preview{
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 7.5px;
}
.ai-media-stripe-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ai-media-stripe-fileicon{
  opacity:.85;
  font-size:18px;
}

/* ========================================
 * KV editor rows (Headers / Query / Path...)
 * - remove JS inline flex styles
 * - wrap on narrow widths (no overlap)
 * ======================================== */

.ai-kv-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ai-kv-toolbar-title{
  opacity:.8;
  font-size:12px;
}

/* Each KV stripe content row */
.ai-kv-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;

  /* KEY: allow wrap instead of overflow/overlap */
  flex-wrap:wrap;
}

/* Inputs container */
.ai-kv-fields{
  display:flex;
  gap:8px;

  flex:1 1 auto;
  min-width:0;

  /* KEY: allow the inputs to wrap */
  flex-wrap:wrap;
}

/* Make each input flex nicely, and shrink instead of overflowing */
.ai-kv-fields .save-input{
  min-width:0;
  box-sizing:border-box;
}

/* Size rules per field */
.ai-kv-fields [data-kv="key"]{
  flex:1 1 140px;
  min-width:120px;
}

.ai-kv-fields [data-kv="value"]{
  flex:2 1 220px;
  min-width:160px;
}

.ai-kv-fields [data-kv="in"]{
  flex:1 1 160px;
  min-width:140px;
}

/* Actions (remove button) */
.ai-kv-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

/* On smaller widths: stack inputs vertically; push actions to its own line */
@media (max-width: 560px){
  .ai-kv-fields{
    flex-direction:column;
    width:100%;
  }

  .ai-kv-actions{
    width:100%;
    justify-content:flex-end;
  }

  /* Optional: make the remove button easier to hit on mobile */
  .ai-kv-actions .topbar-btn{
    padding-inline: 12px;
  }
}

.ai-media-stripe-main{
  flex:1;
  min-width:0;
}
.ai-media-stripe-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  max-width: 100%;
  overflow: auto;
}
.ai-media-stripe-name{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-media-stripe-meta{
  margin-top:4px;
  opacity:.7;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-media-stripe-desc{
  width:100%;
  margin-top:8px;
  resize:vertical;
  border-radius:12px;
}

/* media picker popup */
.ai-media-picker-pop{
  top: 0;
  left: 0;
  position:absolute;
  z-index: 9999;
  width: 100%;
  height: 100%;
}
.ai-media-picker-pop.is-hidden{
  display:none;
}
.ai-media-picker-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.ai-media-picker-card{
  position:absolute;
  left:0;
  top:0;
  /* transform:translate(-50%,-50%); */
  /* width:min(920px, calc(100vw - 36px)); */
  width: 100%;
  max-height: calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--color-bg-elevated);
  overflow:hidden;
}
.ai-media-picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.ai-media-picker-title{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:700;
}
.ai-media-picker-controls{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.ai-attach-search,
.ai-media-picker-search{
  flex:1;
  /* border-radius:12px; */
  font-size: 1em;
  border: 1px solid var(--color-accent-soft);
  padding: 1px 2px;
  border-radius: 2px;
  outline: none;
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
}
.ai-media-picker-filter{
  width:160px;
  border-radius:12px;
}
.ai-media-picker-grid{
  padding:14px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
  align-items: start;
}
.ai-media-picker-item{
  display:flex;
  gap:10px;
  text-align:left;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor:pointer;
}
.ai-media-picker-item:hover{
  background: rgba(255,255,255,.06);
}
.ai-media-picker-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.ai-media-picker-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ai-media-picker-fileicon{
  opacity:.85;
  font-size:18px;
}
.ai-media-picker-item-body{
  flex:1;
  min-width:0;
}
.ai-media-picker-item-title{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-media-picker-item-meta{
  margin-top:3px;
  opacity:.7;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-media-picker-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.ai-media-picker-footer-left{
  opacity:.75;
  font-size:12px;
}



/* ==========================================
 * API Puzzle (Professional) + Runner
 * ========================================== */

.ai-api-env-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 860px){
  .ai-api-env-grid{ grid-template-columns: 1fr; }
}
.ai-api-env-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ai-api-env-label{
  font-size:12px;
  color: var(--color-text-muted);
}
.ai-api-env-vars{
  width:100%;
  resize: vertical;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: 1.4;
}

.ai-api-subblock{
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--panel-radius-sm);
  background: var(--color-bg-elevated);
}
.ai-api-subblock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ai-api-subblock-title{
  font-size:12px;
  color: var(--color-text-muted);
}

.ai-api-grid{ margin-top: 10px; }
.ai-api-row{ display:flex; gap:8px; align-items:center; }
.ai-api-two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 860px){
  .ai-api-two-col{ grid-template-columns: 1fr; }
}
.ai-api-body-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.ai-api-body-title{
  font-size:12px;
  color: var(--color-text-muted);
}

.ai-api-expect{
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--color-border);
  border-radius: var(--panel-radius-sm);
  background: color-mix(in srgb, var(--color-bg-elevated) 80%, transparent);
}
.ai-api-expect-head{
  font-size:12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.ai-api-expect-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ai-api-radio{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color: var(--color-text-muted);
  padding: 0 6px;
}
.ai-api-radio input{ transform: translateY(1px); }

.ai-api-cors-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

/* Runner popup */
.ai-api-runner-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
}
.ai-api-runner-overlay.is-hidden{ display:none; }

.ai-api-runner-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(var(--glass-blur, 6px));
}
.ai-api-runner-card{
  position:absolute;
  z-index: 10;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 24px));
  max-height: min(86vh, 920px);
  display:flex;
  flex-direction:column;
  border-radius: var(--panel-radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--panel-shadow-strong);
  overflow:hidden;
}
.ai-api-runner-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-api-runner-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
}
.ai-api-runner-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ai-api-runner-sub{
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-api-runner-req{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size: 13px;
}
.ai-api-pill{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  font-weight: 700;
}
.ai-api-url{
  font-family: var(--font-mono);
  font-size: 12px;
  opacity:.95;
  word-break: break-all;
}
.ai-api-runner-req-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color: var(--color-text-muted);
  font-size: 12px;
}

.ai-api-runner-tabs{
  display:flex;
  gap:8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-api-tab{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 12px;
}
.ai-api-tab.is-active{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.ai-api-runner-body{
  flex: 1;
  overflow:auto;
  padding: 12px 14px;
}
.ai-api-runner-pre{
  margin: 0;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-api-runner-loading{
  color: var(--color-text-muted);
  font-size: 13px;
}
.ai-api-runner-error{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 50%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-soft) 70%, transparent);
  color: var(--color-text);
  line-height: 1.4;
}
.ai-api-runner-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}
.ai-api-runner-footer-left{
  color: var(--color-text-muted);
  font-size: 12px;
}

.btn-api-puzzle-exp-clr{
  float: right;
}

.ai-api-runner-overlay[hidden] {
  display: none !important;
}


/* ============================
   AI Attachments (Ingested Resources)
   ============================ */

/* Chips row shown above the composer */
.ai-attach-strip{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding: 8px 10px;
  margin: 0 0 6px 0;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg-elevated) 85%, transparent);
}
.ai-attach-strip[hidden]{ display:none !important; }

.ai-attach-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 100%;
}
.ai-attach-chip .ai-attach-name{
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}
.ai-attach-chip .ai-attach-status{
  font-size: 12px;
  color: var(--color-text-muted);
}
.ai-attach-chip.is-done .ai-attach-status{
  color: color-mix(in srgb, var(--color-success) 70%, var(--color-text));
}
.ai-attach-chip.is-error .ai-attach-status{
  color: color-mix(in srgb, var(--color-danger) 75%, var(--color-text));
}
.ai-attach-chip .ai-attach-x{
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.ai-attach-chip .ai-attach-x:hover{
  background: color-mix(in srgb, var(--color-border) 35%, transparent);
  color: var(--color-text);
}


/* Drag & drop hint (only inside AI panel) */
.ai-dnd-overlay{
  position:absolute;
  inset:0;
  z-index: 26;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, #000 35%, transparent);
  backdrop-filter: blur(1px);
}
.ai-dnd-overlay[hidden]{ display:none !important; }
.ai-dnd-card{
  width: min(520px, calc(100% - 26px));
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--color-border) 80%, transparent);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  color: var(--color-text);
  padding: 16px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.ai-dnd-title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.ai-dnd-sub{
  font-size: 12px;
  color: var(--color-text-muted);
}


/* Attachments picker overlay (same stacking style as puzzle picker) */
.ai-attach-picker-overlay{
  position:absolute;
  inset:0;
  z-index: 30;
}
.ai-attach-picker-overlay[hidden]{ display:none !important; }

.ai-attach-picker-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.ai-attach-picker-card{
  position:absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  display:flex;
  flex-direction: column;
  overflow:hidden;
}

.ai-attach-picker-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-attach-picker-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
}
.ai-attach-picker-title .ai-attach-picker-sub{
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-attach-picker-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-attach-picker-toolbar .ai-attach-toolbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-attach-picker-toolbar .ai-attach-toolbar-right{
  color: var(--color-text-muted);
  font-size: 12px;
}
.ai-attach-list{
  padding: 12px 14px 18px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  min-height: 0;
}

@media (max-width: 880px){
  .ai-attach-list{ grid-template-columns: 1fr; }
}

.ai-attach-item{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 14px;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 88px;
  height: auto;
  align-self: start;
  overflow: hidden;
}

.ai-attach-item.is-selected{
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.ai-attach-item-top{
  /* display: flex;
  align-items: flex-start;
  justify-content: space-between; */
  display: block;
  /* gap: 10px; */
  /* flex: 0 0 auto; */
  min-height: 0;
}

.ai-attach-item-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.ai-attach-item-meta{
  font-size: 12px;
  color: var(--color-text-muted);
  min-width: 0;
}

.ai-attach-item-status{
  flex: 0 0 auto;
  min-height: 0;
}

.ai-attach-item-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-height: 0;
}

.ai-attach-item-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.ai-attach-refnav{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.ai-attach-mini-btn{
  min-width:28px;
  height:28px;
  padding:4px 8px;
  line-height:1;
}

.ai-attach-refnav-indicator{
  min-width:44px;
  text-align:center;
  font-size:12px;
  color:var(--color-text-muted);
}

.ai-attach-copy-url{
  white-space:nowrap;
}

.ai-attach-btn.is-attached,
.ai-attach-btn[disabled]{
  opacity: .72;
  cursor: not-allowed;
  pointer-events: none;
}

.ai-attach-empty{
  padding: 18px 14px;
  color: var(--color-text-muted);
  font-size: 13px;
}



/* ===== zzd media ingest UI patch ===== */
.sf-upload-ingest-btn{
  margin-left: 6px;
}
.sf-upload-ingest-btn.sf-ingested{
  color: var(--color-success);
  border-color: var(--color-success);
}

/* Resource detail dialog */
.sf-resource-dialog{
  width: min(780px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}
.sf-resource-dialog::backdrop{
  background: rgba(0,0,0,0.55);
}

.sf-resource-dialog .sf-rdlg-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.sf-resource-dialog .sf-rdlg-title{
  font-weight: 700;
  font-size: 16px;
}
.sf-resource-dialog .sf-rdlg-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-primary);
  cursor: pointer;
}

.sf-resource-dialog .sf-rdlg-body{
  padding: 12px 14px;
  overflow: auto;
  max-height: 62vh;
}
.sf-resource-dialog .sf-rdlg-actions{
  padding: 12px 14px;
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}
.sf-resource-dialog .sf-btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-primary);
  cursor: pointer;
}
.sf-resource-dialog .sf-rdlg-delete{
  border-color: rgba(255,100,100,0.45);
}
.sf-resource-dialog .sf-rdlg-meta{
  display:grid;
  grid-template-columns: 76px 1fr;
  row-gap: 8px;
  column-gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.sf-resource-dialog .sf-rdlg-meta .k{
  color: var(--text-muted);
}
.sf-resource-dialog .sf-rdlg-meta .v{
  color: var(--text-primary);
  word-break: break-word;
}
.sf-resource-dialog .sf-rdlg-brief{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.sf-resource-dialog .sf-rdlg-brief .h{
  font-weight: 700;
  margin-bottom: 6px;
}
.sf-resource-dialog .sf-rdlg-brief .t{
  white-space: pre-wrap;
  color: var(--text-primary);
}
.sf-resource-dialog .sf-rdlg-payload{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.sf-resource-dialog .sf-rdlg-json{
  margin: 10px 0 0 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  overflow:auto;
  font-size: 12px;
  line-height: 1.35;
}




/* ===== ingest focus pulse (AI attach picker) ===== */
@keyframes sf-ingest-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  25%{ box-shadow: 0 0 0 4px rgba(255,255,255,0.06); }
  100%{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.ai-attach-item.is-focus,
.ai-attach-chip.is-focus{
  border-color: var(--color-accent);
  animation: sf-ingest-pulse 1.6s ease-out 1;
}

@media (max-width: 720px){
  .ai-puzzle-picker-toolbar{
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .ai-puzzle-tabs{
    width: 100%;
    justify-content: center;
  }
  .ai-puzzle-picker-search{
    flex: 1 1 100%;
  }
}

/* ============================
   AI Attachments (Upload-first) - extra UI
   ============================ */

/* .ai-attach-strip{
  justify-content: space-between;
} */
.ai-attach-strip-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width: 0;
}
.ai-attach-strip-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink: 0;
}

/* chip subparts (backward compatible with old markup) */
.ai-attach-chip .ai-attach-chip-name,
.ai-attach-chip .ai-attach-name{
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}
.ai-attach-chip .ai-attach-chip-pill{
  font-size: 11px;
  color: var(--color-text-muted);
}

.ai-attach-search{
  min-width: 180px;
  max-width: 40vw;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
}
.ai-attach-search::placeholder{ color: var(--color-text-muted); }

.ai-attach-cat{
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

.ai-attach-pager{
  display:flex;
  align-items:center;
  gap: 8px;
}
.ai-attach-pager .ai-attach-pageinfo{
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ai-attach-item-status{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.ai-attach-status-dot{
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  display:inline-block;
  background: var(--color-text-muted);
  flex-shrink: 0;
}
.ai-attach-status-dot.done{ background: var(--color-success); }
.ai-attach-status-dot.error{ background: var(--color-danger); }
.ai-attach-status-dot.ingesting{ background: var(--color-info); }

.ai-attach-item-actions{
  flex-wrap: wrap;
}

/* inline action buttons shown in chat message */
.ai-inline-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ai-inline-action-btn{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}
.ai-inline-action-btn:hover{
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
}

/* ============================
   Extracted Image Editor (from ingest)
   ============================ */
.ai-img-editor-overlay{
  /* IMPORTANT: keep the popup inside AI panel (not fullscreen viewport).
     JS will set z-index dynamically so later-opened overlays stack on top. */
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.ai-img-editor-overlay[hidden]{ display:none !important; }

.ai-img-editor-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index: 0;
}

.ai-img-editor-card{
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 18px));
  height: min(680px, calc(100% - 18px));
  max-height: calc(100% - 18px);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  display:flex;
  flex-direction: column;
  overflow:hidden;
}

@media (max-width: 560px){
  .ai-img-editor-overlay{ padding: 8px; }
  .ai-img-editor-card{
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    max-height: calc(100% - 8px);
    border-radius: 14px;
  }
}

.ai-img-editor-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-img-editor-title{
  font-weight: 800;
  font-size: 14px;
}
.ai-img-editor-title i{
  margin-right: 4px;
}
.ai-img-editor-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: 8px;
  font-weight: 500;
}

/* ============================
   附加文件详情（Photo / Upload / Resource）
   ============================ */
.ai-attach-detail-overlay{
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.ai-attach-detail-overlay[hidden]{ display:none !important; }

.ai-attach-detail-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index: 0;
}

.ai-attach-detail-card{
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 18px));
  max-height: calc(100% - 18px);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  display:flex;
  flex-direction: column;
  overflow:hidden;
  container-type: inline-size;
  container-name: attach-detail;
}

@media (max-width: 560px){
  .ai-attach-detail-overlay{ padding: 8px; }
  .ai-attach-detail-card{
    width: calc(100% - 8px);
    max-height: calc(100% - 8px);
    border-radius: 14px;
  }
}

.ai-attach-detail-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
.ai-attach-detail-title{
  font-weight: 800;
  font-size: 14px;
}
.ai-attach-detail-title i{ margin-right: 4px; }
.ai-attach-detail-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: 8px;
  font-weight: 500;
}

.ai-attach-detail-body{
  padding: 12px 14px;
  overflow:auto;
  min-width: 0;
}

.ai-attach-detail-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
}
@media (max-width: 720px){
  .ai-attach-detail-grid{ grid-template-columns: 1fr; }
}

.ai-attach-detail-preview{
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-border) 12%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height: 160px;
}
.ai-attach-detail-preview img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.ai-attach-detail-meta{ display:flex; flex-direction: column; gap: 8px; }

.ai-attach-detail-row{
  display:grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.ai-attach-detail-row--full{ grid-template-columns: 86px 1fr; }

.ai-attach-detail-k{
  color: var(--color-text-muted);
  font-size: 12px;
  padding-top: 4px;
}
.ai-attach-detail-v{
  font-size: 13px;
  color: var(--color-text);
  word-break: break-all;
  min-width: 0;
}
.ai-attach-detail-dim{ color: var(--color-text-muted); }
.ai-attach-detail-act{
  justify-self: end;
}

.ai-attach-detail-ta{
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
  resize: vertical;
  min-height: 78px;
}

.ai-attach-detail-ops{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 8px;
}
.ai-attach-detail-check{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-attach-detail-divider{
  height: 1px;
  background: var(--color-border);
  margin: 14px 0;
}

.ai-attach-detail-pre{
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.4;
  border: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-border) 10%, transparent);
  max-height: 44vh;
  overflow:auto;
}

@container attach-detail (max-width: 760px){
  .ai-attach-detail-header{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .ai-attach-detail-title{
    display:flex;
    flex-wrap:wrap;
    row-gap:4px;
  }
  .ai-attach-detail-sub{
    margin-left:0;
    flex-basis:100%;
  }
  .ai-attach-detail-grid{
    grid-template-columns: 1fr;
  }
  .ai-attach-detail-preview{
    min-height: 180px;
    max-height: 240px;
  }
  .ai-attach-detail-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ai-attach-detail-row--full{
    grid-template-columns: 1fr;
  }
  .ai-attach-detail-k{
    padding-top: 0;
  }
  .ai-attach-detail-act{
    justify-self: start;
  }
  .ai-attach-detail-ops{
    flex-wrap:wrap;
    align-items:flex-start;
  }
}

@container attach-detail (max-width: 520px){
  .ai-attach-detail-body{
    padding: 10px 12px;
  }
  .ai-attach-detail-preview{
    min-height: 150px;
    max-height: 200px;
    border-radius: 12px;
  }
  .ai-attach-detail-ops{
    flex-direction:column;
    align-items:stretch;
  }
  .ai-attach-detail-check{
    min-height: 34px;
  }
  .ai-attach-detail-ops .topbar-btn{
    width:100%;
    justify-content:center;
  }
  .ai-attach-detail-pre{
    max-height: 30vh;
  }
}

.ai-img-editor-body{
  padding: 12px 14px 16px;
  overflow: auto;
}


.ai-img-editor-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.ai-img-editor-item{
  display:grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 14px;
  padding: 10px;
  overflow:hidden;
}

.ai-img-editor-thumb{
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ai-img-editor-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.ai-img-editor-main{
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ai-img-editor-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ai-img-editor-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ai-img-editor-meta{
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-img-editor-ta{
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 8px 10px;
  outline: none;
  line-height: 1.4;
}

.ai-img-editor-ta:focus{
  border-color: color-mix(in srgb, var(--color-border) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border) 25%, transparent);
}

.ai-img-editor-actions{
  display:flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 720px){
  .ai-img-editor-item{
    grid-template-columns: 1fr;
  }
  .ai-img-editor-thumb{
    aspect-ratio: 16/9;
  }
  .ai-img-editor-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ai-img-editor-meta{
    white-space: normal;
  }
}


.ai-img-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px){
  .ai-img-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .ai-img-grid{ grid-template-columns: 1fr; }
  .ai-attach-search{ max-width: 68vw; }
}

.ai-img-item{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 14px;
  overflow:hidden;
  display:flex;
  flex-direction: column;
}

.ai-img-thumb{
  width: 100%;
  aspect-ratio: 16/10;
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ai-img-thumb img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
}

.ai-img-meta{
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.ai-img-meta .ai-img-caption{
  font-size: 12px;
  color: var(--color-text-muted);
}
.ai-img-meta textarea{
  width: 100%;
  min-height: 70px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 8px 10px;
  outline: none;
}

.ai-img-actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}
.ai-img-actions .ai-img-save{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}
.ai-img-actions .ai-img-save:hover{
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
}
.ai-img-actions .ai-img-save.is-busy{
  opacity: .7;
  pointer-events:none;
}


/* ----------------------------------------
 * Platform task widgets
 * ---------------------------------------- */

.sf-ai-task-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0;
}

.sf-ai-task-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.sf-ai-task-image {
  width: 100%;
  max-width: 360px;
  border-radius: 10px;
  display: block;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.sf-ai-task-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

.sf-ai-task-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sf-ai-task-actions .btn {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: 12px;
  cursor: pointer;
}

.sf-ai-task-actions .btn:hover {
  filter: brightness(1.03);
}

.sf-ai-task-info-once {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 8px;
  border-radius: 10px;
  border: 1px dashed var(--color-border);
  background: var(--color-bg-elevated);
}

.sf-ai-task-chain { display: flex; flex-direction: column; gap: 8px; }

.sf-ai-task-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(0,0,0,0.04);
  border: 1px dashed var(--color-border);
  padding: 8px 10px;
  border-radius: 10px;
  margin: 6px 0;
}

.sf-ai-task-note__text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }

.sf-ai-task-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.sf-ai-task-card__title { font-size: 12px; font-weight: 600; }
.sf-ai-task-status { font-size: 11px; color: var(--color-text-secondary); }

.sf-ai-task-widget--image { display: flex; flex-direction: column; gap: 6px; }
.sf-ai-task-image { max-width: 360px; width: 100%; border-radius: 10px; border: 1px solid var(--color-border); }
.sf-ai-task-meta { font-size: 11px; color: var(--color-text-secondary); }
.sf-ai-task-actions { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }

.sf-ai-task-copybtn {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg-2);
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  line-height: 1.4;
  max-width: 100%;
}
.sf-ai-task-copybtn:hover { filter: brightness(0.98); }

.sf-ai-candidate-panel {
  margin-top: 10px;
}

.sf-ai-candidate-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.sf-ai-candidate-strip::-webkit-scrollbar {
  height: 8px;
}

.sf-ai-candidate-strip::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 999px;
}

.sf-ai-candidate-card {
  flex: 0 0 min(220px, 78vw);
  width: min(220px, 78vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-2);
  scroll-snap-align: start;
  box-sizing: border-box;
}

.sf-ai-candidate-card__top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-ai-candidate-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent) 26%, var(--color-border));
}

.sf-ai-candidate-card__meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.sf-ai-candidate-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  display: block;
}

.sf-ai-candidate-card__desc {
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.45;
  min-height: 34px;
  word-break: break-word;
}

.sf-ai-candidate-card__btn {
  width: 100%;
  justify-content: center;
}

.sf-ai-task-pending { display:flex; gap: 8px; align-items:center; color: var(--color-text-secondary); font-size: 12px; }
.sf-ai-task-spinner { opacity: 0.85; }

.sf-ai-task-errorbox{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-border) 10%, transparent);
}
.sf-ai-task-errorbox__icon{ opacity: .9; line-height: 1; margin-top: 1px; }
.sf-ai-task-errorbox__title{ font-size: 12px; font-weight: 700; color: var(--color-text); }
.sf-ai-task-errorbox__msg{ margin-top: 4px; font-size: 12px; color: var(--color-text-secondary); white-space: pre-wrap; line-height: 1.45; }

.sf-ai-task-error { color: #b42318; font-size: 12px; }


/* -----------------------------
   AI Chat: 选择模式（删除气泡）
   仅使用 sf_new.css 的主题变量，保证一致性
------------------------------ */

.ai-chat-list--selecting .ai-msg {
  cursor: pointer;
  position: relative;
}

.ai-chat-list--selecting .ai-msg::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  opacity: 0.9;
}

.ai-chat-list--selecting .ai-msg.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.ai-chat-list--selecting .ai-msg.is-selected::after {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.ai-chat-select-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
}


/* ==============================
   Chat: 访问他人 Demo -> 复刻引导
   - 仅使用 sf_new.css 的主题变量
   ============================== */

.ai-fork-needprompt{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--panel-radius-sm);
  border: 1px dashed var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elevated) 85%, transparent);
}

.ai-fork-needprompt-text{
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

.ai-fork-needprompt-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* -----------------------------
   AI 流式终端（仅运行时显示）
   - 用于让用户感知“正在编码”
   - 颜色/圆角/字体全部复用主题变量
------------------------------ */
.ai-stream-box{
  border: 1px solid var(--color-border);
  border-radius: var(--panel-radius-sm);
  background: var(--color-bg-elevated);
  overflow: hidden;
  min-height: 188px;
  box-shadow: var(--pz-shadow-soft);
}

.ai-stream-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.ai-stream-title{
  font-size: 12px;
  color: var(--color-text);
  opacity: .95;
}

.ai-stream-sub{
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-stream-pre{
  margin: 0;
  padding: 10px;
  height: 156px;
  max-height: 156px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-workspace-guard{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border:1px solid rgba(245,158,11,.28);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,248,235,.98), rgba(255,243,214,.96));
  color:#5b3b07;
}

.ai-workspace-guard__title{
  font-size:15px;
  font-weight:700;
  color:#7c2d12;
}

.ai-workspace-guard__body,
.ai-workspace-guard__scope,
.ai-workspace-guard__hint{
  font-size:13px;
  line-height:1.55;
}

.ai-workspace-guard__scope,
.ai-workspace-guard__hint{
  color:#7c5a10;
}

.ai-workspace-guard__list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ai-workspace-guard__list li{
  line-height:1.5;
}

.ai-workspace-guard__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:4px;
}

/* scrollbar (reuse existing vars if present) */
.ai-stream-pre::-webkit-scrollbar{ width: 10px; }
.ai-stream-pre::-webkit-scrollbar-track{ background: transparent; }
.ai-stream-pre::-webkit-scrollbar-thumb{
  background: var(--pz-scrollbar-thumb, rgba(255,255,255,.18));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}


.ai-attach-item-main{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.ai-attach-item-head{
  min-width: 0;
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.ai-attach-item-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-border) 14%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 36px;
  font-size: 16px;
}

.ai-attach-item-icon--image{
  width: 84px;
  height: 60px;
  flex: 0 0 84px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-border) 10%, transparent);
}

.ai-attach-item-thumb{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-attach-item-date{
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  float: right;
}

.ai-attach-delete-btn,
.ai-attach-detail-delete-btn{
  color: var(--color-danger);
}

.ai-attach-delete-btn:hover,
.ai-attach-detail-delete-btn:hover{
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

@media (max-width: 720px){
  .ai-attach-item-top{
    flex-direction: column;
    align-items: stretch;
  }

  .ai-attach-item-icon--image{
    width: 72px;
    height: 52px;
    flex-basis: 72px;
  }

  .ai-attach-item-date{
    white-space: normal;
  }

  .ai-attach-detail-ops{
    flex-wrap: wrap;
  }
}


/* -----------------------------
   BaaS prepare / ready cards
   ----------------------------- */
.ai-baas-gateway,
.ai-baas-ready{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 92%, white 8%) 0%, var(--color-bg-elevated) 100%);
  box-shadow:0 14px 28px rgba(15, 23, 42, 0.08);
  position:relative;
  z-index:1;
}
.ai-baas-gateway-title,
.ai-baas-ready-title{
  font-size:15px;
  font-weight:700;
  color:var(--color-text);
}
.ai-baas-gateway-summary,
.ai-baas-ready-summary,
.ai-baas-ready-detail,
.ai-baas-gateway-foot{
  font-size:13px;
  line-height:1.6;
  color:var(--color-text-muted);
}
.ai-baas-gateway-questions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ai-baas-gateway-q{
  padding:8px 10px;
  border-radius:10px;
  border:1px dashed var(--color-border);
  background:var(--color-bg);
  color:var(--color-text);
  font-size:13px;
}
.ai-baas-ready-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ai-baas-ready-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--color-accent-soft) 84%, white 16%);
  color:var(--color-text);
  font-size:12px;
}
.ai-baas-ready-textarea{
  width:100%;
  min-height:84px;
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:var(--color-bg);
  color:var(--color-text);
  resize:vertical;
}
.ai-baas-ready-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ai-baas-ready-relation{
  padding:0;
  border:0;
  background:transparent;
}
.ai-baas-detail-modal{
  position:fixed;
  inset:0;
  z-index:2147483000;
  isolation:isolate;
}
.ai-baas-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,13,21,.48);
  backdrop-filter:blur(4px);
}
.ai-baas-detail-panel{
  position:absolute;
  right:12px;
  top:12px;
  width:min(1180px,calc(100vw - 24px));
  height:calc(100% - 24px);
  background:var(--color-bg-elevated);
  border:1px solid color-mix(in srgb, var(--color-border) 86%, white 14%);
  border-radius:22px;
  box-shadow:0 28px 80px rgba(15, 23, 42, 0.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.ai-baas-detail-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:16px 18px;
  border-bottom:1px solid var(--color-border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 88%, white 12%) 0%, var(--color-bg-elevated) 100%);
}
.ai-baas-detail-title{
  font-size:18px;
  font-weight:700;
  color:var(--color-text);
}
.ai-baas-detail-subtitle{
  font-size:12px;
  color:var(--color-text-muted);
  margin-top:4px;
  max-width:720px;
  line-height:1.6;
}
.ai-baas-detail-body{
  padding:16px 18px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
}
.ai-baas-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.ai-baas-detail-card{
  border:1px solid var(--color-border);
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 90%, white 10%) 0%, var(--color-bg) 100%);
  padding:14px;
}
.ai-baas-detail-card-title{
  font-size:14px;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:10px;
}
.ai-baas-detail-pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  line-height:1.6;
  color:var(--color-text);
}
.ai-baas-detail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ai-baas-overview{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--color-border) 82%, white 18%);
  border-radius:18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent-soft) 40%, transparent 60%) 0%, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 90%, white 10%) 0%, var(--color-bg) 100%);
}
.ai-baas-overview-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ai-baas-overview-title{
  font-size:16px;
  font-weight:700;
  color:var(--color-text);
}
.ai-baas-overview-subtitle{
  font-size:13px;
  line-height:1.6;
  color:var(--color-text-muted);
}
.ai-baas-overview-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.ai-baas-overview-stat,
.ai-baas-fact{
  border:1px solid color-mix(in srgb, var(--color-border) 80%, white 20%);
  border-radius:14px;
  background:color-mix(in srgb, var(--color-bg-elevated) 92%, white 8%);
  padding:10px 12px;
}
.ai-baas-overview-stat span,
.ai-baas-fact span{
  display:block;
  font-size:12px;
  color:var(--color-text-muted);
}
.ai-baas-overview-stat strong,
.ai-baas-fact strong{
  display:block;
  margin-top:4px;
  color:var(--color-text);
  font-size:13px;
  line-height:1.5;
  word-break:break-word;
}
.ai-baas-overview-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.ai-baas-overview-step{
  border:1px solid color-mix(in srgb, var(--color-border) 80%, white 20%);
  border-radius:16px;
  background:color-mix(in srgb, var(--color-bg-elevated) 94%, white 6%);
  padding:12px;
}
.ai-baas-overview-step-label,
.ai-baas-section-title{
  font-size:12px;
  color:var(--color-text-muted);
}
.ai-baas-overview-step-title{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--color-text);
}
.ai-baas-overview-step-meta{
  margin-top:6px;
  font-size:12px;
  color:var(--color-text-muted);
  word-break:break-word;
}
.ai-baas-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.ai-baas-info-card{
  border:1px solid color-mix(in srgb, var(--color-border) 82%, white 18%);
  border-radius:16px;
  background:color-mix(in srgb, var(--color-bg) 94%, white 6%);
  padding:12px;
}
.ai-baas-info-title{
  font-size:13px;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:10px;
}
.ai-baas-detail-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ai-baas-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ai-baas-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:color-mix(in srgb, var(--color-accent-soft) 70%, white 30%);
  color:var(--color-text);
  font-size:12px;
  max-width:100%;
}
.ai-baas-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ai-baas-list-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  background:color-mix(in srgb, var(--color-bg-elevated) 95%, white 5%);
  border:1px solid color-mix(in srgb, var(--color-border) 82%, white 18%);
}
.ai-baas-list-item strong{
  font-size:13px;
  line-height:1.5;
  color:var(--color-text);
}
.ai-baas-list-item span{
  font-size:12px;
  line-height:1.6;
  color:var(--color-text-muted);
}
.ai-baas-empty{
  padding:12px;
  border-radius:14px;
  border:1px dashed var(--color-border);
  background:color-mix(in srgb, var(--color-bg-elevated) 94%, white 6%);
  color:var(--color-text-muted);
  font-size:12px;
  line-height:1.6;
}
.ai-baas-fact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.ai-baas-note,
.ai-baas-ready-prompt{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--color-border) 84%, white 16%);
  background:color-mix(in srgb, var(--color-bg-elevated) 96%, white 4%);
  color:var(--color-text);
  font-size:13px;
  line-height:1.7;
}
.ai-baas-ready-prompt-label{
  font-size:12px;
  color:var(--color-text-muted);
  margin-bottom:6px;
}
.ai-baas-ready-prompt-text{
  color:var(--color-text);
}
@media (max-width: 920px){
  .ai-baas-detail-grid,
  .ai-baas-fact-grid,
  .ai-baas-info-grid,
  .ai-baas-overview-stats,
  .ai-baas-overview-flow{
    grid-template-columns:1fr;
  }
  .ai-baas-detail-panel{
    right:0;
    top:0;
    width:100vw;
    height:100%;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
}