/*
  Site chrome — the sidebar, top navbar, breadcrumb, Read/See/Do tab row,
  and article content styling shared by every page. Ported from the
  earlier Claude-Design-canvas artboard (_design/kb-portal/ArticlePage.dc.html)
  as real HTML/CSS, using only the tokens in tokens.css.
*/

body {
  display: flex;
  min-height: 100vh;
}

.kb-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 6px;
}
.kb-sidebar a {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.kb-sidebar a.active {
  background: var(--arclight-bg);
}
.kb-sidebar a .kb-icon-label {
  display: none;
}

.kb-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kb-navbar {
  height: var(--navbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}
.kb-navbar .kb-brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heading);
  text-decoration: none;
}
.kb-navbar .kb-search {
  width: 280px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px;
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--text-heading);
  background: var(--row-alt);
}

.kb-breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  font-size: 12.5px;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kb-breadcrumb a {
  color: var(--arclight);
  text-decoration: none;
}
.kb-breadcrumb .sep {
  color: var(--text-light);
}

.kb-content {
  flex: 1;
  padding: 28px 40px 60px;
  background: var(--bg);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.kb-audience-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.kb-audience-pill {
  font-family: var(--font-family);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-heading);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.kb-audience-pill:hover {
  box-shadow: var(--shadow-card);
}
.kb-audience-pill.kb-audience-cs-team { color: var(--arclight); }
.kb-audience-pill.kb-audience-sales-team { color: var(--success); }
.kb-audience-pill.kb-audience-end-users { color: #8A6D00; }
.kb-audience-pill.kb-audience-product-director { color: var(--navy); }
.kb-audience-pill.kb-audience-business-analyst { color: var(--text-body); }

.kb-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kb-page-title.kb-audience-cs-team { color: var(--arclight); }
.kb-page-title.kb-audience-sales-team { color: var(--success); }
.kb-page-title.kb-audience-end-users { color: #8A6D00; }
.kb-page-title.kb-audience-product-director { color: var(--navy); }
.kb-page-title.kb-audience-business-analyst { color: var(--text-heading); }

.kb-article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.kb-article-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  text-decoration: none;
  display: block;
  transition: transform .12s ease;
}
.kb-article-card:hover {
  transform: translateY(-2px);
}
.kb-article-card.kb-audience-cs-team { border-left-color: var(--arclight); }
.kb-article-card.kb-audience-sales-team { border-left-color: var(--success); }
.kb-article-card.kb-audience-end-users { border-left-color: var(--warning); }
.kb-article-card.kb-audience-product-director { border-left-color: var(--navy); }
.kb-article-card.kb-audience-business-analyst { border-left-color: var(--text-light); }
.kb-article-card .kb-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 4px;
}
.kb-article-card .kb-card-audience {
  font-weight: 500;
  color: var(--text-light);
}
.kb-article-card .kb-card-summary {
  font-size: 13px;
  color: var(--text-body);
  margin: 0;
  line-height: 1.5;
}

.kb-search-box {
  max-width: 480px;
  margin: 0 0 24px;
  position: relative;
}
.kb-search-box input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-modal);
  border: 1px solid var(--border);
  font-family: var(--font-family);
  font-size: 14px;
  background: var(--surface);
  color: var(--text-heading);
}
.kb-search-results {
  max-width: 480px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-search-results[hidden] {
  display: none;
}
.kb-search-empty {
  font-size: 13px;
  color: var(--text-light);
}

/* Article page: Read / See / Do tabs */
.kb-article-frame {
  background: var(--surface);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--arclight);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kb-article-header {
  padding: 20px 28px 0;
}
.kb-article-header h1 {
  font-size: 22px;
  color: var(--text-heading);
  margin: 0 0 4px;
}
.kb-audience-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--arclight);
  background: var(--arclight-bg);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.kb-audience-tag.kb-audience-sales-team {
  color: var(--success);
  background: var(--success-bg);
}
.kb-audience-tag.kb-audience-end-users {
  color: #8A6D00;
  background: var(--warning-bg);
}
.kb-audience-tag.kb-audience-product-director {
  color: var(--navy);
  background: rgba(0, 67, 102, .08);
}
.kb-audience-tag.kb-audience-business-analyst {
  color: var(--text-heading);
  background: var(--row-alt);
  border: 1px solid var(--border);
}

.kb-tabrow {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  gap: 4px;
}
.kb-tab-btn {
  font-family: var(--font-family);
  border: none;
  background: none;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  border-bottom: 2px solid transparent;
}
.kb-tab-btn.active {
  color: var(--arclight);
  border-bottom-color: var(--arclight);
}
.kb-tab-panel {
  padding: 20px 24px 28px;
}
.kb-tab-panel[hidden] {
  display: none;
}

.kb-read-body h2 {
  font-size: 16px;
  color: var(--text-heading);
  margin: 22px 0 10px;
}
.kb-read-body h3 {
  font-size: 14.5px;
  color: var(--text-heading);
  margin: 18px 0 8px;
}
.kb-read-body p {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
}
.kb-read-body blockquote {
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--arclight-bg);
  border-left: 3px solid var(--arclight);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--text-heading);
  line-height: 1.55;
}
.kb-read-body blockquote p {
  margin: 0;
  color: inherit;
}
.kb-read-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border);
}
.kb-read-body th,
.kb-read-body td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.kb-read-body th {
  color: var(--arclight);
  background: var(--arclight-bg);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.kb-read-body tbody tr:nth-child(even) {
  background: var(--row-alt);
}
.kb-read-body tbody tr:last-child td {
  border-bottom: none;
}
.kb-read-body ul,
.kb-read-body ol {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
}
.kb-read-body a {
  color: var(--arclight);
  font-weight: 600;
}

.kb-do-picker {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.kb-do-picker button {
  font-family: var(--font-family);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-heading);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.kb-do-picker button.active {
  background: var(--arclight);
  color: #fff;
  border-color: var(--arclight);
}
.kb-do-empty {
  font-size: 13px;
  color: var(--text-light);
}

.kb-see-callout-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-see-callout-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-body);
}
.kb-see-callout-number {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--arclight);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-feedback-row {
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kb-feedback-row span {
  font-size: 12.5px;
  color: var(--text-light);
}
.kb-feedback-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kb-feedback-btn.success:hover {
  border-color: var(--success);
  color: var(--success);
}
.kb-feedback-btn.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.kb-feedback-flag {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--arclight);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 600;
}

/* Ask-AI widget — floating action button + panel, mounted once in the base
   layout so it stays put (and its conversation persists) across page loads. */
#kb-ask-ai {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
}
.kb-ask-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--arclight);
  color: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kb-ask-fab:hover {
  background: #0068DB;
}

.kb-ask-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: min(380px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 120px));
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}
.kb-ask-panel[hidden] {
  display: none;
}
.kb-ask-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kb-ask-panel h2 {
  font-size: 14px;
  color: var(--text-heading);
  margin: 0;
}
.kb-ask-close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  padding: 2px 4px;
}
.kb-ask-close:hover {
  color: var(--text-body);
}
.kb-ask-panel .kb-ask-status {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.kb-ask-status.online {
  color: var(--success);
  background: var(--success-bg);
}
.kb-ask-status.offline {
  color: var(--text-light);
  background: var(--row-alt);
}
.kb-ask-status.checking {
  color: var(--warning);
  background: var(--warning-bg);
}

.kb-ask-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 0;
}
.kb-ask-msg {
  font-size: 13.5px;
  line-height: 1.55;
  border-radius: 8px;
  padding: 10px 12px;
}
.kb-ask-msg p {
  margin: 0 0 6px;
}
.kb-ask-msg p:last-child {
  margin-bottom: 0;
}
.kb-ask-msg-user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--arclight-bg);
  color: var(--text-heading);
}
.kb-ask-msg-assistant {
  align-self: flex-start;
  max-width: 92%;
  background: var(--row-alt);
  color: var(--text-body);
}
.kb-ask-msg-pending {
  color: var(--text-light);
  font-style: italic;
}

.kb-ask-form {
  display: flex;
  gap: 8px;
}
.kb-ask-form input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: var(--font-family);
  font-size: 13.5px;
}
.kb-ask-form button {
  font-family: var(--font-family);
  background: var(--arclight);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.kb-ask-form button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.kb-ask-offline-note {
  font-size: 13px;
  color: var(--text-body);
  background: var(--row-alt);
  border-radius: 6px;
  padding: 10px 12px;
}
.kb-ask-source {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-light);
}