/* === Note editing: *** blanks, "/" menu groups, the right panel (Insert + AI Chat) ===
   Loaded after chart-layout.css. Plain rows with hairlines; actions show on hover,
   focus and touch. One colour channel per element: Insert = accent text,
   + Empty / Hide = neutral text, Save = accent fill, focus = outline. */

/* ── Blanks: soft amber fill behind each ***, painted by a backdrop under the
   transparent textarea (same font, padding and wrapping). Fill only, no border. */
#patient-tab-visit .nb-wrap { position: relative; }
#patient-tab-visit .nb-wrap > textarea.nb-field { position: relative; z-index: 1; background: transparent; }
#patient-tab-visit .nb-back {
  position: absolute; z-index: 0; margin: 0; pointer-events: none; overflow: hidden;
  color: transparent; white-space: pre-wrap; overflow-wrap: break-word; background: none;
}
#patient-tab-visit .nb-wrap:not(.nb-has) > .nb-back { display: none; }
#patient-tab-visit .nb-blank {
  background: var(--ch-blank-bg, #fbefc8); color: transparent; padding: 0; margin: 0;
  border-radius: 3px; box-shadow: 0 0 0 1px var(--ch-blank-bg, #fbefc8);
}
.ch-blanks.nb-counter { cursor: pointer; color: var(--text-secondary); border-radius: 3px; }
.ch-blanks.nb-counter:hover { color: var(--text); }
.ch-blanks.nb-counter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── "/" menu: grouped, scrolls when long. It lives on <body>, outside the
   chart's variables, so every chart token has a fallback here. */
.ch-slash-menu { max-height: min(380px, 60vh); overflow-y: auto; }
.ch-slash-group {
  padding: 8px 10px 4px; font: 600 11px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.ch-slash-group:not(:first-child) { border-top: 1px solid var(--border-light); margin-top: 4px; padding-top: 10px; }
.ch-slash-hint { font-family: 'IBM Plex Mono', var(--mono); font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* ── Panel shell: tabs, panes ───────────────────────────────────────────── */
#chart-insert { overflow: hidden; }
.ip-tabs { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--ch-line); flex: none; }
.ip-tab {
  height: 42px; padding: 0 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-secondary); font: 400 13px var(--font); cursor: pointer;
}
.ip-tab:hover { color: var(--text); }
.ip-tab[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--text); font-weight: 600; }
.ip-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ip-pane[hidden] { display: none; }

#chart-insert .ch-ins-head { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 8px 8px; padding-inline-start: 16px; border-bottom: 1px solid var(--ch-line); }
#chart-insert .ch-ins-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chart-insert .ip-customize[aria-pressed="true"] { background: var(--pressed); color: var(--text); }
.ip-scroll { flex: 1; min-height: 0; overflow-y: auto; }
#chart-insert .ch-ins-list { flex: none; overflow: visible; list-style: none; margin: 0; padding: 0; }

.ip-tip {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px; padding-inline-start: 16px;
  border-bottom: 1px solid var(--ch-soft); font-size: 12px; line-height: 1.45; color: var(--text-secondary);
}
.ip-tip > span { flex: 1; padding-top: 5px; }
.ip-tip .ch-iconbtn { width: 26px; height: 26px; color: var(--text-tertiary); }
.ip-tip-plain .ip-textbtn { margin-top: 1px; }

/* ── Rows ────────────────────────────────────────────────────────────────── */
#chart-insert .chart-ins-row.ip-row {
  position: relative; display: flex; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--ch-soft);
  background: var(--surface-2); outline: none;
}
#chart-insert .ip-row:hover { background: var(--ch-row-hover); }
#chart-insert .ip-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ip-main { flex: 1 1 auto; min-width: 0; }
#chart-insert .ch-ins-top { display: flex; align-items: center; gap: 6px; min-height: 26px; }
#chart-insert .ch-ins-name { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-done { display: inline-flex; flex: none; color: var(--text-tertiary); }
#chart-insert .ch-ins-acts { flex: none; margin-inline-start: auto; display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .1s; }
#chart-insert .ip-row:hover .ch-ins-acts,
#chart-insert .ip-row:focus .ch-ins-acts,
#chart-insert .ip-row:focus-within .ch-ins-acts,
#chart-insert .ip-row:has(.ip-more[aria-expanded="true"]) .ch-ins-acts,
#chart-insert .ip-customizing .ch-ins-acts { opacity: 1; }
.ip-customizing .ip-handle { opacity: 1; }
#chart-insert .ch-ins-acts .ip-textbtn { width: auto; }
#chart-insert .ch-ins-prev { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chart-insert .ch-ins-prev.ip-none { color: var(--text-tertiary); }

.ip-handle {
  position: absolute; inset-inline-start: 1px; top: 15px; width: 11px; height: 20px;
  display: flex; align-items: center; justify-content: center; color: var(--text-tertiary);
  cursor: grab; opacity: 0; touch-action: none; border-radius: 3px;
}
.ip-handle:hover { color: var(--text); background: var(--hover-neutral); }
.ip-row:hover .ip-handle, .ip-row:focus .ip-handle, .ip-row:focus-within .ip-handle { opacity: 1; }
.ip-row.ip-dragging { z-index: 80; cursor: grabbing; background: var(--surface) !important; box-shadow: 0 8px 22px rgba(12,31,59,.18); border-bottom-color: transparent; }
.ip-row.ip-dragging .ip-handle { opacity: 1; cursor: grabbing; }
.ip-placeholder { list-style: none; margin: 0 8px; border-radius: 4px; background: var(--hover-neutral); }

@media (pointer: coarse) {
  #chart-insert .ch-ins-acts, .ip-handle { opacity: 1; }
}

/* Text-only actions (one channel: text). */
.ip-textbtn {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border: 0; border-radius: 4px;
  background: none; color: var(--ink-2); font: 500 12px/1 var(--font); cursor: pointer; white-space: nowrap;
}
.ip-textbtn:hover { background: var(--hover-neutral); color: var(--text); }
.ip-textbtn.ip-accent { color: var(--primary); font-weight: 600; }
.ip-textbtn.ip-accent:hover { color: var(--primary); }
.ip-textbtn:focus-visible, .ip-tab:focus-visible, .ip-seg-btn:focus-visible, .ip-ai-send:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ip-textbtn[hidden] { display: none; }
.ip-selsave { flex: none; }
#chart-insert .ip-more { width: 26px; height: 26px; color: var(--text-tertiary); }
#chart-insert .ip-more:hover { color: var(--text); }
.ip-more-menu { min-width: 140px; }

.ip-sec-title {
  padding: 18px 16px 6px; border-bottom: 1px solid var(--ch-soft);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.ip-new { margin: 6px 10px 14px; }
.ip-hidden-list { list-style: none; margin: 0; padding: 0; }
.ip-hidden-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; padding-inline-start: 16px; border-bottom: 1px solid var(--ch-soft); }
.ip-hidden-row .ch-ins-name { font-weight: 400 !important; color: var(--text-secondary); }

/* Auto-text form */
.ip-form-row { list-style: none; }
.ip-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; border-bottom: 1px solid var(--ch-soft); background: var(--surface); }
.ip-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.ip-field input, .ip-field textarea {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--ch-ctrl-line); border-radius: 4px;
  background: var(--surface); color: var(--text); font: 13px/1.45 var(--font);
}
.ip-field textarea { resize: vertical; min-height: 84px; }
.ip-field input:focus, .ip-field textarea:focus { outline: none; border-color: var(--primary); }
.ip-field .ip-mono { font-family: var(--ch-mono); }
.ip-form-err { font-size: 12px; color: var(--danger); }
.ip-form-err:empty { display: none; }
.ip-form-acts { display: flex; justify-content: flex-end; gap: 6px; }

.ip-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── AI Chat tab ─────────────────────────────────────────────────────────── */
.ip-ai { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ip-ai-head { flex: none; padding: 10px 16px; border-bottom: 1px solid var(--ch-line); }
.ip-seg { display: flex; padding: 2px; border: 1px solid var(--ch-ctrl-line); border-radius: 6px; }
.ip-seg-btn { flex: 1; height: 26px; border: 0; border-radius: 4px; background: none; color: var(--text-secondary); font: 400 12px var(--font); cursor: pointer; }
.ip-seg-btn:hover { color: var(--text); }
.ip-seg-btn[aria-checked="true"] { background: var(--pressed); color: var(--text); font-weight: 600; }
.ip-ai-cap { margin-top: 6px; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-ai-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.ip-ai-empty { font-size: 13px; color: var(--text-tertiary); }
.ip-msg { font-size: 13px; line-height: 1.5; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ip-msg-user { align-self: flex-end; max-width: 88%; padding: 6px 10px; border-radius: 8px; background: var(--pressed); white-space: pre-wrap; }
.ip-msg-ai .ip-msg-body > :first-child { margin-top: 0; }
.ip-msg-ai .ip-msg-body > :last-child { margin-bottom: 0; }
.ip-msg-ai .ip-msg-body :is(p, ul, ol) { margin: 0 0 6px; }
.ip-msg-ai .ip-msg-body :is(ul, ol) { padding-inline-start: 18px; }
.ip-msg-ai .ip-msg-body :is(h1, h2, h3, h4) { font-size: 13px; font-weight: 600; margin: 8px 0 4px; }
.ip-msg-acts { margin-top: 2px; margin-inline-start: -6px; }
.ip-ai-typing { color: var(--text-tertiary); }
.ip-ai-err { color: var(--danger); }
.ip-ai-composer { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--ch-line); }
.ip-ai-composer textarea {
  flex: 1; min-width: 0; min-height: 36px; max-height: 140px; resize: none; box-sizing: border-box;
  padding: 7px 10px; border: 1px solid var(--ch-ctrl-line); border-radius: 6px; background: var(--surface);
  color: var(--text); font: 13px/1.45 var(--font);
}
.ip-ai-composer textarea:focus { outline: none; border-color: var(--primary); }
.ip-ai-send {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: var(--primary); color: var(--on-primary); cursor: pointer;
}
.ip-ai-send:hover { background: var(--primary-hover); }
.ip-ai-send:disabled { opacity: .5; cursor: default; }

/* Wide desktop: the collapse chevron ends the tab row (or the header without tabs). */
.ip-tabs .ch-ins-collapse { margin-inline-start: auto; align-self: center; }
#chart-insert .ch-ins-head .ch-ins-collapse { flex: none; }

/* Tablet and laptop drawer: the close button sits in the tab row (or the header without tabs). */
@media (min-width: 768px) and (max-width: 1359px) {
  .ip-tabs { padding-inline-end: 48px; }
  .ip-tabs .ch-ins-close { top: 6px; }
  #chart-insert .ip-pane:not([data-close="1"]) .ch-ins-head { padding-inline-end: 8px; }
  #chart-insert .ip-pane[data-close="1"] .ch-ins-head { padding-inline-end: 48px; }
}

/* ── "@" terms picker: the "/" menu's popup, fixed at the caret, above modals
   (report editor, prescriptions). The "Add as term" row is muted text. ───── */
.ch-at-menu { position: fixed; z-index: 1300; max-height: min(300px, 50vh); }
.ch-at-menu .ch-slash-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-at-menu .ch-at-group { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ch-at-menu .ch-at-group:first-child { padding-top: 4px; }
.ch-at-menu .ch-slash-item { align-items: center; }
.ch-at-x { display: inline-flex; visibility: hidden; flex: none; width: 24px; height: 24px; margin-block: -4px; margin-inline-start: auto; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 16px; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.ch-at-x:hover { background: var(--border-light); color: var(--danger); }
.ch-at-menu .ch-slash-item:hover .ch-at-x, .ch-at-menu .ch-slash-item.ch-active .ch-at-x, .ch-at-x:focus-visible { visibility: visible; }
/* The × is always laid out (just hidden) and its negative block margin keeps it from
   growing the row, so hovering never shifts neighbouring items. */
.ch-at-menu .ch-at-add { color: var(--text-secondary); }
.ch-at-menu .ch-at-add:not(:first-child) { border-top: 1px solid var(--border-light); border-radius: 0 0 4px 4px; margin-top: 2px; }

/* ── My terms (Insert tab): collapsible section, plain rows, actions on hover ── */
.ip-sec-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--ch-soft);
  background: none; text-align: start; cursor: pointer; font-family: var(--font);
}
.ip-sec-toggle:hover { color: var(--text-secondary); }
.ip-sec-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ip-sec-chev { flex: none; transition: transform .12s; }
.ip-sec-toggle[aria-expanded="true"] .ip-sec-chev { transform: rotate(90deg); }
[dir="rtl"] .ip-sec-toggle[aria-expanded="false"] .ip-sec-chev { transform: scaleX(-1); }
.ip-sec-count { font-weight: 500; letter-spacing: 0; color: var(--text-tertiary); }
.ip-terms-list { list-style: none; margin: 0; padding: 0; }
.ip-term-row {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 8px; padding-inline-start: 16px;
  border-bottom: 1px solid var(--ch-soft); background: var(--surface-2);
}
.ip-term-row:hover { background: var(--ch-row-hover); }
.ip-term-name { flex: 0 1 auto; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-term-uses { flex: none; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
/* Actions take no room until the row is hovered or focused, so names are not cut short. */
.ip-term-acts { flex: none; margin-inline-start: auto; display: none; gap: 2px; }
.ip-term-row:hover .ip-term-acts, .ip-term-row:focus-within .ip-term-acts { display: flex; }
@media (pointer: coarse) { .ip-term-acts { display: flex; } }
.ip-term-editing { flex-wrap: wrap; background: var(--surface); padding-block: 6px; }
.ip-term-form { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; min-width: 0; }
.ip-term-input {
  flex: 1; min-width: 0; height: 28px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--ch-ctrl-line); border-radius: 4px;
  background: var(--surface); color: var(--text); font: 13px/1.3 var(--font);
}
.ip-term-input:focus { outline: none; border-color: var(--primary); }
.ip-term-editing .ip-form-err { flex: 1 1 100%; padding-top: 4px; }
.ip-terms-empty { padding: 10px 16px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); border-bottom: 1px solid var(--ch-soft); }
.ip-terms-seed .ip-textbtn { margin-top: 1px; }

/* ── "Saved N new terms" toast: muted, one channel (Undo = accent text). ──── */
.at-toast {
  position: fixed; z-index: 1300; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding-block: 6px; padding-inline: 14px 6px; border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow-md); font: 13px/1.4 var(--font); color: var(--text-secondary);
}
.at-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-toast-undo {
  flex: none; height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: none;
  color: var(--primary); font: 600 13px var(--font); cursor: pointer;
}
.at-toast-undo:hover { background: var(--hover-neutral); }
.at-toast-undo:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }