/* ═══════════════════════════════════════════════════
   SOLANACY AI ORG — components.css
═══════════════════════════════════════════════════ */

/* ── ICON BTN ───────────────────────────────────── */
.icon-btn {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--border-med);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2);
  transition:background var(--t1),border-color var(--t1),color var(--t1);
  flex-shrink:0;
}
.icon-btn:hover { background:var(--surface-2); color:var(--text-1); border-color:var(--border-strong); }
.icon-btn svg { width:15px; height:15px; }

/* ── WS PILL ────────────────────────────────────── */
.ws-pill {
  display:flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px;
  border:1px solid var(--border-med);
  background:var(--surface-2);
  font-size:11px; font-weight:500; color:var(--text-2);
}
.ws-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--text-3); flex-shrink:0;
}
.ws-pill.live   { border-color:var(--green-bg); background:var(--green-bg); color:var(--green); }
.ws-pill.live .ws-dot { background:var(--green); animation:pulse 2s infinite; }
.ws-pill.offline { border-color:var(--red-bg); background:var(--red-bg); color:var(--red); }
.ws-pill.offline .ws-dot { background:var(--red); }
.ws-pill.connecting .ws-dot { background:var(--amber); animation:pulse 1s infinite; }
@keyframes pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.4; }
}

/* ── NAV ITEM ───────────────────────────────────── */
.nav-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; margin:0 6px;
  border-radius:var(--r-sm);
  font-size:13px; font-weight:450; color:var(--text-2);
  cursor:pointer; user-select:none;
  transition:background var(--t1),color var(--t1);
  position:relative;
}
.nav-item:hover { background:var(--surface-2); color:var(--text-1); }
.nav-item.active {
  background:var(--accent-bg); color:var(--accent);
  font-weight:550;
}
.nav-icon { display:flex; align-items:center; width:16px; flex-shrink:0; }
.nav-badge {
  margin-left:auto; min-width:18px; height:18px;
  background:var(--red); color:#fff;
  border-radius:9px; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 5px;
}

/* ── CARD ───────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:background var(--t3),border-color var(--t3);
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
}
.card-title { font-size:13px; font-weight:600; color:var(--text-1); letter-spacing:-0.2px; }
.card-meta  { font-size:11px; color:var(--text-3); }
.card-body  { padding:16px; }
.card-body kbd { display:inline-block; background:var(--surface-2); border:1px solid var(--border-med); border-radius:4px; padding:1px 5px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-2); }

/* ── STATS ROW ──────────────────────────────────── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-xs);
  position:relative; overflow:hidden;
  transition:background var(--t3),border-color var(--t3);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--stat-color,var(--accent)); opacity:0.6;
}
.stat-label {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--text-3); margin-bottom:6px;
}
.stat-val {
  font-size:24px; font-weight:700; letter-spacing:-0.5px;
  color:var(--text-1); line-height:1;
}

/* ── AGENT CARDS ────────────────────────────────── */
.agents-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
}
.agents-grid-full {
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:10px; background:transparent; border-radius:0;
}
.agent-card {
  background:var(--surface); padding:14px 16px;
  position:relative; overflow:hidden;
  transition:background var(--t2);
}
.agents-grid-full .agent-card {
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}
.agent-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--agent-accent,var(--accent));
  opacity:0; transition:opacity var(--t2);
}
.agent-card.working { background:var(--surface-2); }
.agent-card.working::after { opacity:1; }
.agent-card:hover::after { opacity:0.5; }
.agent-head {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:8px; margin-bottom:8px;
}
.agent-identity {}
.agent-name {
  display:flex; align-items:center; gap:7px;
  font-size:13px; font-weight:650; color:var(--text-1);
  letter-spacing:-0.2px;
}
.agent-name svg { color:var(--agent-accent,var(--accent)); }
.agent-role { font-size:11px; color:var(--text-3); margin-top:2px; }
.agent-task {
  font-size:12px; color:var(--text-2); line-height:1.5;
  word-break:break-word;
}
.agent-last-ts {
  font-size:10px; color:var(--text-3);
  font-family:'JetBrains Mono',monospace;
  margin-top:6px;
}

/* ── BADGE ──────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:2px 7px; border-radius:5px;
  font-size:10px; font-weight:600; letter-spacing:0.3px;
  text-transform:uppercase; white-space:nowrap;
}
.badge-idle    { background:var(--surface-2); color:var(--text-3); border:1px solid var(--border-med); }
.badge-working { background:var(--accent-bg); color:var(--accent); border:1px solid transparent; }
.badge-error   { background:var(--red-bg); color:var(--red); border:1px solid transparent; }
.badge-done    { background:var(--green-bg); color:var(--green); border:1px solid transparent; }
.badge-plan-basic    { background:var(--surface-2); color:var(--text-2); border:1px solid var(--border-med); }
.badge-plan-standard { background:var(--accent-bg); color:var(--accent); }
.badge-plan-pro      { background:var(--purple-bg); color:var(--purple); }
.badge-plan-max      { background:var(--amber-bg); color:var(--amber); }
.badge-plan-demo     { background:var(--surface-2); color:var(--text-3); border:1px solid var(--border-med); }

/* ── AGENT SELECTOR ─────────────────────────────── */
.agent-selector {
  display:flex; gap:5px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.agent-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:20px;
  border:1px solid var(--border-med);
  background:transparent; color:var(--text-2);
  font-size:11.5px; font-weight:500;
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:all var(--t1);
}
.agent-chip:hover { background:var(--surface-2); color:var(--text-1); border-color:var(--border-strong); }
.agent-chip.active {
  color:#fff; border-color:transparent;
  background:var(--chip-color,var(--accent));
}
.agent-chip svg { width:13px; height:13px; }

/* ── QUICK CHIPS ────────────────────────────────── */
.quick-chips {
  display:flex; gap:6px; flex-wrap:wrap;
  padding:10px 14px 0;
}
.quick-chip {
  padding:4px 10px; border-radius:14px;
  border:1px solid var(--border-med);
  background:transparent; color:var(--text-2);
  font-size:11px; cursor:pointer;
  transition:all var(--t1); white-space:nowrap;
}
.quick-chip:hover {
  background:var(--accent-bg); color:var(--accent);
  border-color:var(--accent);
}

/* ── CHAT MESSAGES ──────────────────────────────── */
.chat-messages {
  flex:1; min-height:60px; max-height:420px;
  overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}
.chat-messages:empty { display:none; }

/* Message bubbles */
.msg {
  display:flex; gap:8px;
  animation:msgIn var(--t2) var(--ease) both;
}
@keyframes msgIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.msg.msg-user { flex-direction:row-reverse; }
.msg-avatar {
  width:26px; height:26px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border-med);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:11px; font-weight:700; color:var(--text-2);
}
.msg-avatar.agent-avatar { background:var(--agent-bg,var(--accent-bg)); color:var(--agent-color,var(--accent)); }
.msg-body { max-width:72%; display:flex; flex-direction:column; gap:4px; }
.msg.msg-user .msg-body { align-items:flex-end; }
.msg-bubble {
  padding:9px 12px; border-radius:var(--r);
  font-size:13px; line-height:1.55; color:var(--text-1);
  background:var(--surface-2); border:1px solid var(--border);
  word-break:break-word; white-space:pre-wrap;
}
.msg.msg-user .msg-bubble {
  background:var(--accent); color:#fff; border-color:transparent;
  border-bottom-right-radius:4px;
}
.msg-bubble-agent { border-bottom-left-radius:4px; }
.msg-meta {
  font-size:10px; color:var(--text-3);
  display:flex; align-items:center; gap:6px;
}
.msg-meta .agent-label { font-weight:600; color:var(--agent-color,var(--text-2)); text-transform:uppercase; font-size:9px; letter-spacing:0.4px; }

/* Copy btn inside bubble */
.msg-copy {
  display:none; margin-left:auto;
  background:none; border:none; cursor:pointer;
  color:var(--text-3); padding:2px 4px; border-radius:4px;
  transition:color var(--t1);
}
.msg:hover .msg-copy { display:inline-flex; }
.msg-copy:hover { color:var(--text-2); }

/* ── THINKING / TYPING ──────────────────────────── */
.msg-thinking .msg-bubble {
  background:var(--surface-2); border-style:dashed;
}
.thinking-steps { display:flex; flex-direction:column; gap:5px; margin-bottom:4px; }
.thinking-step {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--text-2); padding:3px 0;
}
.thinking-step.done   { color:var(--green); }
.thinking-step.active { color:var(--accent); }
.thinking-step svg { width:12px; height:12px; flex-shrink:0; }
.step-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--text-3); flex-shrink:0;
}
.thinking-step.active .step-dot { background:var(--accent); animation:pulse 0.8s infinite; }
.thinking-step.done   .step-dot { background:var(--green); }

/* Typing dots */
.typing-dots { display:flex; gap:4px; padding:4px 0; }
.typing-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--text-3); animation:typing 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay:0.2s; }
.typing-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes typing {
  0%,60%,100% { transform:translateY(0); opacity:0.5; }
  30%          { transform:translateY(-5px); opacity:1; }
}

/* Streaming cursor */
.stream-cursor::after {
  content:'▍'; animation:blink 0.8s infinite;
  color:var(--accent); margin-left:1px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── CHAT INPUT ROW ─────────────────────────────── */
.chat-input-row {
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid var(--border);
}
.chat-input {
  flex:1; background:var(--surface-2); border:1px solid var(--border-med);
  border-radius:var(--r); padding:9px 12px;
  font-size:13px; color:var(--text-1);
  resize:none; min-height:38px; max-height:160px;
  line-height:1.5; outline:none;
  transition:border-color var(--t1), background var(--t1);
}
.chat-input::placeholder { color:var(--text-3); }
.chat-input:focus { border-color:var(--accent); background:var(--surface); }
.chat-send-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
  transition:background var(--t1),transform var(--t1),opacity var(--t1);
}
.chat-send-btn:hover  { background:var(--accent-2); }
.chat-send-btn:active { transform:scale(0.94); }
.chat-send-btn:disabled { opacity:0.5; cursor:not-allowed; }
.chat-send-btn svg { width:14px; height:14px; }

/* ── CHAT AGENT NAME ────────────────────────────── */
.chat-agent-name {
  font-size:12px; font-weight:600;
  color:var(--accent); letter-spacing:0.3px;
}

/* ── APPROVAL BLOCK ─────────────────────────────── */
.approval-block {
  background:linear-gradient(135deg,var(--amber-bg),transparent);
  border:1px solid var(--amber-bg);
  border-radius:var(--r-lg); padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.approval-header {
  display:flex; align-items:center; gap:8px;
}
.approval-title { font-size:13px; font-weight:600; color:var(--amber); }
.approval-icon svg { width:15px; height:15px; color:var(--amber); }
.approval-desc { font-size:13px; color:var(--text-1); line-height:1.5; }
.approval-actions { display:flex; gap:8px; }

/* ── BTNS ───────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; cursor:pointer;
  border:1px solid transparent;
  transition:all var(--t1); white-space:nowrap;
}
.btn:active { transform:scale(0.97); }
.btn-primary  { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-2); }
.btn-ghost    { background:transparent; color:var(--text-2); border-color:var(--border-med); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text-1); }
.btn-green    { background:var(--green); color:#fff; }
.btn-green:hover { opacity:0.88; }
.btn-red-outline { background:transparent; color:var(--red); border-color:var(--red); }
.btn-red-outline:hover { background:var(--red-bg); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn svg { width:13px; height:13px; }

/* ── FORMS ──────────────────────────────────────── */
.field-label {
  display:block; font-size:11.5px; font-weight:550;
  color:var(--text-2); margin-bottom:6px; letter-spacing:0.1px;
}
.field-input {
  width:100%; background:var(--surface-2);
  border:1px solid var(--border-med); border-radius:var(--r-sm);
  padding:9px 11px; font-size:13px; color:var(--text-1);
  resize:vertical; outline:none; line-height:1.5;
  transition:border-color var(--t1),background var(--t1);
}
.field-input::placeholder { color:var(--text-3); }
.field-input:focus { border-color:var(--accent); background:var(--surface); }

/* ── MEMORY PAGE ────────────────────────────────── */
.memory-section { padding:14px 16px; border-bottom:1px solid var(--border); }
.memory-section:last-child { border-bottom:none; }
.memory-section-title {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--text-3); margin-bottom:10px;
}
.memory-item {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 12px;
  margin-bottom:6px; font-size:12.5px; line-height:1.5;
  color:var(--text-1);
}
.memory-item:last-child { margin-bottom:0; }
.memory-item strong { color:var(--text-2); font-weight:550; }

/* ── DATA TABLE ─────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.data-table th {
  text-align:left; padding:10px 14px;
  font-size:10px; font-weight:600; letter-spacing:0.6px;
  text-transform:uppercase; color:var(--text-3);
  background:var(--surface-2); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td {
  padding:10px 14px; border-bottom:1px solid var(--border);
  color:var(--text-1); vertical-align:middle;
}
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:var(--surface-2); }
.table-empty { text-align:center; padding:32px !important; color:var(--text-3); }
.status-dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--text-3); margin-right:6px; vertical-align:middle;
}
.status-dot.active  { background:var(--green); }
.status-dot.demo    { background:var(--amber); }
.status-dot.expired { background:var(--red); }

/* ── FEED ───────────────────────────────────────── */
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.panel-title {
  font-size:12px; font-weight:600; color:var(--text-1);
  display:flex; align-items:center; gap:6px;
}
.panel-count {
  background:var(--surface-2); border:1px solid var(--border-med);
  border-radius:8px; padding:1px 6px;
  font-size:10px; font-weight:600; color:var(--text-3);
}
.btn-clear {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:11px; padding:3px 6px;
  border-radius:4px; display:flex; align-items:center;
  transition:color var(--t1),background var(--t1);
}
.btn-clear:hover { color:var(--text-2); background:var(--surface-2); }
.btn-clear svg { width:13px; height:13px; }
.feed-scroll {
  flex:1; overflow-y:auto; padding:8px 0;
  display:flex; flex-direction:column; gap:0;
}
.feed-empty { padding:28px 14px; text-align:center; font-size:12px; color:var(--text-3); }
.feed-item {
  padding:8px 14px; border-bottom:1px solid var(--border);
  transition:background var(--t1);
}
.feed-item:last-child { border-bottom:none; }
.feed-item:hover { background:var(--surface-2); }
.feed-agent-label {
  font-size:9px; font-weight:700; letter-spacing:0.7px;
  text-transform:uppercase; margin-bottom:3px;
  color:var(--text-3);
}
.feed-agent-label.ceo       { color:var(--agent-ceo); }
.feed-agent-label.cfo       { color:var(--agent-cfo); }
.feed-agent-label.sales     { color:var(--agent-sales); }
.feed-agent-label.support   { color:var(--agent-support); }
.feed-agent-label.research  { color:var(--agent-research); }
.feed-agent-label.marketing { color:var(--agent-mktg); }
.feed-agent-label.legal     { color:var(--agent-legal); }
.feed-agent-label.sau       { color:var(--accent); }
.feed-msg { font-size:12px; color:var(--text-1); line-height:1.45; }
.feed-time { font-size:10px; color:var(--text-3); margin-top:2px; font-family:'JetBrains Mono',monospace; }

/* ── SPINNER ────────────────────────────────────── */
.spinner {
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  animation:spin 0.7s linear infinite; display:inline-block;
}
.spinner-sm { width:20px; height:20px; border-width:2px; border-color:var(--border-strong); border-top-color:var(--accent); }
.spinner-dark { border-color:rgba(0,0,0,0.15); border-top-color:var(--text-1); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── MODAL ──────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:400;
  background:var(--overlay);
  backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--surface-raised); border:1px solid var(--border-strong);
  border-radius:var(--r-xl); padding:24px;
  width:100%; max-width:360px;
  box-shadow:var(--shadow-xl);
  animation:modalIn 0.2s var(--spring) both;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.92) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-title { font-size:16px; font-weight:700; letter-spacing:-0.3px; margin-bottom:6px; }
.modal-sub { font-size:12.5px; color:var(--text-2); margin-bottom:14px; line-height:1.5; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.inline-code {
  background:var(--surface-2); border:1px solid var(--border-med);
  border-radius:4px; padding:1px 6px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text-2);
}

/* ── TOAST ──────────────────────────────────────── */
.toast-container {
  position:fixed; bottom:44px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; flex-direction:column;
  align-items:center; gap:6px; pointer-events:none;
}
.toast {
  padding:8px 16px; border-radius:20px;
  background:var(--surface-raised); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg); font-size:12.5px; color:var(--text-1);
  animation:toastIn 0.2s var(--spring) both, toastOut 0.2s var(--ease) 3s both;
  white-space:nowrap;
}
.toast.success { background:var(--green-bg); color:var(--green); border-color:var(--green-bg); }
.toast.error   { background:var(--red-bg);   color:var(--red);   border-color:var(--red-bg); }
.toast.warning { background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bg); }
@keyframes toastIn  { from { opacity:0; transform:translateY(10px) scale(0.92); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-4px); } }

/* ── EMPTY STATE ────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:40px 20px; color:var(--text-3);
  font-size:13px; text-align:center; line-height:1.6;
}
.empty-icon { font-size:28px; }