/* ASPN Club build 55 v14 - Client notes window (approved build-55 design).
   Scoped under .aspn-cn so it can sit inside the live staff host without
   leaking styles. Uses the app theme tokens (ivory / Charcoal / Mongoose)
   via the app's CSS variables where they exist, with the token values as
   fallbacks. Day and night themes; no green anywhere. */
dialog.aspn-cn {
  /* App theme tokens (day). */
  --cn-bg: var(--theme-surface, #FAF8F4);          /* ivory */
  --cn-panel: var(--theme-panel, #FFFFFF);
  --cn-ink: var(--theme-ink, #252525);             /* Charcoal */
  --cn-muted: var(--theme-muted, #6d6a64);
  --cn-line: var(--theme-line, #e4ded4);
  --cn-accent: var(--theme-accent, #a6886e);       /* Mongoose */
  --cn-accent-soft: var(--theme-accent-soft, #f0e9df);
  --cn-fill: var(--theme-fill, #f4efe7);
  --cn-danger: var(--theme-danger, #8a4b3a);
  border: 1px solid var(--cn-line);
  border-radius: 20px;
  padding: 30px;
  background: var(--cn-panel);
  color: var(--cn-ink);
  font-family: inherit;
  font-size: 14px;
  box-shadow: 0 20px 80px #25252522;
  box-sizing: border-box;
}
/* Night theme: host class or OS preference. Charcoal surfaces, ivory ink. */
.aspn-theme-night dialog.aspn-cn,
dialog.aspn-cn.aspn-night {
  --cn-bg: #252525;
  --cn-panel: #2e2b27;
  --cn-ink: #FAF8F4;
  --cn-muted: #b9b2a6;
  --cn-line: #4a443c;
  --cn-accent: #a6886e;
  --cn-accent-soft: #3d362d;
  --cn-fill: #36312b;
  --cn-danger: #d99a86;
  box-shadow: 0 20px 80px #00000088;
}
@media (prefers-color-scheme: dark) {
  dialog.aspn-cn.aspn-auto {
    --cn-bg: #252525; --cn-panel: #2e2b27; --cn-ink: #FAF8F4; --cn-muted: #b9b2a6;
    --cn-line: #4a443c; --cn-accent: #a6886e; --cn-accent-soft: #3d362d;
    --cn-fill: #36312b; --cn-danger: #d99a86;
    box-shadow: 0 20px 80px #00000088;
  }
}
dialog.aspn-cn::backdrop { background: #25252555; backdrop-filter: blur(5px); }
dialog.aspn-cn *, dialog.aspn-cn *::before, dialog.aspn-cn *::after { box-sizing: border-box; }
dialog.aspn-cn button, dialog.aspn-cn input, dialog.aspn-cn select, dialog.aspn-cn textarea { font: inherit; color: inherit; min-height: 44px; }
dialog.aspn-cn button { cursor: pointer; }
dialog.aspn-cn button:disabled { opacity: .55; cursor: default; }
dialog.aspn-cn button:focus-visible, dialog.aspn-cn input:focus-visible,
dialog.aspn-cn select:focus-visible, dialog.aspn-cn textarea:focus-visible {
  outline: 3px solid var(--cn-accent); outline-offset: 3px;
}
dialog.aspn-cn .close { float: right; border: 0; border-radius: 50%; width: 36px; height: 36px; min-height: 36px; background: var(--cn-fill); font-size: 18px; }
dialog.aspn-cn h2 { font-weight: 500; font-size: 24px; letter-spacing: -.6px; margin: 8px 0 4px; }
dialog.aspn-cn h3 { font-weight: 500; margin: 14px 0 8px; }
dialog.aspn-cn h4 { font-weight: 500; margin: 10px 0; }
dialog.aspn-cn .cn-sub { font-size: 12px; color: var(--cn-muted); margin: 0 0 14px; }
dialog.aspn-cn .primary { border: 0; border-radius: 8px; background: var(--cn-ink); color: var(--cn-bg); padding: 12px 17px; font-size: 11px; }
dialog.aspn-cn .quiet { border: 1px solid var(--cn-line); background: transparent; padding: 11px 16px; border-radius: 8px; font-size: 11px; }
dialog.aspn-cn .quiet.cn-danger { border-color: var(--cn-danger); color: var(--cn-danger); }

/* Window layout (approved notes-window geometry). */
dialog.notes-window { width: 820px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.aspn-cn .notes-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.aspn-cn .notes-history { border-right: 1px solid var(--cn-line); padding-right: 18px; }
.aspn-cn .notes-history button {
  display: block; width: 100%; text-align: left;
  background: var(--cn-fill); border: 1px solid var(--cn-line); border-radius: 8px;
  margin: 9px 0; padding: 12px;
}
.aspn-cn .notes-history button.primary { background: var(--cn-ink); color: var(--cn-bg); border: 0; border-radius: 8px; padding: 12px 17px; font-size: 11px; }
.aspn-cn .notes-history button.sel { background: var(--cn-ink); color: var(--cn-bg); }
.aspn-cn .notes-history button.sel small { color: var(--cn-muted); }
.aspn-cn .notes-history small, .aspn-cn .note-meta { display: block; font-size: 10px; color: var(--cn-muted); line-height: 1.8; }
.aspn-cn .notes-editor label { display: block; font-size: 11px; margin: 15px 0 6px; }
.aspn-cn .notes-editor select, .aspn-cn .notes-editor input, .aspn-cn .notes-editor textarea {
  box-sizing: border-box; width: 100%; border: 1px solid var(--cn-line);
  border-radius: 8px; padding: 11px; background: var(--cn-panel); color: var(--cn-ink);
}
.aspn-cn .notes-editor textarea { min-height: 210px; font-size: 12px; line-height: 1.8; }
.aspn-cn .note-body { white-space: pre-wrap; font-size: 13px; line-height: 1.9; background: var(--cn-fill); padding: 18px; border: 1px solid var(--cn-line); border-radius: 10px; }
.aspn-cn .notes-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* Scribe placeholder - disabled in this build, prepared space only. */
.aspn-cn .scribe-placeholder { padding: 14px; background: var(--cn-fill); border: 1px dashed var(--cn-accent); border-radius: 9px; margin-bottom: 18px; }
.aspn-cn .cn-tag { font-size: 8px; letter-spacing: 1px; color: var(--cn-accent); border: 1px solid var(--cn-line); border-radius: 4px; padding: 4px 5px; white-space: nowrap; }

/* Audience chips. */
.aspn-cn .cn-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.aspn-cn .cn-chip { border: 1px solid var(--cn-line); background: var(--cn-accent-soft); color: var(--cn-ink); border-radius: 20px; padding: 5px 10px; font-size: 10px; min-height: 0; }

/* Break-glass reason prompt + errors. */
.aspn-cn .cn-reason { padding: 14px; background: var(--cn-accent-soft); border: 1px solid var(--cn-line); border-radius: 9px; font-size: 12px; line-height: 1.7; margin-bottom: 16px; }
.aspn-cn .cn-reason input { border: 1px solid var(--cn-line); border-radius: 8px; padding: 11px; background: var(--cn-panel); color: var(--cn-ink); flex: 1; min-width: 200px; }
.aspn-cn .cn-error { color: var(--cn-danger); font-size: 12px; margin: 10px 0; }

/* Notepad icon beside the message icon on the staff host client row. */
.aspn-cn-icon { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--theme-line, #e4ded4); background: var(--theme-fill, #f4efe7); border-radius: 9px; cursor: pointer; }
.aspn-cn-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--theme-accent, #a6886e); stroke-width: 1.4; }

@media (max-width: 620px) {
  .aspn-cn .notes-layout { grid-template-columns: 1fr; gap: 15px; }
  .aspn-cn .notes-history { border-right: 0; border-bottom: 1px solid var(--cn-line); padding-right: 0; padding-bottom: 15px; }
  .aspn-cn .notes-editor textarea { min-height: 180px; }
  dialog.notes-window { padding: 22px; }
}
/* Actual app theme selector and selected-note contrast. */
:root[data-theme="night"] dialog.aspn-cn{--cn-bg:#252525;--cn-panel:#2e2e2e;--cn-ink:#f4efe7;--cn-muted:#c2b9ad;--cn-line:#514b45;--cn-accent:#b99b81;--cn-accent-soft:#453d35;--cn-fill:#38332e;--cn-danger:#deb4a5}
dialog.aspn-cn .notes-history button.sel small{color:#e4ddd4}
:root[data-theme="night"] dialog.aspn-cn .notes-history button.sel small{color:#5e554d}