/* Strata UI — chats.css
   Added by the user's own patch: a list of saved chats and a system prompt per chat.
   The untouched original page is index.html.orig in this folder; delete index.html.orig,
   chats.css and chats.js and restore index.html.orig to go back to the stock page. */

.view--chat{display:flex !important;flex-direction:row !important;align-items:stretch;gap:0}

.chat-side{flex:0 0 264px;min-width:0;display:flex;flex-direction:column;gap:var(--st-s-3);
  padding:var(--st-s-4);border-right:1px solid var(--st-line);background:var(--st-surface-2);overflow:hidden}
.chat-side__head{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s-2)}
.chat-side__list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--st-s-1)}

.chat-item{display:flex;align-items:center;gap:var(--st-s-2);width:100%;padding:var(--st-s-2) var(--st-s-3);
  border:1px solid transparent;border-radius:var(--st-r-sm);background:transparent;color:var(--st-ink);
  font:inherit;font-size:var(--st-fs-sm);text-align:left;cursor:pointer}
.chat-item:hover{background:var(--st-surface)}
.chat-item.on{background:var(--st-surface);border-color:var(--st-line)}
.chat-item .ci-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item .ci-n{flex:0 0 auto;color:var(--st-ink-muted);font-size:var(--st-fs-xs)}
.chat-item .ci-del{flex:0 0 auto;width:24px;height:24px;padding:0;border:0;background:transparent;
  color:var(--st-ink-muted);cursor:pointer;opacity:0}
.chat-item:hover .ci-del,.chat-item.on .ci-del{opacity:1}
.chat-item .ci-del:hover{color:var(--st-ink)}
.chat-item .ci-del svg{width:14px;height:14px}

.chat-side__foot{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--st-s-2);
  padding-top:var(--st-s-3);border-top:1px solid var(--st-line)}
.sys-prompt{width:100%;box-sizing:border-box;resize:vertical;min-height:80px;max-height:34vh;
  padding:var(--st-s-2) var(--st-s-3);border:1px solid var(--st-line);border-radius:var(--st-r-sm);
  background:var(--st-surface);color:var(--st-ink);font:inherit;font-size:var(--st-fs-sm);line-height:var(--st-lh-body)}
.sys-prompt:focus{outline:none;border-color:var(--st-focus)}
#sys-state.on{color:var(--st-accent-text)}

.chat-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden}

@media (max-width:900px){.chat-side{flex:0 0 190px}}