/* SPDX-License-Identifier: AGPL-3.0-or-later */
  /* History: list + detail + a jump-to rail (Pattern B, three panes). The
     rail shows at >= 1100px; under that the jump-to folds into a sticky
     pill row under the actions. Both only render when a chapter spans more
     than one day. Drill-in under 720px like entities and categories. */
  #history-pane { max-width: 96rem; }
  #session-list { padding: .8rem .6rem 1.2rem; width: clamp(15rem, 24vw, 19rem); }
  #session-list .list-item { padding: .5rem .9rem; flex-direction: column; align-items: flex-start; gap: .1rem; line-height: 1.3; }
  #session-list .li-title { font: 600 .9rem/1.3 var(--font-ui); white-space: normal; text-wrap: pretty; }
  #session-list .li-meta { display: flex; align-items: center; gap: .4rem; font: .74rem/1.3 var(--font-ui); }
  #session-list .list-item.open .li-meta { color: var(--accent); }

  /* the head: title, dates, actions, notice */
  #session-dates { font: .8rem var(--font-ui); color: var(--text-dim); }
  .session-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
  #session-notice { margin-top: .7rem; }
  #session-notice:empty { display: none; }

  /* inline jump-to: sticky under the actions at < 1100px */
  #session-jumps {
    position: sticky; top: 0; z-index: 2; background: var(--bg);
    margin: 1rem -.2rem 0; padding: .5rem .2rem; border-bottom: 1px solid var(--border);
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font: .78rem var(--font-ui);
  }
  #session-jumps .eyebrow { font-size: .7rem; letter-spacing: .08em; margin-right: .3rem; }
  #session-jumps .chip { height: 1.7rem; }
  #session-jumps .chip:hover { color: var(--accent); border-color: var(--accent-dim); background: transparent; }
  #session-jumps:empty { display: none; }

  /* the body: one section per day */
  .day-rule { margin-top: 1.6rem; }
  .day-rule .meta { letter-spacing: 0; text-transform: none; }
  .session-part-label { margin-top: 1.6rem; }
  /* a day's summary, italic and dim, above its messages */
  .part-summary { margin: .9rem 0 0; color: var(--text-dim); font-style: italic; font-size: .95rem; text-wrap: pretty; }
  .session-part { white-space: pre-wrap; color: var(--you); margin: 1.1rem 0 1.3rem; text-wrap: pretty; }
  #session-body .msg { margin-top: 1.1rem; margin-bottom: 1.3rem; }
  /* a carried-forward part is the closed chapter this one continues, not
     something just written into it: a left rule, dim text */
  .session-part.carried, .carried-block {
    border-left: 2px solid var(--border); padding-left: .9rem; color: var(--text-dim);
  }
  .carried-block .msg.you { color: var(--text-dim); }
  #session-empty { margin-top: 1.4rem; }
  #session-loading { margin-top: 1.4rem; font: .85rem var(--font-ui); color: var(--text-dim); }

  /* the rail */
  #session-toc {
    flex: 0 0 auto; width: 12rem; border-left: 1px solid var(--border); overflow-y: auto; padding: 1.3rem .9rem;
  }
  #session-toc .eyebrow { font-size: .7rem; letter-spacing: .08em; padding: 0 .4rem .4rem; display: block; }
  #session-toc .toc-date {
    width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
    font: .82rem/1.3 var(--font-ui); padding: .35rem .4rem; border-radius: var(--radius-sm);
    display: flex; flex-direction: column; min-height: 2rem;
  }
  #session-toc .toc-date .sub { font-size: .72rem; color: var(--text-dim); }
  #session-toc .toc-date:hover { background: var(--bg-input); color: var(--accent); }
  #session-toc:empty, #session-jumps:empty { display: none; }
  @media (max-width: 1099.98px) { #session-toc { display: none; } }
  @media (min-width: 1100px) { #session-jumps { display: none; } }