/* Questline Team dashboard — "aged patina" theme.
   Colors are defined once here as variables, so changing the look later means
   editing just these lines. */
:root {
  --ground: #1E2926;      /* page background: dark verdigris slate */
  --surface: #26332F;     /* panels */
  --surface-2: #2F3E39;   /* inputs, hover */
  --line: #3A4A44;        /* borders */
  --bone: #E7E0CF;        /* main text */
  --lichen: #98A49D;      /* quiet text */
  --brass: #C8A35A;       /* main buttons, focus */
  --brass-ink: #1E2926;   /* text on brass */
  --verdigris: #6DB398;   /* approved / done */
  --oxblood: #B4544A;     /* rejected / failed */
  --amber: #D9A441;       /* waiting / warnings */

  --serif: "Spectral", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --radius-panel: 14px;
  --radius-control: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground);
  color: var(--bone);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.hidden { display: none !important; }

/* ---------- App frame ---------- */
.app {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 340px;
  height: 100dvh;
}
.col { min-height: 0; display: flex; flex-direction: column; }
.col + .col { border-left: 1px solid var(--line); }

.brand {
  padding: 18px 18px 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.brand h1 { font: 600 21px/1.1 var(--serif); margin: 0; letter-spacing: .01em; }
.brand form button { background: none; border: 0; color: var(--lichen); cursor: pointer; font-size: 13px; }

/* ---------- Left: navigation and conversations ---------- */
.nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.nav button {
  display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; border-radius: var(--radius-control);
  padding: 9px 10px; text-align: left; cursor: pointer; color: var(--lichen);
}
.nav button:hover { background: var(--surface); color: var(--bone); }
.nav button[aria-current="page"] { background: var(--surface); color: var(--bone); }
.count {
  min-width: 22px; padding: 0 7px; border-radius: 11px; text-align: center;
  background: var(--amber); color: var(--brass-ink); font-size: 12px; font-weight: 700;
}
.count:empty { display: none; }

.new-btn {
  margin: 10px 10px 4px; padding: 10px; border-radius: var(--radius-control);
  border: 1px solid var(--brass); background: transparent; color: var(--brass);
  font-weight: 600; cursor: pointer;
}
.new-btn:hover { background: var(--brass); color: var(--brass-ink); }

.side-heading { margin: 16px 18px 6px; font-size: 13px; color: var(--lichen); }
.threads { overflow-y: auto; padding: 0 10px 10px; flex: 1; }
.thread {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-control);
  padding: 8px 10px; color: var(--bone);
}
.thread:hover { background: var(--surface); }
.thread[aria-current="true"] { background: var(--surface-2); }
.thread .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread .s { font-size: 12px; color: var(--lichen); }

/* Plan usage meter. Each bar is a little vessel that fills as the limit is used. */
.usage { padding: 14px 18px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--lichen); }
.usage h2 { margin: 0 0 10px; font: 600 15px/1.3 var(--serif); color: var(--bone); display: flex; justify-content: space-between; align-items: baseline; }
.usage h2 button { background: none; border: 0; color: var(--brass); cursor: pointer; font: 600 12px/1 var(--sans); padding: 4px 0; }
.usage h2 button:disabled { color: var(--lichen); cursor: default; }
.meter { margin-bottom: 10px; }
.meter .row { display: flex; justify-content: space-between; gap: 8px; }
.meter .left { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter .track { height: 8px; margin: 5px 0 3px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 4px; background: var(--verdigris); transition: width .6s ease; }
.meter.warn .fill { background: var(--amber); }
.meter.low .fill { background: var(--oxblood); }
.meter.low .left { color: var(--oxblood); }
.usage .foot { font-size: 12px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .meter .fill { transition: none; } }
.usage-mini { display: none; }
@media (max-width: 760px) {
  .usage-mini {
    display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 8px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
    font-size: 13px; color: var(--lichen); text-align: left; cursor: pointer;
  }
  .usage-mini:empty { display: none; }
  .usage-mini strong { color: var(--bone); }
  .usage-mini .track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
  .usage-mini .fill { height: 100%; background: var(--verdigris); }
  .usage-mini.warn .fill { background: var(--amber); }
  .usage-mini.low .fill { background: var(--oxblood); }
}

/* ---------- Center: views ---------- */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view-head { padding: 18px 24px 12px; border-bottom: 1px solid var(--line); }
.view-head h2 { margin: 0; font: 600 22px/1.25 var(--serif); }
.view-head p { margin: 4px 0 0; color: var(--lichen); font-size: 14px; max-width: 70ch; }

.problems {
  margin: 12px 24px 0; padding: 12px 14px; border-radius: var(--radius-control);
  border: 1px solid var(--amber); color: var(--bone); font-size: 14px;
}
.problems ul { margin: 6px 0 0; padding-left: 18px; }

.scroll { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* Chat */
.msg { max-width: 72ch; margin: 0 0 18px; }
.msg.you {
  margin-left: auto; background: var(--surface-2); padding: 10px 14px;
  border-radius: 14px 14px 4px 14px; white-space: pre-wrap; width: fit-content; max-width: 60ch;
}
.msg.team {
  font: 16px/1.65 var(--serif); padding-left: 14px; border-left: 2px solid var(--brass);
}
.msg.team h1, .msg.team h2, .msg.team h3 { font-size: 1.05em; margin: 1em 0 .3em; }
.msg.team code { font: 13px/1.4 ui-monospace, monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.msg.team pre { overflow-x: auto; background: var(--surface); padding: 10px; border-radius: 8px; }
.msg .meta { display: block; font: 12px/1.4 var(--sans); color: var(--lichen); margin-top: 6px; }
.msg.working { color: var(--lichen); font-style: italic; border-left-color: var(--line); }

.empty { color: var(--lichen); max-width: 52ch; margin: 8vh auto 0; text-align: center; }
.empty h3 { font: 600 20px/1.3 var(--serif); color: var(--bone); margin: 0 0 8px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 20px;
  padding: 7px 14px; cursor: pointer; font-size: 14px;
}
.chip:hover { border-color: var(--brass); }

.composer { border-top: 1px solid var(--line); padding: 14px 24px 18px; display: flex; gap: 10px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; min-height: 46px; max-height: 40vh; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.composer textarea:focus { border-color: var(--brass); outline: none; }
.btn {
  border: 0; border-radius: var(--radius-control); padding: 11px 18px; cursor: pointer;
  background: var(--brass); color: var(--brass-ink); font-weight: 700;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn.quiet { background: var(--surface-2); color: var(--bone); font-weight: 600; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.approve { background: var(--verdigris); color: var(--brass-ink); }
.btn.reject { background: transparent; color: var(--oxblood); border: 1px solid var(--oxblood); }

/* Approvals */
.items { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: 14px 16px;
}
.item-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.item h3 { margin: 0; font: 600 17px/1.3 var(--serif); }
.item .path { font-size: 12px; color: var(--lichen); word-break: break-all; }
.item .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.item details { margin-top: 10px; }
.item summary { cursor: pointer; color: var(--brass); font-size: 14px; }
.preview {
  margin-top: 10px; max-height: 55vh; overflow: auto; padding: 12px 14px;
  background: var(--ground); border-radius: 10px; font: 15px/1.6 var(--serif);
}
.preview img { max-width: 100%; border-radius: 6px; }
.status {
  flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 11px;
  border: 1px solid currentColor;
}
.status.draft, .status.new { color: var(--amber); }
.status.approved, .status.sent, .status.done { color: var(--verdigris); }
.status.rejected, .status.failed { color: var(--oxblood); }
.status.running, .status.queued, .status.waiting { color: var(--brass); }
.status.stopped { color: var(--lichen); }
.note-input { width: 100%; margin-top: 10px; padding: 8px 10px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-control); }
.filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.filters .chip[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }

/* Inbox */
.steps { padding-left: 20px; max-width: 70ch; }
.steps li { margin-bottom: 6px; }
table.list { border-collapse: collapse; width: 100%; max-width: 900px; font-size: 14px; }
table.list th { text-align: left; font-weight: 600; color: var(--lichen); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.list td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------- Right: live activity ---------- */
.activity-head { padding: 18px 18px 10px; }
.activity-head h2 { margin: 0; font: 600 18px/1.3 var(--serif); }
.now {
  margin: 0 14px 10px; padding: 12px 14px; border-radius: var(--radius-panel);
  background: var(--surface); border: 1px solid var(--line);
}
.now .title { font-weight: 600; }
.now .sub { font-size: 13px; color: var(--lichen); }
.now .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); margin-right: 6px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.feed { flex: 1; overflow-y: auto; padding: 4px 14px 20px; list-style: none; margin: 0; }
.ev { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 7px 0; font-size: 14px; }
.ev .who { font-size: 12px; color: var(--lichen); }
.ev .what { overflow-wrap: anywhere; }
.ev.say .what { font-family: var(--serif); font-size: 15px; }
.ev.warn .what { color: var(--amber); }
.ev.handoff .what { color: var(--bone); font-weight: 600; }

/* The agent badges: a small shield with each agent's own patina hue. */
.badge {
  width: 28px; height: 32px; display: grid; place-items: center;
  font: 700 11px/1 var(--sans); color: var(--brass-ink);
  background: var(--agent, var(--lichen));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  padding-bottom: 6px;
}

/* ---------- Mobile ---------- */
.tabbar { display: none; }
@media (max-width: 1100px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
  .col.activity { display: none; }
  .app.show-activity .col.activity { display: flex; position: fixed; inset: 0 0 0 auto; width: min(380px, 100%); background: var(--ground); z-index: 5; border-left: 1px solid var(--line); }
  .activity-close { display: inline-block !important; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; height: calc(100dvh - 60px); }
  .col.side { display: none; }
  .app.show-side .col.side { display: flex; position: fixed; inset: 0; background: var(--ground); z-index: 6; padding-bottom: 60px; }
  .app.show-activity .col.activity { inset: 0 0 60px 0; width: 100%; border: 0; }
  .view-head, .scroll, .composer { padding-left: 16px; padding-right: 16px; }
  .problems { margin-left: 16px; margin-right: 16px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; height: 60px;
    background: var(--surface); border-top: 1px solid var(--line); z-index: 7;
  }
  .tabbar button { background: none; border: 0; color: var(--lichen); font-size: 12px; cursor: pointer; position: relative; }
  .tabbar button[aria-current="page"] { color: var(--brass); }
  .tabbar .count { position: absolute; top: 6px; right: calc(50% - 26px); }
}
.activity-close { display: none; background: none; border: 0; color: var(--lichen); cursor: pointer; float: right; }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(380px, 100%); }
.login h1 { font: 600 30px/1.15 var(--serif); margin: 0 0 6px; }
.login p { color: var(--lichen); margin: 0 0 22px; }
.login label { display: block; font-size: 14px; margin-bottom: 6px; }
.login input {
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
}
.login input:focus { border-color: var(--brass); outline: none; }
.login .btn { width: 100%; }
.login .error { color: var(--oxblood); margin: 0 0 14px; }