/* Camara minimal v1 styles. Pico handles the heavy lifting; this layer
   sets the chat-specific layout (3-column desktop, 2-column mobile) and
   small UI affordances. The full design system will be swapped in by
   the kanban-design-frontend cards (T1, T2, T3). */

:root {
  --camara-bg: #0b0d10;
  --camara-pane: #14181d;
  --camara-accent: #4cc2ff;
  --camara-text: #e6edf3;
  --camara-muted: #8b949e;
  --camara-border: #1f262d;
}

@media (prefers-color-scheme: light) {
  :root {
    --camara-bg: #fafbfc;
    --camara-pane: #ffffff;
    --camara-accent: #0969da;
    --camara-text: #1f2328;
    --camara-muted: #59636e;
    --camara-border: #d1d9e0;
  }
}

body { margin: 0; background: var(--camara-bg); color: var(--camara-text); }
.app { display: grid; grid-template-columns: 280px 1fr; height: 100vh; }
.sessions-pane { background: var(--camara-pane); border-right: 1px solid var(--camara-border); display: flex; flex-direction: column; }
.sessions-pane header { padding: 1rem; display: flex; gap: 0.5rem; }
.sessions-pane header select { flex: 1; }
.sessions-pane footer { padding: 0.75rem 1rem; border-top: 1px solid var(--camara-border); display: flex; justify-content: space-between; align-items: center; }
#session-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
#session-list li { padding: 0.75rem 1rem; border-bottom: 1px solid var(--camara-border); cursor: pointer; }
#session-list li.active { background: var(--camara-border); }
#session-list li .title { font-weight: 600; }
#session-list li .preview { color: var(--camara-muted); font-size: 0.85rem; margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-pane { display: flex; flex-direction: column; height: 100vh; }
.chat-pane header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--camara-border); }
.chat-pane #messages { list-style: none; padding: 1rem 1.25rem; margin: 0; overflow-y: auto; flex: 1; }
.chat-pane .message { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.5rem; max-width: 80%; white-space: pre-wrap; }
.chat-pane .message.user { background: var(--camara-accent); color: white; margin-left: auto; }
.chat-pane .message.agent { background: var(--camara-pane); border: 1px solid var(--camara-border); }
.chat-pane .message .attachments { font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem; }

#composer { padding: 1rem 1.25rem; border-top: 1px solid var(--camara-border); }
#composer textarea { width: 100%; resize: vertical; min-height: 4rem; }
.composer-actions { display: flex; justify-content: space-between; margin-top: 0.5rem; }
#attachment-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.chip { padding: 0.25rem 0.5rem; background: var(--camara-border); border-radius: 12px; font-size: 0.85rem; display: flex; gap: 0.5rem; align-items: center; }

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sessions-pane { display: none; }
  .sessions-pane.open { display: flex; position: fixed; inset: 0; z-index: 10; width: 280px; }
}

.flash { padding: 0.75rem; margin: 0.5rem 0; border-radius: 4px; }
.flash-error { background: #5a1a1a; color: #ffd0d0; }
.flash-info  { background: #1a3a5a; color: #d0e6ff; }

/* === Badges (used in sidebar, admin tables) === */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--camara-border);
  color: var(--camara-muted);
}
.badge.admin { background: #4c2c8a; color: #e2d2ff; }
.badge.user  { background: #1f3a5a; color: #c2dcff; }
.badge.ok    { background: #1d4d2a; color: #b6f5c5; }
.badge.off   { background: #4d1d1d; color: #f5b6b6; }

/* === Chat: timestamp + content rendering === */
.chat-pane .message .content { word-wrap: break-word; }
.chat-pane .message .content pre {
  background: rgba(0,0,0,0.3);
  padding: 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.5rem 0;
}
.chat-pane .message .content code {
  background: rgba(0,0,0,0.25);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
}
.chat-pane .message .content p { margin: 0.4em 0; }
.chat-pane .message .timestamp {
  display: block;
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 0.4rem;
}

/* === Admin page === */
.admin-topbar {
  background: var(--camara-pane);
  border-bottom: 1px solid var(--camara-border);
  padding: 0.5rem 1.5rem;
}
.admin-topbar nav { display: flex; justify-content: space-between; align-items: center; }
.admin-main { padding: 1.5rem; max-width: 1200px; }
.admin-main section { margin-bottom: 2rem; }
.admin-main h2 { margin-bottom: 1rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { padding: 1rem; border: 1px solid var(--camara-border); border-radius: 8px; }
.stat-label { font-size: 0.85rem; opacity: 0.7; }
.stat-value { font-size: 2.5rem; font-weight: 700; margin: 0.25rem 0; }
.stat-sub { font-size: 0.8rem; opacity: 0.6; }
.actions { display: flex; gap: 0.4rem; }
.actions button { font-size: 0.8rem; padding: 4px 8px; margin: 0; }

#users-table td, #audit-table td { padding: 0.5rem 0.75rem; vertical-align: middle; }
#users-table .actions { white-space: nowrap; }

.error-banner {
  background: #5a1a1a;
  color: #ffd0d0;
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-weight: 600;
}