/* Stoner Bot Control Center: live-integration styles (v3.1.0)
 * Minimal styles for states and elements added by js/live.js.
 * ChatGPT may restyle anything here freely; keep the selectors listed in HOOKS.md working.
 */

[hidden] { display: none !important; }

/* Bot status dot by state (status card has data-state). */
#screen [data-live="status-card"][data-state="online"] .dot {
  background: #6fdc9c;
  box-shadow: 0 0 0 4px rgba(111, 220, 156, .14), 0 0 16px rgba(111, 220, 156, .35);
}
#screen [data-live="status-card"][data-state="starting"] .dot,
#screen [data-live="status-card"][data-state="stopping"] .dot,
#screen [data-live="status-card"][data-state="loading"] .dot {
  background: #f0c36a;
  box-shadow: 0 0 0 4px rgba(240, 195, 106, .14);
}
#screen [data-live="status-card"][data-state="online"] .offline-indicator { background: #6fdc9c; }
#screen [data-live="status-card"] .control:disabled { opacity: .45; }
#screen [data-live="signin"] { width: 100%; }

/* Header mode badge (DEMO / MOCK / LIVE). */
.demobadge[data-mode="live"] { color: #a9f0c6; border-color: rgba(111, 220, 156, .35); background: rgba(111, 220, 156, .08); }

/* Lists in live subpages. */
#screen .live-list .settings-link { width: 100%; text-align: left; }
#screen .live-list .item small { word-break: break-word; }
#screen .live-row-actions { justify-content: flex-start; margin-top: 10px; }
#screen .live-actions { display: grid; gap: 10px; }
#screen .live-actions .primary { margin-top: 0; }
#screen .live-button { display: block; text-align: center; text-decoration: none; }
#screen .live-danger { color: #f3a1b4; border-color: rgba(243, 161, 180, .35); background: rgba(243, 161, 180, .08); }
#screen .live-more { display: block; width: 100%; margin-top: 12px; }
#screen .secondary:disabled, #screen .primary:disabled { opacity: .45; }
#screen .live-fee { color: #f0c36a !important; }
#screen [data-outcome="denied"] strong, #screen [data-outcome="error"] strong { color: #f3a1b4; }

/* File editor. */
#screen textarea.live-editor {
  min-height: 45vh !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px; /* 16px stops iOS Safari from zooming in when the editor is tapped */
  line-height: 1.45;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 4;
}

/* Confirm sheet (js/live.js ask()). Replaces Safari's confirm/prompt.
 * Hooks: dialog[data-live-sheet] with data-kind="confirm|input" and data-tone="normal|danger";
 * inside: .sb-sheet-title, .sb-sheet-message, .sb-sheet-input, .sb-sheet-actions,
 * [data-sheet-cancel], [data-sheet-confirm]. html.sb-sheet-open while a sheet is up. */
html.sb-sheet-open { overflow: hidden; }
dialog.sb-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 650px;
  max-height: 85dvh;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--line, rgba(214, 192, 246, .13));
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  color: var(--text, #f7f4fb);
  background: linear-gradient(160deg, rgba(52, 42, 70, .97), rgba(24, 21, 34, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 -18px 50px rgba(0, 0, 0, .45);
  overflow-y: auto;
  animation: sb-sheet-up .22s ease-out;
}
dialog.sb-sheet::backdrop {
  background: rgba(8, 6, 14, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sb-sheet-body { padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
.sb-sheet-body::before {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  margin: -10px auto 16px;
  border-radius: 3px;
  background: rgba(214, 192, 246, .25);
}
.sb-sheet-title { margin: 0 0 8px; font-size: 19px; letter-spacing: -.4px; overflow-wrap: anywhere; }
.sb-sheet-message { margin: 0; color: var(--muted, #a9a2b8); font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.sb-sheet-input { margin-top: 16px; font-size: 16px; } /* 16px stops iOS Safari from zooming in */
.sb-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sb-sheet-actions button { min-height: 48px; margin: 0; border-radius: 14px; font-size: 14px; font-weight: 700; }
.sb-sheet-actions button:disabled { opacity: .45; }
.sb-sheet[data-tone="danger"] .sb-sheet-confirm {
  color: #1b0c12;
  border-color: rgba(243, 161, 180, .6);
  background: linear-gradient(135deg, #f3a1b4, #d97790);
}
@keyframes sb-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sb-sheet { animation: none; } }