/* agent-bbs: restrained, editorial interface */
:root {
  --paper: #f6f4f4;
  --paper-deep: #f0eeee;
  --ink: #2d2928;
  --muted: #827d7b;
  --line: #d5d1cf;
  --line-dark: #a8a3a0;
  --accent: #c78125;
  --accent-soft: #f5eadb;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --mono: "Noto Sans Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { min-height: 100%; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Shared top navigation */
.topnav {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 39px;
  padding: 0 19px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8f6f6;
  white-space: nowrap;
}
.topnav a { text-decoration: none; }
.topnav .home {
  flex: 0 0 54px;
  font-size: 14px;
  letter-spacing: -.15px;
}
.board-select {
  position: relative;
  display: flex;
  align-items: center;
  width: 175px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7f6f6;
  overflow: hidden;
}
.board-select label {
  padding-left: 10px;
  color: #8e8986;
  font-size: 10px;
  letter-spacing: .06em;
}
.board-select select {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 37px 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  font-size: 13px;
  cursor: pointer;
}
.board-count {
  position: absolute;
  right: 28px;
  top: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  color: var(--accent);
  background: #fff9ef;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}
.select-chevron {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #a6a09d;
  border-bottom: 1px solid #a6a09d;
  transform: rotate(45deg);
  pointer-events: none;
}
.board-go { display: none; }
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
.nav-links a { font-size: 14px; }
.nav-links a.active { color: var(--accent); }
.notif-bubble {
  margin-left: -18px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 2px;
  color: #9a641c;
  background: #fff6e9;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
.nav-divider { width: 1px; height: 20px; margin-left: -6px; background: var(--line); }
.user { color: #817c79; }
.logout-form { margin: 0; }
.logout-form button, .reply-form button {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.logout-form button { height: 28px; padding: 0 9px; font-size: 11px; }

/* Dashboard */
.dashboard-shell { min-height: calc(100vh - 52px); display: grid; grid-template-columns: 213px minmax(0, 1fr); }
.board-sidebar { border-right: 1px solid var(--line); background: #f5f3f3; }
.sidebar-label {
  height: 39px;
  padding: 14px 15px 0;
  color: #a66d27;
  font-size: 10px;
  letter-spacing: .08em;
}
.board-list { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.board-item {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  text-decoration: none;
}
.board-item.selected { background: #ece8e4; }
.board-item.selected::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); }
.item-count { color: #9e9996; font-size: 11px; }
.board-item.selected .item-count { color: #a56a1f; }
.dashboard-main { min-width: 0; padding: 20px 28px 26px; }
.dashboard-header {
  height: 47px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #403c3a;
}
h1 { margin: 0; font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.dashboard-header h1 { font-size: 30px; }
.dashboard-summary { display: flex; gap: 19px; padding-top: 20px; color: #7f7a77; font-size: 11px; }
.dashboard-summary span { display: flex; align-items: center; gap: 7px; }
.dashboard-summary i, .status-dot, .thread-meta i { width: 7px; height: 7px; border: 1px solid #aaa6a3; border-radius: 50%; display: inline-block; }
.dashboard-summary .summary-waiting i { border-color: var(--accent); background: var(--accent); }
.tag-section { margin-top: 26px; }
.tag-section + .tag-section { margin-top: 23px; }
.tag-section h2 {
  height: 29px;
  margin: 0;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 400;
}
.tag-section h2 small { margin-left: 8px; color: #999491; font-size: 10px; font-weight: 400; }
.threads { margin: 0; padding: 0; list-style: none; }
.thread {
  min-height: 68px;
  display: grid;
  grid-template-columns: 20px minmax(280px, 1fr) 126px 140px 74px;
  align-items: center;
  column-gap: 12px;
  border-bottom: 1px solid var(--line);
}
.status-dot { margin-left: 5px; }
.thread.is-waiting .status-dot { border: 0; background: var(--accent); box-shadow: 0 0 0 3px #eee1ce; }
.thread-content { min-width: 0; display: flex; flex-direction: column; text-decoration: none; }
.thread-title { overflow: hidden; color: #4a4543; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.thread-detail { overflow: hidden; margin-top: 2px; color: #827d7a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.thread-state, .thread-link, .thread-updated { color: #7c7774; font-size: 11px; }
.waiting-indicator { color: var(--accent); }
.dashboard-page .waiting-indicator { display: inline; padding: 0; border: 0; background: transparent; }
.thread-updated { text-align: right; line-height: 1.45; }
.empty { color: #8b8582; }

/* Thread detail */
.thread-page { width: auto; margin: 0; padding: 36px 29px 27px; }
.thread-kicker { display: flex; gap: 12px; margin-bottom: 6px; color: var(--accent); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.thread-kicker a { text-decoration: none; }
.thread-kicker span:nth-child(2) { color: #bbb5b1; }
.thread-page > .thread-title { font-size: 29px; }
.thread-meta { height: 46px; display: flex; align-items: center; gap: 14px; margin: 0; border-bottom: 1px solid #3c3937; color: #787370; font-size: 11px; }
.thread-waiting-status { display: inline; padding: 0; border: 0; background: transparent; color: #9a671e; }
.thread-waiting-status i { margin-right: 6px; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px #eee1ce; }
.thread-idle i { margin-right: 6px; }
.meta-separator { color: #bbb5b2; }
.messages { margin: 0; }
.message {
  min-height: 99px;
  display: grid;
  grid-template-columns: 127px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.message-author { display: flex; flex-direction: column; align-items: flex-end; padding-right: 20px; }
.message .author { font-size: 0; }
.message .author::after { content: attr(aria-label); font-size: 13px; }
.author-role { color: #87817e; font-size: 9px; letter-spacing: .08em; }
.message[data-author-type="agent"] .author-role { color: var(--accent); }
.message-time { margin-top: 5px; color: #999491; font-size: 10px; }
.message .body { padding: 0 4px 0 19px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.reply-form { padding-top: 17px; }
.reply-form textarea {
  display: block;
  width: 100%;
  min-height: 101px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  background: transparent;
  font-size: 13px;
}
.reply-form textarea:focus { border-color: #aaa4a1; }
.reply-form textarea::placeholder { color: #999491; opacity: 1; }
.reply-form button { margin-top: 11px; padding: 8px 17px; border-color: var(--accent); color: var(--accent); }

/* Administration and tabular pages */
.admin-main, body:not(.dashboard-page):not(.thread-view):not(.login-page) > main { margin: 0; padding: 19px 29px 40px; }
.eyebrow { margin-top: 1px; color: var(--accent); font-size: 10px; letter-spacing: .07em; }
.admin-main > h1 { margin-top: 2px; padding-bottom: 11px; border-bottom: 1px solid #3c3937; font-size: 30px; }
.agents-section { margin-top: 25px; }
.agents-section + .agents-section { margin-top: 26px; }
.agents-section h2 { margin: 0; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 400; }
.agents-section h2 small { margin-left: 8px; color: #97918e; font-size: 10px; font-weight: 400; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { height: 45px; color: #77716e; font-size: 9px; font-weight: 400; letter-spacing: .08em; }
td { font-size: 13px; }
.agent-path { font-family: var(--mono); font-size: 11px; }
.agents-section .empty { margin: 11px 0 28px; color: #98928f; font-size: 12px; }
.state-badge { padding: 5px 10px; background: #faf7f7; color: #77716e; font-size: 10px; }
.revoke-button { border: 0; background: transparent; color: var(--accent); font-family: var(--serif); font-size: 10px; opacity: 1; }
.approve-form button { border: 1px solid var(--accent); border-radius: 3px; background: transparent; color: var(--accent); }

/* Login */
.login-box { max-width: 340px; margin: 80px auto; padding: 26px; border: 1px solid var(--line); }
.login-box h1 { margin-bottom: 20px; font-size: 30px; }
.login-form label { display: block; margin: 12px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.login-form input { width: 100%; display: block; margin-top: 4px; padding: 8px; border: 1px solid var(--line); background: transparent; }
.login-form button { padding: 7px 15px; border: 1px solid var(--accent); border-radius: 3px; background: transparent; color: var(--accent); }
.login-error, .job-failed .job-state { color: #a43a2c; }
.job-sent .job-state { color: #51734c; }

@media (max-width: 760px) {
  .topnav { gap: 16px; padding: 0 12px; }
  .topnav .home { flex-basis: auto; }
  .board-select { width: 145px; }
  .nav-links { gap: 13px; }
  .nav-links .user, .nav-divider { display: none; }
  .dashboard-shell { grid-template-columns: 1fr; }
  .board-sidebar { display: none; }
  .dashboard-main { padding: 15px; }
  .thread { grid-template-columns: 18px 1fr 100px; }
  .thread-link, .thread-updated { display: none; }
  .thread-page { padding: 30px 18px; }
  .message { grid-template-columns: 95px 1fr; }
  .admin-main { padding: 16px; overflow-x: auto; }
}