/* Shared CRM/Stream board skin. Components own source state and scrolling. */
#root .app-shell :is(.crm-workspace, .discovery-stream) {
  --board-lane: color-mix(in srgb, var(--theme-track) 62%, var(--surface));
  --board-gap: 20px;
  --board-accent: #625487;
  --board-tint: #f0eafa;
}
#root .app-shell .crm-board {
  grid-template-columns: repeat(5, minmax(300px, 1fr));
  gap: var(--board-gap);
  padding-top: 4px;
}
#root .app-shell .stream-named-board {
  grid-auto-columns: minmax(min(100%, 320px), calc((100% - (var(--stream-column-count, 3) - 1) * var(--board-gap)) / var(--stream-column-count, 3)));
  gap: var(--board-gap);
  padding: 4px 0 16px;
}
#root .app-shell :is(.crm-board .stage-column, .stream-named-board > .stream-live-column) {
  border: 0;
  border-radius: 20px;
  padding: 16px;
  background: var(--board-lane);
  box-shadow: none;
}
#root .app-shell :is(.stage-new, .stream-live-column.is-neutral) { --board-accent: #317c9f; --board-tint: #e7f4fa; }
#root .app-shell .stage-contacted { --board-accent: #4c6ba5; --board-tint: #eaf0ff; }
#root .app-shell :is(.stage-proposal, .stream-live-column.is-violet) { --board-accent: #80629e; --board-tint: #f0eafa; }
#root .app-shell :is(.stage-negotiation, .stream-live-column.is-sand) { --board-accent: #8c6a2c; --board-tint: #fbf0db; }
#root .app-shell :is(.stage-won, .stream-live-column.is-sage) { --board-accent: #4c7955; --board-tint: #eaf4e9; }
#root .app-shell :is(.crm-board .stage-heading, .stream-live-column > header) {
  min-height: 52px;
  height: auto;
  padding: 6px 12px;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  align-items: center;
  box-shadow: none;
}
#root .app-shell .crm-board .stage-heading { margin-bottom: 14px; }
#root .app-shell .crm-board .stage-dot { display: none; }
#root .app-shell :is(.crm-board .stage-heading h2, .stream-live-column > header h3) {
  margin: 0;
  color: var(--board-accent);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#root .app-shell :is(.crm-board .stage-count, .stream-column-heading .stream-column-count) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  height: auto;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--board-accent);
  background: var(--board-tint);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#root .app-shell .stream-column-heading { gap: 4px 8px; flex-wrap: wrap; }
#root .app-shell .stream-column-heading h3 { flex: 1 1 120px; }
#root .app-shell .stream-live-column > header > div { flex: 1; min-width: 0; }
#root .app-shell :is(.crm-board .stage-heading .icon-button, .stream-live-column > header .stream-message-menu-trigger) {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  margin-left: auto;
  color: var(--ink);
  border: 0;
  background: transparent;
}
#root .app-shell .crm-board .stage-cards { gap: 14px; }
#root .app-shell .stream-live-column :is(.discovery-column-messages, .ai-qualified-scroll) {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 2px 4px;
}
#root .app-shell .stream-column-arrivals { min-height: 12px; height: 12px; }
#root .app-shell :is(.crm-board .lead-card, .discovery-stream .discovery-message-card, .ai-qualified-scroll .ai-search-result) {
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgb(23 22 28 / 3%);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgb(23 22 28 / 2%);
}
#root .app-shell :is(.crm-board .lead-open, .stream-live-column .stream-lead-card, .ai-qualified-scroll .ai-search-result) { padding: 18px; }
#root .app-shell .crm-board .lead-person { align-items: flex-start; gap: 12px; }
#root .app-shell .crm-board .lead-person h3 { font-size: 16px; font-weight: 600; line-height: 1.45; }
#root .app-shell .crm-board .lead-person p { margin-top: 5px; font-size: 13px; }
#root .app-shell .crm-board .lead-person .avatar { border-radius: 50%; }
#root .app-shell .crm-board .lead-amount { font-size: 16px; margin-top: 14px; }
#root .app-shell .crm-board .crm-next-action { font-size: 13px; line-height: 1.5; margin-top: 12px; }
#root .app-shell .crm-board .crm-owner { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
#root .app-shell .crm-board .lead-offer-button { margin: 0 18px 8px; width: calc(100% - 36px); border: 0; background: var(--surface-soft); }
#root .app-shell .crm-board .crm-card-details { margin: 0 18px; padding: 0; border-top: 1px solid var(--line); }
#root .app-shell .crm-board .crm-card-details > summary { min-height: 40px; }
#root .app-shell .crm-board .column-empty { margin-top: 2px; min-height: 52px; border: 1px dashed var(--line); border-radius: 12px; background: transparent; }
#root .app-shell .stream-live-column .stream-lead-card .discovery-message-author strong { font-size: 16px; font-weight: 600; }
#root .app-shell .stream-live-column .stream-lead-card .discovery-message-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
#root .app-shell .stream-live-column .stream-post-stack { border-radius: 14px; background: var(--surface); }
#root .app-shell .stream-live-column .stream-post-stack > .discovery-message-card { border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: none; }
#root .app-shell .stream-live-column .stream-post-stack-toggle { border: 0; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 14px 14px; }
#root .app-shell .stream-live-column .stream-post-stack-toggle[aria-expanded="true"] { border-radius: 0; }
#root .app-shell .discovery-stream .ai-qualified-column > .stream-ai-status { margin: 10px 0 0; background: var(--surface); }
#root .app-shell .crm-board .stage-column.drag-over { background: var(--board-tint); box-shadow: inset 0 0 0 2px var(--ui-focus); }
#root .app-shell :is(.crm-workspace .view-tabs, .discovery-stream .discovery-segment) { border: 0; padding: 4px; border-radius: 12px; background: var(--board-lane); }
#root .app-shell :is(.crm-workspace .view-tabs button.selected, .discovery-stream .discovery-segment > button[aria-pressed="true"]) { background: var(--ui-action); color: white; border-color: var(--ui-action); box-shadow: 0 1px 3px rgb(23 22 28 / 12%); border-radius: 9px; }
#root .app-shell .discovery-stream .discovery-segment > button[aria-pressed="true"] span { color: inherit; background: rgb(255 255 255 / 16%); }
#root .app-shell :is(.crm-board, .stream-named-board) :is(button, summary):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
@media (max-width: 1100px) {
  #root .app-shell .stream-named-board { grid-auto-columns: minmax(min(100%, 320px), calc((100% - (min(var(--stream-column-count, 2), 2) - 1) * 20px) / min(var(--stream-column-count, 2), 2))); }
}
@media (max-width: 700px) {
  #root .app-shell :is(.crm-workspace, .discovery-stream) { --board-gap: 12px; }
  #root .app-shell .crm-board .stage-column { padding: 12px; }
}
@media (max-width: 650px) {
  #root .app-shell .stream-named-board { grid-auto-columns: 100%; }
  #root .app-shell .stream-named-board > .stream-live-column { padding: 12px; }
}
@media (pointer: coarse), (max-width: 700px) {
  #root .app-shell :is(.crm-board .stage-heading .icon-button, .stream-live-column > header .stream-message-menu-trigger) { flex-basis: 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  #root .app-shell .crm-board .crm-card-details > summary { min-height: 44px; }
}