.coli-history-enabled > div { min-width: 0; }
.coli-history {
  position: sticky;
  top: 0;
  flex: 0 0 17rem;
  width: 17rem;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.25rem .85rem 1rem;
  border-right: 1px solid var(--coli-border);
  background: var(--coli-surface);
  color: var(--coli-ink);
}
.coli-history-heading { display: flex; align-items: center; justify-content: space-between; padding-inline: .35rem; }
.coli-history-heading > strong { font-size: 1.05rem; }
.coli-history-close { display: none; width: 2.4rem; height: 2.4rem; font-size: 1.6rem; border-radius: .7rem; }
.coli-history-new { min-height: 2.75rem; border-radius: .85rem; background: var(--coli-green); color: white; font-weight: 700; font-size: .85rem; }
.coli-history-new > span { margin-right: .3rem; font-size: 1.15rem; }
.coli-history-account { margin: .3rem .35rem 0; font-size: .79rem; font-weight: 700; overflow-wrap: anywhere; }
.coli-history-note { margin: -.45rem .35rem .15rem; color: var(--coli-muted); font-size: .71rem; line-height: 1.5; }
.coli-history-login, .coli-history-refresh { min-height: 2.6rem; padding: .6rem; border: 1px solid var(--coli-border); border-radius: .75rem; color: var(--coli-green); background: var(--coli-green-soft); font-size: .77rem; font-weight: 700; }
.coli-history-search { width: 100%; min-height: 2.6rem; padding: .65rem .75rem; border: 1px solid var(--coli-border); border-radius: .75rem; background: transparent; color: var(--coli-ink); font-size: .77rem; }
.coli-history-search::placeholder { color: var(--coli-muted); }
.coli-history-status { margin: 0 .35rem; color: var(--coli-muted); font-size: .74rem; line-height: 1.5; }
.coli-history-status.is-error { color: #b04435; }
.coli-history-scroll { min-width: 0; min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.coli-history-list { display: grid; min-width: 0; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.coli-history-list > li { min-width: 0; }
.coli-history-chat { display: flex; flex-direction: column; gap: .3rem; min-width: 0; width: 100%; padding: .7rem .75rem; text-align: left; border: 1px solid transparent; border-radius: .8rem; color: var(--coli-ink); transition: background .15s ease, border-color .15s ease; }
.coli-history-chat:hover { background: var(--coli-green-soft); }
.coli-history-chat[aria-current="true"] { border-color: var(--coli-border); background: var(--coli-green-soft); box-shadow: inset 3px 0 var(--coli-green); }
.coli-history-chat > strong { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.coli-history-preview { min-width: 0; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: var(--coli-muted); font-size: .71rem; }
.coli-history-chat > small { color: var(--coli-muted); font-size: .64rem; }
.coli-history-empty { padding: .8rem .45rem; color: var(--coli-muted); font-size: .76rem; line-height: 1.6; }
.coli-history-refresh { margin-top: auto; flex-shrink: 0; }
.coli-history button:disabled, .coli-history-search:disabled { cursor: wait; opacity: .55; }
.coli-history :is(button,input):focus-visible, .coli-history-mobile-bar button:focus-visible { outline: 3px solid #48b893; outline-offset: 2px; }
.coli-history [hidden], .coli-history-backdrop[hidden] { display: none !important; }
.coli-history-mobile-bar { display: none; }
.coli-history-backdrop { position: fixed; inset: 0; z-index: 60; border: 0; background: rgba(10,25,20,.4); backdrop-filter: blur(2px); }
.coli-history-enabled header > div > div.absolute { right: 4.35rem; }
.coli-history-enabled header button:disabled { opacity: .5; cursor: wait; }
.coli-dark .coli-history-status.is-error { color: #f2a697; }
.coli-dark .coli-history-login, .coli-dark .coli-history-refresh { color: #b5ebd8; }

@media (max-width: 1023px) {
  .coli-history { position: fixed; left: 0; top: 0; z-index: 70; width: min(20rem,calc(100vw - 2.5rem)); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s ease; background: #f7fbf9; box-shadow: 10px 0 40px rgba(10,25,20,.15); padding-top: max(1rem,env(safe-area-inset-top)); padding-bottom: max(1rem,env(safe-area-inset-bottom)); }
  .coli-history.is-open { transform: translateX(0); visibility: visible; }
  .coli-history-close { display: block; }
  .coli-history-mobile-bar { display: flex; width: 100%; align-items: center; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid var(--coli-border); background: var(--coli-surface); }
  .coli-history-mobile-bar > button { flex-shrink: 0; min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid var(--coli-border); border-radius: .7rem; font-size: .8rem; font-weight: 700; color: var(--coli-ink); }
  .coli-history-mobile-bar > button > span { margin-right: .35rem; }
  .coli-history-current-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .77rem; color: var(--coli-muted); }
  .coli-history-open { overflow: hidden; }
  .coli-dark .coli-history { background: #141e1a; }
}

@media (max-width: 640px) {
  .coli-history-enabled header > div > div.absolute { right: 3.65rem; }
  .coli-history-enabled header > div > div.absolute > div > span { display: none; }
  .coli-history-enabled header > div > div.absolute button { padding-inline: .65rem; }
}

@media (prefers-reduced-motion: reduce) { .coli-history { transition: none; } }