/**
 * AI Tab — styles for the right-panel assistant.
 *
 * Scoped under .tab-pane[data-pane="ai"] so it never touches other panes.
 * Uses the studio design tokens (--ink-*, --stroke-*, --glass-*, --r-*)
 * inherited from the builder shell.
 *
 * [2026-05-18]
 */

/* ─────────────────────────────────────────────────────────────────────
 * Locked / no-config states (non-paying / unconfigured)
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-state {
  padding: 24px 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 12px;
}
.tab-pane[data-pane="ai"] .ai-state__icon { font-size: 28px; margin-bottom: 10px; opacity: 0.8; }
.tab-pane[data-pane="ai"] .ai-state h4 { font-size: 14px; margin: 0 0 6px; color: var(--ink-0, #fff); }
.tab-pane[data-pane="ai"] .ai-state p { font-size: 12.5px; line-height: 1.55; color: var(--ink-2, #99a); margin: 0; }
.tab-pane[data-pane="ai"] .ai-state code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; }
.tab-pane[data-pane="ai"] .ai-state__actions {
  display: flex; gap: 8px; justify-content: center; margin-top: 14px;
}
.tab-pane[data-pane="ai"] .ai-state__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-2, rgba(255,255,255,0.16));
  border-radius: 8px;
  color: var(--ink-0, #fff);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.tab-pane[data-pane="ai"] .ai-state__btn:hover {
  background: var(--glass-3, rgba(255,255,255,0.08));
  border-color: var(--stroke-2, rgba(255,255,255,0.28));
  transform: translateY(-1px);
}
.tab-pane[data-pane="ai"] .ai-state__btn--primary {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border-color: transparent;
  color: #fff;
}
.tab-pane[data-pane="ai"] .ai-state__btn--primary:hover {
  opacity: 0.92; border-color: transparent;
}
.tab-pane[data-pane="ai"] .ai-state__icon svg { display: inline-block; vertical-align: middle; }

/* ─────────────────────────────────────────────────────────────────────
 * Credit balance bar (Lovable-style ticker)
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-balance-bar {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(96,165,250,0.06), rgba(167,139,250,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-left: 2px solid oklch(0.7 0.21 295 / 0.6);
  border-radius: 8px;
  margin-bottom: 10px;
}
.tab-pane[data-pane="ai"] .ai-balance__main {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.tab-pane[data-pane="ai"] .ai-balance__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2, #99a);
}
.tab-pane[data-pane="ai"] .ai-balance__value {
  font-size: 22px; font-weight: 600;
  color: var(--ink-0, #fff);
  font-feature-settings: "tnum" 1;
  transition: transform .2s ease, color .2s ease;
  display: inline-block;
}
.tab-pane[data-pane="ai"] .ai-balance__value.is-low {
  color: oklch(0.78 0.18 70);
}
.tab-pane[data-pane="ai"] .ai-balance__hint {
  font-size: 11px; color: var(--ink-3, #889);
  text-decoration: none;
}
.tab-pane[data-pane="ai"] .ai-balance__hint--warn {
  color: oklch(0.78 0.18 70);
  font-weight: 500;
}
.tab-pane[data-pane="ai"] .ai-balance__hint--warn:hover { color: oklch(0.82 0.18 60); text-decoration: underline; }
.tab-pane[data-pane="ai"] .ai-balance__cta {
  display: inline-block;
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  color: oklch(0.78 0.18 35); /* warm amber call-to-action when empty */
  text-decoration: none;
  margin-top: 2px;
}
.tab-pane[data-pane="ai"] .ai-balance__cta:hover { color: oklch(0.82 0.16 70); text-decoration: underline; }

/* Empty state when balance hits 0 mid-session */
.tab-pane[data-pane="ai"] .ai-empty {
  padding: 22px 18px;
  text-align: center;
  background: linear-gradient(180deg, oklch(0.78 0.18 35 / 0.08), transparent);
  border: 1px solid oklch(0.78 0.18 35 / 0.25);
  border-radius: 12px;
}
.tab-pane[data-pane="ai"] .ai-empty__icon {
  color: oklch(0.78 0.18 35);
  margin-bottom: 8px;
  display: flex; justify-content: center;
}
.tab-pane[data-pane="ai"] .ai-empty h4 {
  font-size: 14px; margin: 0 0 4px; color: var(--ink-0, #fff);
}
.tab-pane[data-pane="ai"] .ai-empty p {
  font-size: 12px; color: var(--ink-2, #99a); margin: 0 0 12px;
}

/* ─────────────────────────────────────────────────────────────────────
 * [2026-05-19] Center hero — AI input + submit button styling.
 * The empty-canvas .ec-textbox container styled in builder-overlay.css;
 * here we add the new <input> + submit overrides for the AI-wired flow.
 * ───────────────────────────────────────────────────────────────────── */
.studio-empty-canvas .ec-textbox {
  cursor: text;
}
.studio-empty-canvas .ec-textbox #studio-ec-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--ink-0, #fff);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  padding: 4px 0;
  min-width: 0;
}
.studio-empty-canvas .ec-textbox #studio-ec-input::placeholder {
  color: var(--ink-2, #99a);
  opacity: 0.7;
}
.studio-empty-canvas .ec-textbox .ec-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: transform .1s, opacity .15s;
  flex-shrink: 0;
}
.studio-empty-canvas .ec-textbox .ec-submit:hover { transform: translateY(-1px); }
.studio-empty-canvas .ec-textbox .ec-submit:active { transform: translateY(0); opacity: 0.85; }
.studio-empty-canvas .ec-textbox:focus-within {
  border-color: var(--cyan, oklch(0.85 0.13 205));
  border-style: solid;
}
.studio-empty-canvas .ec-status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Mode pills
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-mode-pills {
  display: flex; gap: 6px;
  padding: 4px;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 10px;
  margin-bottom: 8px;
}
.tab-pane[data-pane="ai"] .ai-mode-pill {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--ink-2, #99a);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-pane[data-pane="ai"] .ai-mode-pill:hover { color: var(--ink-1, #ccd); }
.tab-pane[data-pane="ai"] .ai-mode-pill.is-active {
  background: var(--glass-3, rgba(255,255,255,0.08));
  color: var(--ink-0, #fff);
}
.tab-pane[data-pane="ai"] .ai-mode-hint {
  font-size: 11.5px; color: var(--ink-3, #889); line-height: 1.45; margin: 6px 0 0;
}
.tab-pane[data-pane="ai"] .is-hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
 * Suggestion chips (quick prompts)
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tab-pane[data-pane="ai"] .ai-suggest {
  padding: 5px 10px;
  font-size: 11.5px;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 999px;
  color: var(--ink-1, #ccd);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tab-pane[data-pane="ai"] .ai-suggest:hover {
  background: var(--glass-3, rgba(255,255,255,0.08));
  border-color: var(--stroke-2, rgba(255,255,255,0.16));
  color: var(--ink-0, #fff);
}

/* ─────────────────────────────────────────────────────────────────────
 * Prompt input — reuse existing .cmd-prompt + .ai-submit button
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-submit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 11.5px; font-family: inherit;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border: 0; border-radius: 6px;
  color: #fff; font-weight: 500;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.tab-pane[data-pane="ai"] .ai-submit:hover { transform: translateY(-1px); }
.tab-pane[data-pane="ai"] .ai-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tab-pane[data-pane="ai"] .ai-submit .key {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  padding: 1px 4px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.18);
}

/* ─────────────────────────────────────────────────────────────────────
 * Response viewer
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-response { animation: aiFadeIn .25s ease-out; }
@keyframes aiFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-pane[data-pane="ai"] .ai-cost-chip {
  display: inline-block; margin-left: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  color: var(--ink-2, #99a);
  font-weight: normal;
  vertical-align: middle;
}
.tab-pane[data-pane="ai"] .ai-response__summary {
  font-size: 12.5px; line-height: 1.55;
  color: var(--ink-1, #ccd);
  padding: 8px 10px;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border-left: 2px solid oklch(0.7 0.21 295 / 0.6);
  border-radius: 4px;
  margin-bottom: 12px;
}
.tab-pane[data-pane="ai"] .ai-response__changes {
  display: flex; flex-direction: column; gap: 6px;
}
.tab-pane[data-pane="ai"] .ai-change {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 7px;
}
.tab-pane[data-pane="ai"] .ai-change.is-applied { border-color: oklch(0.7 0.18 158 / 0.4); background: oklch(0.7 0.18 158 / 0.06); }
.tab-pane[data-pane="ai"] .ai-change.is-skipped { opacity: 0.55; }
.tab-pane[data-pane="ai"] .ai-change__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tab-pane[data-pane="ai"] .ai-change__field {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: oklch(0.7 0.21 295);
  letter-spacing: 0.04em;
}
.tab-pane[data-pane="ai"] .ai-change__value {
  font-size: 12px;
  color: var(--ink-0, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-pane[data-pane="ai"] .ai-change__apply {
  flex-shrink: 0;
  padding: 4px 10px; font-size: 11px;
  background: transparent;
  border: 1px solid var(--stroke-2, rgba(255,255,255,0.16));
  border-radius: 5px;
  color: var(--ink-1, #ccd);
  cursor: pointer;
  transition: all .15s;
}
.tab-pane[data-pane="ai"] .ai-change__apply:hover:not(:disabled) {
  background: var(--glass-3, rgba(255,255,255,0.08));
  color: var(--ink-0, #fff);
}
.tab-pane[data-pane="ai"] .ai-change__apply:disabled { cursor: default; }

.tab-pane[data-pane="ai"] .ai-response__actions {
  display: flex; gap: 8px;
  margin-top: 12px;
}
.tab-pane[data-pane="ai"] .ai-btn {
  flex: 1;
  padding: 7px 12px;
  font-size: 12px; font-weight: 500;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 7px;
  color: var(--ink-1, #ccd);
  cursor: pointer;
}
.tab-pane[data-pane="ai"] .ai-btn:hover { background: var(--glass-3, rgba(255,255,255,0.08)); color: var(--ink-0, #fff); }
.tab-pane[data-pane="ai"] .ai-btn--primary {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border: 0; color: #fff;
}
.tab-pane[data-pane="ai"] .ai-btn--primary:hover { opacity: 0.92; }

.tab-pane[data-pane="ai"] .ai-response__followup {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.tab-pane[data-pane="ai"] .ai-followup {
  padding: 5px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px dashed var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 999px;
  color: var(--ink-2, #99a);
  cursor: pointer;
}
.tab-pane[data-pane="ai"] .ai-followup:hover { border-style: solid; color: var(--ink-0, #fff); border-color: var(--stroke-2, rgba(255,255,255,0.16)); }

/* ─────────────────────────────────────────────────────────────────────
 * Status bar
 * ───────────────────────────────────────────────────────────────────── */
.tab-pane[data-pane="ai"] .ai-statusbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--glass-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke-1, rgba(255,255,255,0.08));
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink-2, #99a);
}
.tab-pane[data-pane="ai"] .ai-statusbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.7 0.18 158);
  flex-shrink: 0;
  transition: background .2s;
}
.tab-pane[data-pane="ai"] .ai-statusbar__dot[data-ai-status="busy"]  { background: oklch(0.78 0.18 70); animation: aiPulse 1s infinite; }
.tab-pane[data-pane="ai"] .ai-statusbar__dot[data-ai-status="error"] { background: oklch(0.68 0.22 22); }
@keyframes aiPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }