/* DAGENTX/X — sub-app styles. Distinct visual identity inside DAGENTX.
   Uses cyan + dark + the X-bird-black palette to feel its-own-product. */

:root {
  --x-bg-0: #0a0c14;
  --x-bg-1: #0f1320;
  --x-bg-2: #141a2c;
  --x-bg-3: #1c2440;
  --x-line: rgba(255, 255, 255, 0.06);
  --x-line-2: rgba(255, 255, 255, 0.12);
  --x-fg: #e6ecf6;
  --x-fg-dim: #8a93a6;
  --x-accent: #1d9bf0;        /* X blue */
  --x-accent-2: #00f0ff;      /* dagentx cyan */
  --x-purple: #b44aff;
  --x-gold: #d4a017;
  --x-green: #1abc9c;
  --x-red: #f44150;
}

/* Inset the X sub-app inside the main DAGENTX shell — clears the
   left rail (60px), top bar (60px), and bottom statusbar (28px). */
body.x-app-active section.page[data-page="x"] {
  padding: 0 !important;
  margin: 0 !important;
}

#x-root {
  position: fixed;
  top: 60px;       /* clear topbar (--topbar-h) */
  left: 60px;      /* clear rail   (--rail-w) */
  right: 0;
  bottom: 28px;    /* clear statusbar (--statusbar-h) */
  background: var(--x-bg-0);
  color: var(--x-fg);
  font-family: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  overflow: auto;
  z-index: 50;     /* below the main shell's persistent chrome */
}

.x-app { min-height: 100%; display: flex; flex-direction: column; }

/* header */
.x-header {
  height: 56px;
  background: linear-gradient(180deg, #000 0%, var(--x-bg-1) 100%);
  border-bottom: 1px solid var(--x-line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: sticky; top: 0; z-index: 5;
}
.x-brand-logo {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 18px;
  background: linear-gradient(90deg, var(--x-accent), var(--x-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.x-brand-tag {
  font-size: 11px; color: var(--x-fg-dim); letter-spacing: 1px;
}
.x-header-right { display: flex; align-items: center; gap: 10px; }
.x-icon-btn {
  background: transparent;
  border: 1px solid var(--x-line);
  color: var(--x-fg);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.x-icon-btn:hover { background: var(--x-bg-2); }
.x-account-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--x-bg-2);
  border: 1px solid var(--x-line);
  font-size: 12px;
}
.x-account-pill img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.x-acct-name { font-weight: 600; }
.x-acct-handle { color: var(--x-fg-dim); font-size: 11px; }

/* body grid */
.x-body { display: grid; grid-template-columns: 240px 1fr; flex: 1; }
.x-sidebar {
  background: var(--x-bg-1);
  border-right: 1px solid var(--x-line);
  padding: 14px 8px;
  display: flex; flex-direction: column;
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}
.x-nav { display: flex; flex-direction: column; gap: 2px; }
.x-nav-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--x-fg);
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-areas: "icon label" "icon desc";
  column-gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: background 120ms;
}
.x-nav-item:hover { background: var(--x-bg-2); }
.x-nav-item.active {
  background: linear-gradient(90deg, rgba(29, 155, 240, 0.18), transparent);
  border-left: 2px solid var(--x-accent);
  padding-left: 10px;
}
.x-nav-icon { grid-area: icon; font-size: 18px; }
.x-nav-label { grid-area: label; font-weight: 600; }
.x-nav-desc { grid-area: desc; color: var(--x-fg-dim); font-size: 11px; }
.x-nav-foot {
  margin-top: auto;
  padding: 10px 12px;
  font-size: 10px; color: var(--x-fg-dim); letter-spacing: 1px;
}

.x-main {
  padding: 24px 32px 80px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.x-h2 {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 12px;
  font-size: 22px;
}
.x-h3 { margin-top: 28px; font-size: 16px; letter-spacing: 0.5px; color: var(--x-fg-dim); }

/* shared bits */
.x-toolbar { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.x-list { display: flex; flex-direction: column; gap: 12px; }
.x-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.x-card {
  background: var(--x-bg-1);
  border: 1px solid var(--x-line);
  border-radius: 14px;
  padding: 16px;
}
.x-card.danger { border-color: rgba(244, 65, 80, 0.4); background: rgba(244, 65, 80, 0.04); }
.x-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .x-grid-2 { grid-template-columns: 1fr; } }

.x-lbl { display: block; margin: 12px 0; font-size: 12px; color: var(--x-fg-dim); }
.x-lbl .input, .x-lbl input.input, .x-lbl textarea.input, .x-lbl select.input {
  display: block; margin-top: 6px; width: 100%;
}
.input {
  background: var(--x-bg-0);
  border: 1px solid var(--x-line-2);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--x-fg);
  font-family: inherit;
  font-size: 13px;
}
.input:focus { outline: 1px solid var(--x-accent); }
textarea.input { resize: vertical; }

.btn {
  border: 1px solid var(--x-line-2);
  background: var(--x-bg-2);
  color: var(--x-fg);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.btn.primary { background: var(--x-accent); border-color: var(--x-accent); color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--x-red); border-color: var(--x-red); color: #fff; }
.btn.ghost.danger { background: transparent; color: var(--x-red); border-color: rgba(244, 65, 80, 0.4); }
.btn.small { padding: 4px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.muted { color: var(--x-fg-dim); }
.muted.small { font-size: 11px; }
.x-empty { color: var(--x-fg-dim); padding: 30px; text-align: center; border: 1px dashed var(--x-line-2); border-radius: 12px; }
.x-error { color: var(--x-red); padding: 14px; border: 1px solid rgba(244, 65, 80, 0.4); border-radius: 10px; }
.x-loading { color: var(--x-fg-dim); padding: 20px; }

/* mention card */
.x-mention { background: var(--x-bg-1); border: 1px solid var(--x-line); border-radius: 14px; padding: 14px; }
.x-mention-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.x-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--x-bg-3); }
.x-mention-name { font-weight: 600; font-size: 13px; }
.x-mention-handle { font-size: 12px; }
.x-mention-body { font-size: 14px; line-height: 1.5; margin: 6px 0; }
.x-mention-actions { display: flex; gap: 6px; margin-top: 8px; }
.x-bucket {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  letter-spacing: 1px; font-weight: 600; text-transform: uppercase;
}
.bucket-question     { background: rgba(0, 240, 255, 0.15); color: var(--x-accent-2); }
.bucket-compliment   { background: rgba(26, 188, 156, 0.15); color: var(--x-green); }
.bucket-troll        { background: rgba(244, 65, 80, 0.15); color: var(--x-red); }
.bucket-spam         { background: rgba(120, 120, 120, 0.15); color: #999; }
.bucket-lead         { background: rgba(212, 160, 23, 0.18); color: var(--x-gold); }
.bucket-opportunity  { background: rgba(180, 74, 255, 0.18); color: var(--x-purple); }
.bucket-noise        { background: rgba(255, 255, 255, 0.05); color: var(--x-fg-dim); }

/* compose */
.x-variant-text { padding: 10px; background: var(--x-bg-0); border-radius: 8px; min-height: 40px; }
.x-variant-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.x-card.variant { padding: 14px; }
.x-hook-style { font-family: "Orbitron", sans-serif; font-size: 10px; color: var(--x-accent-2); letter-spacing: 1px; text-transform: uppercase; }
.x-hook-text { margin-top: 4px; font-size: 14px; }

/* drafts */
.x-draft-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.x-draft-body { padding: 10px; background: var(--x-bg-0); border-radius: 8px; min-height: 40px; }
.x-draft-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.x-status {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  letter-spacing: 1px; font-weight: 600; text-transform: uppercase;
}
.status-pending   { background: rgba(212, 160, 23, 0.18); color: var(--x-gold); }
.status-approved  { background: rgba(0, 240, 255, 0.15); color: var(--x-accent-2); }
.status-scheduled { background: rgba(180, 74, 255, 0.18); color: var(--x-purple); }
.status-posted    { background: rgba(26, 188, 156, 0.18); color: var(--x-green); }
.status-failed    { background: rgba(244, 65, 80, 0.18); color: var(--x-red); }
.status-rejected  { background: rgba(120, 120, 120, 0.15); color: #888; }

/* trends */
.x-card.trend { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }

/* workflows */
.x-card.workflow { border-left: 3px solid var(--x-fg-dim); }
.x-card.workflow.on { border-left-color: var(--x-green); }
.x-card.workflow.off { border-left-color: var(--x-fg-dim); }
.x-workflow-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.x-mode {
  font-size: 10px; padding: 3px 8px; border-radius: 999px; letter-spacing: 1px;
  text-transform: uppercase;
}
.mode-manual { background: rgba(120,120,120,0.15); color: #aaa; }
.mode-supervised { background: rgba(212, 160, 23, 0.18); color: var(--x-gold); }
.mode-autonomous { background: rgba(244, 65, 80, 0.18); color: var(--x-red); }
.x-toggle { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.x-workflow-trigger, .x-workflow-actions { font-size: 11px; color: var(--x-fg-dim); margin: 6px 0; }

/* skills */
.x-skill-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.x-skill-name { font-size: 13px; color: var(--x-accent-2); }
.x-cat, .x-compute {
  font-size: 10px; padding: 3px 7px; border-radius: 999px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 600;
}
.cat-read { background: rgba(0,240,255,0.12); color: var(--x-accent-2); }
.cat-write { background: rgba(180,74,255,0.15); color: var(--x-purple); }
.cat-personal { background: rgba(26,188,156,0.15); color: var(--x-green); }
.cat-analytics { background: rgba(212,160,23,0.18); color: var(--x-gold); }
.compute-local { background: rgba(26,188,156,0.15); color: var(--x-green); }
.compute-network_light, .compute-networklight { background: rgba(0,240,255,0.12); color: var(--x-accent-2); }
.compute-network_heavy, .compute-networkheavy { background: rgba(180,74,255,0.15); color: var(--x-purple); }
.compute-server { background: rgba(212,160,23,0.18); color: var(--x-gold); }

/* personas */
.x-persona-head { display: flex; gap: 10px; align-items: center; }
.x-card.persona.builtin { border-color: rgba(0, 240, 255, 0.25); }
.x-card.persona.custom { border-color: rgba(180, 74, 255, 0.25); }
.x-prompt {
  background: var(--x-bg-0);
  padding: 12px;
  border-radius: 8px;
  white-space: pre-wrap;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  max-height: 360px; overflow: auto;
}

/* analytics */
.x-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.x-stat {
  background: var(--x-bg-1);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.x-stat-num { font-family: "Orbitron", sans-serif; font-size: 22px; font-weight: 700; color: var(--x-accent-2); }
.x-stat-lbl { font-size: 11px; color: var(--x-fg-dim); margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; }
.x-tag-cloud { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0; }
.x-tag { padding: 4px 10px; border-radius: 999px; background: var(--x-bg-2); border: 1px solid var(--x-line); }
.x-tag em { color: var(--x-fg-dim); font-style: normal; }

/* tweet card */
.x-card.tweet { padding: 12px; }
.x-tweet-text { font-size: 14px; line-height: 1.45; }

/* table */
.x-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.x-table th, .x-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--x-line); }
.x-table th { color: var(--x-fg-dim); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
.x-table code { font-size: 11px; }

/* compute tier card */
.x-card.compute-tier h3 { margin-top: 0; }
.x-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.x-pill.ok { background: rgba(26,188,156,0.18); color: var(--x-green); }
.x-pill.warn { background: rgba(212,160,23,0.18); color: var(--x-gold); }