/* Nya Samtal — ett eget lager ovanpå det klassiska utförandet.
   Allt här gäller bara under .pc-next; det klassiska påverkas inte. */

/* ── Det klassiska bruset döljs: det samlas i raden för det viktigaste ── */
.pc-next #pc-compose-hints,
.pc-next #pc-precheck,
.pc-next #pc-compose-warn,
.pc-next #pc-write-btn,
.pc-next #pc-suggest-reply,
.pc-next #pc-deliberate-btn,
.pc-next #pc-noreply,
.pc-next #pc-send-later { display: none !important; }

/* ── Raden för det viktigaste ── */
.pc-next #pc-assist.sn-attn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; margin: 0;
  border-block-end: 1px solid var(--border-subtle, var(--border-default));
  background: var(--bg-surface);
}
.sn-attn-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 6px 8px; border-radius: 10px; font-size: 13px; color: var(--text-primary);
}
.sn-attn-row.is-first { background: var(--accent-wash, var(--accent-subtle)); }
.sn-attn-row.is-check.is-first, .sn-attn-row.is-intent.is-first { background: var(--warning-subtle, var(--bg-hover)); }
.sn-attn-row.is-bounce.is-first, .sn-attn-row.is-delivery.is-first { background: var(--error-subtle, var(--bg-hover)); }
.sn-attn-row.is-quiet { color: var(--text-muted); }
.sn-attn-kind {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-muted); min-inline-size: 84px;
}
.sn-attn-row.is-bounce .sn-attn-kind, .sn-attn-row.is-delivery .sn-attn-kind { color: var(--error); }
.sn-attn-row.is-check .sn-attn-kind, .sn-attn-row.is-intent .sn-attn-kind { color: var(--warning); }
.sn-attn-row.is-approval .sn-attn-kind, .sn-attn-row.is-reply .sn-attn-kind { color: var(--accent); }
.sn-attn-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sn-attn-text { overflow-wrap: anywhere; }
.sn-attn-why { font-size: 12px; color: var(--text-muted); }
.sn-attn-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.sn-attn-act {
  font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-default); background: var(--bg-elevated, var(--bg-surface)); color: var(--text-primary);
}
.sn-attn-act:hover { background: var(--bg-hover); }
.sn-attn-act.is-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); }
.sn-attn-act.is-primary:hover { background: var(--accent-hover, var(--accent)); }
.sn-attn-x {
  font: inherit; font-size: 16px; line-height: 1; inline-size: 26px; block-size: 26px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-faint, var(--text-muted)); cursor: pointer;
}
.sn-attn-x:hover { background: var(--bg-hover); color: var(--text-primary); }
.sn-attn-expand { padding: 4px 8px 8px; }
.sn-attn-more {
  align-self: flex-start; font: inherit; font-size: 12px; padding: 2px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--accent); cursor: pointer;
}
.sn-attn-more:hover { background: var(--bg-hover); }
.sn-attn-act:focus-visible, .sn-attn-x:focus-visible, .sn-attn-more:focus-visible,
.sn-tool:focus-visible, .sn-more:focus-visible, .sn-chip.is-link:focus-visible,
.sn-seg button:focus-visible, .sn-sort button:focus-visible, .sn-selbar button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ── Sidhuvudet: bara avvikelser, resten i "Mer" ── */
.sn-head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 0; }
.sn-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sn-chip {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary);
}
.sn-chip svg { inline-size: 12px; block-size: 12px; }
.sn-chip.is-done { color: var(--success); border-color: var(--success); }
.sn-chip.is-late { color: var(--error); border-color: var(--error); }
.sn-chip.is-warn { color: var(--warning); border-color: var(--warning); }
.sn-chip.is-quiet { color: var(--text-muted); border-style: dashed; }
.sn-chip.is-link { cursor: pointer; color: var(--accent); }
.sn-chip.is-link:hover { background: var(--bg-hover); }
.sn-more {
  flex: none; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; padding: 4px 10px;
  border: 1px solid var(--border-default); border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer;
}
.sn-more svg { inline-size: 14px; block-size: 14px; }
.sn-more:hover { background: var(--bg-hover); color: var(--text-primary); }
.sn-menu { max-block-size: min(70vh, 520px); overflow-y: auto; }
.sn-menu-sep { block-size: 1px; margin: 4px 6px; background: var(--border-subtle, var(--border-default)); }

/* ── Listan: ordningen ── */
.sn-sort, .sn-seg {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px;
  background: var(--bg-inset, var(--bg-hover)); border: 1px solid var(--border-subtle, var(--border-default));
}
.sn-sort { margin: 6px 10px 4px; }
.sn-sort button, .sn-seg button {
  font: inherit; font-size: 12px; padding: 3px 10px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-muted);
}
.sn-sort button.is-on, .sn-seg button.is-on { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── Panelen: anteckning med två lägen ── */
.sn-note { display: flex; flex-direction: column; gap: 6px; margin-block-start: 6px; }
.sn-note textarea {
  font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px; resize: vertical; min-block-size: 54px;
  border: 1px solid var(--border-default); background: var(--bg-base, var(--bg-surface)); color: var(--text-primary);
}
.sn-note textarea:focus { outline: none; border-color: var(--accent); }
.sn-note-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sn-thread-notes li { border-inline-start: 2px solid var(--accent-light, var(--accent)); padding-inline-start: 8px; }

/* ── Textrutan: verktygen och det markerade ── */
.sn-tool {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; padding: 5px 10px;
  border: 1px solid var(--border-default); border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer;
  white-space: nowrap;
}
.sn-tool[hidden] { display: none; }
.sn-tool svg { inline-size: 14px; block-size: 14px; }
.sn-tool:hover { background: var(--bg-hover); color: var(--text-primary); }
.sn-tool.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle, transparent); }
.sn-selbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 6px; margin-block-end: 4px; font-size: 12px;
  border-radius: 9px; border: 1px solid var(--border-default); background: var(--bg-elevated, var(--bg-surface)); color: var(--text-muted);
}
.sn-selbar[hidden] { display: none; }
.sn-selbar button {
  font: inherit; font-size: 12px; padding: 3px 8px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text-primary);
}
.sn-selbar button:hover { background: var(--bg-hover); }
.sn-selbar.is-busy { opacity: .6; pointer-events: none; }
textarea.sn-busy { opacity: .6; cursor: progress; }

/* ── Inställningar: jämförelsen ── */
.sn-ui-pref .sn-seg { margin: 4px 0 6px; }
.sn-stats { inline-size: 100%; border-collapse: collapse; font-size: 12.5px; margin-block-start: 8px; }
.sn-stats th, .sn-stats td { text-align: start; padding: 5px 6px; border-block-end: 1px solid var(--border-subtle, var(--border-default)); }
.sn-stats th { font-weight: 600; color: var(--text-muted); }
.sn-stats td:not(:first-child), .sn-stats th:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }

/* ── Mobil ── */
@media (max-width: 640px) {
  .sn-attn-row { flex-wrap: wrap; gap: 6px; }
  .sn-attn-kind { min-inline-size: 0; }
  .sn-attn-body { flex-basis: calc(100% - 40px); }
  .sn-attn-acts { margin-inline-start: auto; }
  .sn-tool span { display: none; }
  .sn-tool { padding: 5px 8px; }
  .sn-stats { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .sn-attn-row, .sn-tool, .sn-chip { transition: none; } }

/* ── Valet av utförande, längst ned i menyn (syns i båda utförandena) ── */
.sn-rail-ui-wrap { margin-block-start: auto; }
.sn-rail-ui .pc-rail-label { color: var(--accent); }