/* Contextual AI / Work Intelligence — Conversations right panel. Tokens only. */
#work-insights {
  width: 340px;
  min-width: 320px;
  max-width: 360px;
  background: var(--ux-surface);
  border-left: 1px solid var(--ux-border);
  display: none;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  color: var(--ux-text);
  font-size: var(--ux-fs);
}
#app-screen[data-view="conversations"] #work-insights { display: flex; }
#app-screen[data-view="conversations"] #work-insights.is-collapsed {
  width: 40px;
  min-width: 40px;
}
#app-screen[data-view="conversations"]:has(#info-panel:not(.hidden)) #work-insights { display: none; }
#app-screen:not([data-view="conversations"]) #work-insights { display: none !important; }

.wi-header {
  min-height: 52px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--ux-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.wi-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.wi-header .wi-sub { margin: 2px 0 0; font-size: 12px; color: var(--ux-muted); }
.wi-header .wi-sub:empty { display: none; }
.wi-icon-btn {
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-muted, var(--muted)); cursor: pointer;
}
.wi-icon-btn:hover { background: var(--bg-muted, var(--surface-hover)); color: var(--text-primary, var(--text)); }
#work-insights.is-collapsed .wi-header h3,
#work-insights.is-collapsed .wi-body { display: none; }

.wi-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 20px; }
/* Mỗi khối là một section có vạch ngăn (C1/C4), không lồng thẻ. */
.wi-body > section, .wi-body > details, .wi-body > p, .wi-body > .wi-kpis { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--ux-border); }
.wi-body > .wi-banner { margin: 12px 16px 0; }
.wi-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.wi-kpi {
  background: var(--bg-muted, var(--surface-hover));
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 10px;
  padding: 10px 10px 8px;
}
.wi-kpi b { display: block; font-size: 20px; line-height: 1.1; }
.wi-kpi span { font-size: 11px; color: var(--text-muted, var(--muted)); }

.wi-issue {
  border: 1px solid var(--ux-border);
  background: var(--ux-surface-2);
  border-radius: 10px;
  padding: 12px;
  margin: 0 0 10px;
}
.wi-issue button.wi-open {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  color: inherit; padding: 0; cursor: pointer; font: inherit;
}
.wi-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft, var(--primary-soft, #e8eeff));
  color: var(--accent, var(--primary));
  margin-bottom: 6px;
}
.wi-status.is-follow { background: var(--ux-warn-soft); color: var(--ux-warn); }
.wi-status.is-high { background: var(--ux-danger-soft); color: var(--ux-danger); }
.wi-status.is-open { background: var(--ux-sel); color: var(--ux-link); }
.wi-issue.is-focus {
  outline: 2px solid var(--accent, var(--primary));
  outline-offset: 1px;
  border-radius: 10px;
  background: var(--accent-soft, var(--bg-muted, var(--surface-hover)));
}
.wi-issue p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.wi-meta { font-size: 12px; color: var(--ux-muted); margin: 0 0 4px; }
.wi-hint { font-size: 13px; color: var(--text-muted, var(--muted)); line-height: 1.5; }
.wi-banner {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--bg-muted, var(--surface-hover));
  color: var(--text-secondary, var(--text-muted, var(--muted)));
}
.wi-banner.is-error { background: var(--ux-danger-soft); color: var(--ux-danger); }
.wi-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ux-link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
}
.wi-section-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ux-muted);
  margin: 0 0 8px;
}
.conv-work-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--warning, #d97706);
  color: transparent;
  font-size: 0;
  flex-shrink: 0;
  vertical-align: middle;
}
html[data-theme="dark"] .wi-status.is-follow { background: #3d2e10; color: #f5c518; }
html[data-theme="dark"] .wi-status.is-high,
html[data-theme="dark"] .wi-banner.is-error { background: #3d1515; color: #ff8a80; }

.wi-body { overflow-x: hidden; }
.wi-summary { margin: 0 0 16px; }
.wi-summary-lead {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wi-dl { margin: 0; }
.wi-field { margin: 0 0 8px; }
.wi-field dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-muted, var(--muted));
  margin: 0 0 2px;
}
.wi-field dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.wi-compact-list { margin: 0; padding-left: 18px; }
.wi-compact-list li { margin: 0 0 4px; }
.wi-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 4px;
}
.wi-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent, var(--primary));
  color: #fff;
}
.wi-primary:disabled { opacity: .65; cursor: default; }
.wi-evidence {
  margin: 12px 0 0;
  font-size: 13px;
}
.wi-evidence summary {
  cursor: pointer;
  color: var(--accent, var(--primary));
  font-weight: 600;
}
.wi-evidence-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}
.wi-next { margin: 12px 0 0; }
html[data-theme="dark"] .wi-primary { color: #fff; }

@media (max-width: 760px) {
  #app-screen[data-view="conversations"] #work-insights {
    display: none !important;
  }
  body.mobile-wi #app-screen[data-view="conversations"] #work-insights {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    min-width: 0;
    max-width: none;
    z-index: 45;
    border-left: 0;
  }
  body.mobile-wi #app-screen[data-view="conversations"] #work-insights.is-collapsed {
    width: 100vw;
    min-width: 0;
  }
  body.mobile-wi #app-screen[data-view="conversations"] #work-insights.is-collapsed .wi-header h3,
  body.mobile-wi #app-screen[data-view="conversations"] #work-insights.is-collapsed .wi-body {
    display: block;
  }
  .wi-summary-actions .wi-link,
  .wi-primary { min-height: 36px; }
}