/* LetisFlow AI Agent — UI Chat */
:root {
  --lf-bg: #0a0f1a;
  --lf-surface: rgba(255,255,255,.04);
  --lf-surface-2: rgba(255,255,255,.07);
  --lf-border: rgba(255,255,255,.10);
  --lf-border-accent: rgba(249,115,22,.28);
  --lf-accent: #f97316;
  --lf-accent-2: #fb923c;
  --lf-text: #f5f7fb;
  --lf-muted: #94a3b8;
  --lf-agent-bubble: rgba(249,115,22,.09);
  --lf-user-bubble: rgba(255,255,255,.06);
  --lf-radius: 18px;
  --lf-radius-sm: 12px;
}

.lf-agent-wrap {
  max-width: 740px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color: var(--lf-text);
  background: var(--lf-bg);
  border: 1px solid var(--lf-border-accent);
  border-radius: var(--lf-radius);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.lf-agent-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--lf-border);
  background: rgba(249,115,22,.05);
}

.lf-agent-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.lf-agent-icon {
  color: var(--lf-accent);
  flex-shrink: 0;
}

.lf-agent-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--lf-muted);
  line-height: 1.5;
}

/* ── Credits bar ────────────────────────────────────────────────────────── */
.lf-agent-credits-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  border-bottom: 1px solid var(--lf-border);
  background: rgba(255,255,255,.025);
  font-size: 12px;
}

.lf-cred-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(249,115,22,.14);
  border: 1px solid rgba(249,115,22,.30);
  color: var(--lf-accent-2);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background .25s, color .25s, border-color .25s;
}

.lf-cred-count.lf-cred-low {
  background: rgba(234,179,8,.15);
  border-color: rgba(234,179,8,.40);
  color: #fbbf24;
}

.lf-cred-count.lf-cred-empty {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
  color: #f87171;
}

.lf-cred-label {
  color: var(--lf-muted);
  font-size: 12px;
}

.lf-cred-cta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--lf-accent-2);
  text-decoration: none;
  opacity: .75;
  transition: opacity .15s;
}

.lf-cred-cta:hover {
  opacity: 1;
  text-decoration: underline;
}

.lf-cred-cta.lf-cred-cta-urgent {
  color: #f87171;
  opacity: 1;
}

/* ── Mode buttons ───────────────────────────────────────────────────────── */
.lf-agent-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--lf-border);
  background: rgba(255,255,255,.02);
}

.lf-mode-btn {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--lf-border);
  background: transparent;
  color: var(--lf-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}

.lf-mode-btn:hover {
  border-color: rgba(249,115,22,.40);
  color: var(--lf-accent-2);
  background: rgba(249,115,22,.07);
}

.lf-mode-btn.active {
  border-color: var(--lf-accent);
  background: rgba(249,115,22,.14);
  color: var(--lf-accent-2);
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.lf-agent-messages {
  min-height: 280px;
  max-height: 440px;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.lf-agent-messages::-webkit-scrollbar {
  width: 4px;
}
.lf-agent-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 4px;
}

.lf-msg {
  display: flex;
  max-width: 86%;
}

.lf-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.lf-msg-agent {
  align-self: flex-start;
}

.lf-msg-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.lf-msg-user .lf-msg-bubble {
  background: var(--lf-user-bubble);
  border: 1px solid var(--lf-border);
  border-bottom-right-radius: 4px;
}

.lf-msg-agent .lf-msg-bubble {
  background: var(--lf-agent-bubble);
  border: 1px solid var(--lf-border-accent);
  border-bottom-left-radius: 4px;
}

.lf-msg-muted {
  color: var(--lf-muted);
  font-size: 13px;
}

/* ── Action bar ─────────────────────────────────────────────────────────── */
.lf-agent-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--lf-border);
  background: rgba(255,255,255,.02);
}

.lf-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lf-border-accent);
  background: rgba(249,115,22,.08);
  color: var(--lf-accent-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: .18s ease;
  white-space: nowrap;
}

.lf-action-btn:hover {
  background: rgba(249,115,22,.18);
  border-color: var(--lf-accent);
  color: #fff;
}

/* ── Input area ─────────────────────────────────────────────────────────── */
.lf-agent-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--lf-border);
  background: rgba(255,255,255,.02);
}

.lf-agent-input {
  flex: 1;
  resize: none;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-sm);
  color: var(--lf-text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  padding: 10px 14px;
  outline: none;
  transition: border-color .18s ease;
}

.lf-agent-input::placeholder {
  color: var(--lf-muted);
}

.lf-agent-input:focus {
  border-color: rgba(249,115,22,.50);
}

.lf-agent-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.lf-agent-send-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--lf-accent-2), var(--lf-accent));
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(249,115,22,.35);
  transition: .18s ease;
}

.lf-agent-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(249,115,22,.50);
}

.lf-agent-send-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Loading ────────────────────────────────────────────────────────────── */
.lf-agent-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 14px;
  color: var(--lf-muted);
  font-size: 13px;
}

.lf-agent-dots {
  display: flex;
  gap: 5px;
}

.lf-agent-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lf-accent);
  animation: lf-dot-bounce .9s infinite ease-in-out;
}
.lf-agent-dots span:nth-child(2) { animation-delay: .15s; }
.lf-agent-dots span:nth-child(3) { animation-delay: .30s; }

@keyframes lf-dot-bounce {
  0%, 80%, 100% { transform: scale(.75); opacity: .55; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Guest note ─────────────────────────────────────────────────────────── */
.lf-agent-guest-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px 12px;
  font-size: 12px;
  color: var(--lf-muted);
  border-top: 1px solid var(--lf-border);
}

.lf-agent-guest-note a {
  color: var(--lf-accent-2);
  text-decoration: underline;
  font-weight: 700;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lf-agent-header,
  .lf-agent-credits-bar,
  .lf-agent-modes,
  .lf-agent-messages,
  .lf-agent-input-wrap,
  .lf-agent-action-bar,
  .lf-agent-loading,
  .lf-agent-guest-note {
    padding-left: 16px;
    padding-right: 16px;
  }
  .lf-agent-title { font-size: 15px; }
  .lf-msg { max-width: 96%; }
}