/* ════════════════════════════════════════════════════════════
   Lexi Widget Styles
   Sprint 2.2, v0.2.2
   File: embed/lexi.css

   Opt-in include. Pairs with lexi-widget.js. Host apps that use a
   custom UI ignore this file.

   All styles scoped under .lexi-widget. No global selectors. CSS
   custom properties expose colors/spacing for theming.
   ════════════════════════════════════════════════════════════ */

.lexi-widget {
  --lexi-bg:           #ffffff;
  --lexi-bg-soft:      #fafafa;
  --lexi-border:       #e5e7eb;
  --lexi-text:         #111827;
  --lexi-text-muted:   #6b7280;
  --lexi-accent:       #1a7a6e;
  --lexi-accent-hover: #155f56;
  --lexi-user-bg:      #eff6ff;
  --lexi-user-text:    #1e3a8a;
  --lexi-asst-bg:      #f3f4f6;
  --lexi-asst-text:    #111827;
  --lexi-test-bg:      #fef3c7;
  --lexi-test-text:    #92400e;
  --lexi-test-border:  #d97706;
  --lexi-error-bg:     #fee2e2;
  --lexi-error-text:   #991b1b;
  --lexi-error-border: #fca5a5;
  --lexi-source-bg:    #ecfdf5;
  --lexi-source-text:  #047857;

  display: flex;
  flex-direction: column;
  background: var(--lexi-bg);
  border: 1px solid var(--lexi-border);
  border-radius: 10px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lexi-text);
  overflow: hidden;
  min-height: 320px;
  max-height: 70vh;
}

/* ── Header ─────────────────────────────────────────── */
.lexi-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--lexi-bg-soft);
  border-bottom: 1px solid var(--lexi-border);
  flex-wrap: wrap;
}

.lexi-widget-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--lexi-accent);
  flex: 1;
  min-width: 0;
}

.lexi-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.lexi-badge-test {
  background: var(--lexi-test-bg);
  color: var(--lexi-test-text);
  border: 1px solid var(--lexi-test-border);
}

.lexi-badge-env {
  background: #e0e7ff;
  color: #3730a3;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
}

.lexi-header-action {
  background: transparent;
  border: 1px solid var(--lexi-border);
  color: var(--lexi-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.lexi-header-action:hover:not(:disabled) {
  border-color: var(--lexi-accent);
  color: var(--lexi-accent);
  background: white;
}
.lexi-header-action:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Log ──────────────────────────────────────────────── */
.lexi-widget-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Suggested prompts row ───────────────────────────── */
.lexi-suggested-row {
  background: var(--lexi-bg-soft);
  border: 1px dashed var(--lexi-border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lexi-suggested-label {
  font-size: 11px;
  color: var(--lexi-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lexi-suggested-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lexi-suggested-chip {
  background: white;
  border: 1px solid var(--lexi-border);
  color: var(--lexi-text);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  max-width: 100%;
}
.lexi-suggested-chip:hover {
  border-color: var(--lexi-accent);
  color: var(--lexi-accent);
  background: var(--lexi-source-bg);
}

/* ── Messages ─────────────────────────────────────────── */
.lexi-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 92%;
}
.lexi-msg-user      { align-self: flex-end; }
.lexi-msg-assistant { align-self: flex-start; }

.lexi-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lexi-msg-role {
  font-size: 11px;
  color: var(--lexi-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lexi-msg-source {
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--lexi-source-bg);
  color: var(--lexi-source-text);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #a7f3d0;
}

.lexi-msg-content {
  padding: 10px 14px;
  border-radius: 10px;
  word-wrap: break-word;
}
.lexi-msg-user .lexi-msg-content {
  background: var(--lexi-user-bg);
  color: var(--lexi-user-text);
  white-space: pre-wrap;
}
.lexi-msg-assistant .lexi-msg-content {
  background: var(--lexi-asst-bg);
  color: var(--lexi-asst-text);
}

/* Inline markdown nodes */
.lexi-msg-line   { margin: 0; }
.lexi-msg-line strong { font-weight: 600; }
.lexi-msg-line em     { font-style: italic; color: var(--lexi-text-muted); }
.lexi-msg-line code   {
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}
.lexi-msg-list  { margin: 6px 0 6px 18px; padding: 0; }
.lexi-msg-list li { margin-bottom: 2px; }

/* Loading state */
.lexi-msg-content-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lexi-text-muted);
}
.lexi-spinner {
  animation: lexi-spin 0.9s linear infinite;
  color: var(--lexi-accent);
}
.lexi-spinner circle {
  stroke-dasharray: 50;
  stroke-dashoffset: 25;
}
.lexi-loading-label { font-style: italic; }
@keyframes lexi-spin { to { transform: rotate(360deg); } }

/* Error state */
.lexi-msg-error .lexi-msg-content-error {
  background: var(--lexi-error-bg);
  color: var(--lexi-error-text);
  border: 1px solid var(--lexi-error-border);
}

/* Message footer (meta + actions) */
.lexi-msg-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--lexi-text-muted);
  padding-left: 4px;
}
.lexi-msg-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.lexi-msg-action {
  background: transparent;
  border: 1px solid var(--lexi-border);
  color: var(--lexi-text-muted);
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.lexi-msg-action:hover {
  border-color: var(--lexi-accent);
  color: var(--lexi-accent);
}
.lexi-msg-action-done {
  border-color: var(--lexi-source-text);
  color: var(--lexi-source-text);
  background: var(--lexi-source-bg);
}

/* ── Input row ────────────────────────────────────────── */
.lexi-widget-inputrow {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--lexi-border);
  background: var(--lexi-bg-soft);
}
.lexi-widget-input {
  flex: 1;
  border: 1px solid var(--lexi-border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  background: white;
  color: var(--lexi-text);
}
.lexi-widget-input:focus {
  outline: 2px solid var(--lexi-accent);
  outline-offset: -1px;
  border-color: var(--lexi-accent);
}
.lexi-widget-input:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.7;
}

.lexi-widget-send {
  background: var(--lexi-accent);
  color: white;
  border: 0;
  padding: 0 18px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.lexi-widget-send:hover:not(:disabled) { background: var(--lexi-accent-hover); }
.lexi-widget-send:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* ── Diagnostics footer ──────────────────────────────── */
.lexi-widget-diagnostics {
  padding: 6px 12px;
  background: var(--lexi-bg-soft);
  border-top: 1px solid var(--lexi-border);
  color: var(--lexi-text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}