/* Rhizome default agent styling — light theme, DM Sans + JetBrains Mono,
   slate/teal palette. Dark progress box keeps the live tool stream
   visually distinct from the prose response. Projects may override via
   DomainConfig.template_folder / static_folder. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #fafafa;
  color: #222;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"],
.ft-card-body,
.ft-thread-card-body,
.ft-thread-focus-body,
.ft-mini-body,
.ft-modal-thought {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- Top bar ----------
   Shared shell used by every rhizome SPA. The underline-tab pattern is
   the canonical look across iris, self-health, and future hosts; keeping
   it here means each app drops its own copy. */

.toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 20px;
  height: 44px;
}

.toolbar-left {
  display: flex;
  align-items: stretch;
}

.toolbar-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-right: 24px;
  letter-spacing: 0.2px;
}

.nav-tabs {
  display: flex;
  align-items: stretch;
}

.nav-tab {
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: #999;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.nav-tab:hover { color: #555; }
.nav-tab.active {
  color: #222;
  font-weight: 600;
  border-bottom-color: #222;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.view-container { padding: 0; }

.cost-display {
  font-family: "JetBrains Mono", monospace;
  color: #b58900;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Chat layout ---------- */

.chat-layout {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.chat-main { flex: 1; min-width: 0; }
.chat-main rhizome-chat { display: block; height: 75vh; }
.chat-sidebar { width: 220px; flex-shrink: 0; }

.chat-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.messages {
  min-height: 420px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 20px;
}

.msg {
  margin-bottom: 14px;
  max-width: 85%;
}

.msg-user {
  margin-left: auto;
  background: #264653;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
}

.msg-assistant {
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  padding: 16px 20px;
  border-radius: 12px 12px 12px 4px;
  font-size: 14px;
  line-height: 1.7;
}

/* Inline loading indicator shown between submit and either the first
   streaming event or the final response. Three dots that pulse so the
   user always knows the request is in flight, even when the agent emits
   no tool-flavored events (non-agentic chat with thinking disabled). */
.msg-loading { padding: 14px 20px; }
.loading-dots { display: inline-flex; gap: 4px; align-items: center; }
.loading-dots > span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: loadingPulse 1.2s infinite ease-in-out;
}
.loading-dots > span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loadingPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1); }
}

/* Streaming assistant bubble — a soft pulse on the trailing edge so the
   user sees that text is still arriving. Class is removed when the
   response completes. */
.msg-streaming::after {
  content: "";
  display: inline-block;
  width: 6px; height: 14px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #94a3b8;
  animation: cursorBlink 1s infinite step-end;
}
@keyframes cursorBlink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.msg-assistant > *:first-child { margin-top: 0; }
.msg-assistant > *:last-child { margin-bottom: 0; }
.msg-assistant p { margin: 0 0 10px 0; }
.msg-assistant p:last-child { margin-bottom: 0; }
.msg-assistant h2, .msg-assistant h3 {
  color: #1e293b;
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.msg-assistant h3 {
  color: #2a9d8f;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}
.msg-assistant ul, .msg-assistant ol { margin: 6px 0 12px; padding-left: 22px; }
.msg-assistant li { margin-bottom: 4px; }
.msg-assistant code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.msg-assistant em { color: #64748b; font-style: italic; }
.msg-assistant strong { color: #1e293b; font-weight: 600; }

.msg-assistant table {
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.msg-assistant th,
.msg-assistant td {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  text-align: left;
  line-height: 1.5;
  vertical-align: top;
}
.msg-assistant th {
  background: #f8fafc;
  font-weight: 600;
  color: #1e293b;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.msg-assistant tr:nth-child(even) td { background: #fafbfc; }
.msg-assistant td code {
  font-size: 12px;
  background: transparent;
  padding: 0;
}

.msg-system {
  background: #fff3cd;
  color: #856404;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

/* ---------- Inline progress box (streaming tool calls) ---------- */

.progress-box {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  margin-bottom: 6px;
}
.progress-status { color: #93c5fd; }
.progress-cost { color: #fde68a; font-variant-numeric: tabular-nums; }

.progress-log {
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}
.progress-log .log-step { color: #e2e8f0; font-weight: 600; display: block; margin-top: 4px; }
.progress-log .log-tool { color: #e2e8f0; display: block; }
.progress-log .log-result { color: #86efac; display: block; }
.progress-log .tool-name { color: #fde68a; font-weight: 500; }

.progress-collapsed summary {
  cursor: pointer;
  color: #999;
  font-size: 11px;
  font-family: "DM Sans", sans-serif;
  padding: 4px 0;
}
.progress-collapsed .progress-log {
  background: #1e293b;
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 5px;
  margin-top: 6px;
  max-height: 200px;
}

.spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #93c5fd;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Input bar ---------- */

.input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.input-bar input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.input-bar input[type="text"]:focus { outline: none; border-color: #2a9d8f; }

.btn-send {
  padding: 10px 22px;
  background: #2a9d8f;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}
.btn-send:hover:not(:disabled) { background: #268b7f; }
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Sidebar card ---------- */

.side-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
}

.side-card label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.side-card input[type="number"],
.side-card select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  margin-bottom: 12px;
  background: #fff;
}

.btn-secondary {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  color: #555;
  cursor: pointer;
}
.btn-secondary:hover { background: #f5f5f5; }

@media (max-width: 800px) {
  .toolbar {
    gap: 8px;
    padding: 0 10px;
  }
  .toolbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .toolbar-title {
    flex: 0 0 auto;
    margin-right: 12px;
  }
  .nav-tabs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab {
    flex: 0 0 auto;
    padding: 0 10px;
  }
  .toolbar-right { flex: 0 0 auto; }
  .chat-layout { flex-direction: column; }
  .chat-sidebar { width: 100%; }
}