/* Chat conversation sidebar — two-panel layout for the Chat view.
   Adds a "past conversations" list next to the existing .chat-shell so a
   conversation is never orphaned by "нова розмова" (see frontend/js/chat.js).
   New CSS lives here per instruction — style.css is owned by another agent. */

.chat-wrap{
  display: flex; align-items: stretch; gap: var(--sp-14);
  height: calc(100vh - var(--topbar-h) - 150px); min-height: 420px;
}
.chat-wrap .chat-shell{ flex: 1; min-width: 0; height: auto; }

.chat-sidebar{
  width: 260px; flex: none; display: flex; flex-direction: column; gap: var(--sp-10);
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 12px; overflow: hidden;
}
.chat-sidebar .cs-head{
  display: flex; align-items: center; justify-content: space-between;
}
.chat-sidebar .cs-title{ font: 700 var(--fs-12)/1 var(--sans); color: var(--text-dim); }
.chat-sidebar #chatSidebarClose{ display: none; }

.cs-new{ width: 100%; justify-content: flex-start; }

.cs-list{ flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); margin-top: 2px; }
.cs-list .empty-state{ padding: 24px 10px; }

.cs-row{
  display: flex; align-items: center; gap: var(--sp-8); padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--t-fast) var(--ease); border: 1px solid transparent;
}
.cs-row:hover{ background: var(--bg-soft); }
.cs-row.active{ background: var(--grad-brand-soft); border-color: var(--border-soft); }
.cs-row-main{ flex: 1; min-width: 0; }
.cs-row-title{
  font: 600 var(--fs-12)/1.35 var(--sans); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-row-meta{ font: 500 var(--fs-10)/1.3 var(--mono); color: var(--text-mute); margin-top: 2px; }
.cs-row-del{
  flex: none; width: 22px; height: 22px; border-radius: var(--radius-xs); border: none; background: none;
  color: var(--text-mute); cursor: pointer; opacity: 0; transition: var(--t-fast) var(--ease);
  font-size:  var(--fs-12); line-height: 1;
}
.cs-row:hover .cs-row-del{ opacity: 1; }
.cs-row-del:hover{ background: var(--panel-2); color: var(--text); }

.chat-sidebar-overlay{ display: none; }
.chat-burger{ display: none; }

@media (max-width: 860px){
  .chat-wrap{ position: relative; height: calc(100vh - var(--topbar-h) - 120px); }
  .chat-burger{ display: inline-flex; }

  .chat-sidebar{
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 60;
    width: 82vw; max-width: 320px; border-radius: 0; border-right: 1px solid var(--border-soft);
    transform: translateX(-100%); transition: transform var(--t-med) var(--ease);
    box-shadow: var(--shadow-pop);
  }
  .chat-sidebar .cs-head{ display: flex; }
  .chat-sidebar #chatSidebarClose{ display: inline-flex; }

  .chat-sidebar-overlay{
    position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: 0; z-index: 55;
    background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
    transition: opacity var(--t-med) var(--ease);
  }

  body .chat-wrap.cs-open .chat-sidebar{ transform: translateX(0); }
  body .chat-wrap.cs-open .chat-sidebar-overlay{ opacity: 1; pointer-events: auto; }
}