/* Chat — the app (/chat/), the matter workspace tab, the drawer and the Chat
 * half of the floating quick menu. Markup: templates/chat/*,
 * templates/partials/_quick_fab.html; behaviour: static/js/chat.js.
 * Message bodies reuse .answer-md for markdown typography. */

/* ---- app layout ------------------------------------------------------------ */
.chat-app {
  display: grid; grid-template-columns: minmax(220px, 270px) 1fr; gap: 0;
  height: calc(100vh - var(--topbar-h, 56px) - var(--statusbar-h, 30px) - 2.5rem);
  min-height: 480px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
}
.chat-app__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-ws { height: calc(100vh - var(--topbar-h, 56px) - var(--statusbar-h, 30px) - 2.5rem); min-height: 460px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column; }

/* ---- sidebar ---------------------------------------------------------------- */
.chat-side { display: flex; flex-direction: column; gap: .5rem; min-height: 0; overflow-y: auto;
  padding: .8rem .6rem; border-right: 1px solid var(--border); background: var(--bg-elev); }
.chat-side__top { display: flex; flex-direction: column; gap: .45rem; }
.chat-side__new { display: flex; gap: .35rem; flex-wrap: wrap; }
.chat-side__sec { display: flex; flex-direction: column; gap: 1px; }
.chat-side__h { padding: .55rem .5rem .2rem; font: 600 .75rem var(--font-sans); letter-spacing: .01em;
  text-transform: none; color: var(--text-subtle); }
.chat-side__row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .38rem .5rem; border-radius: var(--radius-xs); border: 0; background: transparent;
  color: var(--text-muted); text-decoration: none; font-size: .86rem; text-align: left; cursor: pointer;
}
.chat-side__row:hover { background: var(--surface); color: var(--text); }
.chat-side__row.is-current { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.chat-side__row.has-unread .chat-side__label { color: var(--text); font-weight: 600; }
.chat-side__glyph { flex: none; width: 18px; display: inline-grid; place-items: center; color: var(--text-subtle); font-weight: 700; }
.chat-side__glyph .icon { width: 15px; height: 15px; }
.chat-side__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-side__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius); background: var(--brand);
  color: #fff; font: 600 .7rem/20px var(--font-sans); text-align: center; }
.chat-side__at { color: var(--err); font-weight: 700; font-size: .8rem; }
.chat-side__none { padding: .3rem .5rem; margin: 0; font-size: .78rem; color: var(--text-subtle); }

/* ---- conversation ------------------------------------------------------------- */
.chat-conv { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-conv__head { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.chat-conv__title { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.chat-conv__title h2 { font-size: 1rem; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv__title small { color: var(--text-subtle); font-size: .76rem; }
.chat-conv__kind { width: 32px; height: 32px; border-radius: var(--radius); display: inline-grid; place-items: center; flex: none;
  background: var(--brand-50); color: var(--brand); font-weight: 700; }
.chat-conv__kind .icon { width: 16px; height: 16px; }
.chat-conv__acts { display: flex; align-items: center; gap: .4rem; }
.chat-conv__search .form-control { width: 200px; }
.chat-conv__split { display: flex; flex: 1; min-height: 0; }
.chat-conv__main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: .6rem 1rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.chat-older { align-self: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  border-radius: 999px; padding: .2rem .8rem; font-size: .78rem; margin: .3rem 0 .6rem; cursor: pointer; }
.chat-empty { margin: auto; text-align: center; color: var(--text-muted); display: flex; flex-direction: column; gap: .3rem; max-width: 360px; }

/* ---- a message ----------------------------------------------------------------- */
.chat-msg { position: relative; display: flex; gap: .6rem; padding: .45rem .5rem; border-radius: var(--radius-sm); }
.chat-msg:hover { background: var(--bg-elev); }
.chat-msg.is-flash { animation: chat-flash 2.4s ease-out; }
@keyframes chat-flash { from { background: color-mix(in srgb, var(--gold, #ca8a04) 22%, transparent); } to { background: transparent; } }
.chat-msg__avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border); color: var(--text-muted);
  font: 600 .7rem var(--font-sans); }
.chat-msg.is-mine .chat-msg__avatar { background: var(--brand-50); color: var(--brand); }
.chat-msg__main { flex: 1; min-width: 0; }
.chat-msg__head { display: flex; align-items: baseline; gap: .45rem; font-size: .84rem; }
.chat-msg__head time, .chat-msg__edited { color: var(--text-subtle); font-size: .72rem; }
.chat-msg__body { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg__body > :first-child { margin-top: 0; }
.chat-msg__body > :last-child { margin-bottom: 0; }
.chat-msg__body p { margin: 0 0 .35rem; }
.chat-msg__deleted { font-style: italic; color: var(--text-subtle); font-size: .86rem; }
.chat-mention { background: var(--brand-50); color: var(--brand); border-radius: 4px; padding: 0 .2rem; font-weight: 600; }
.chat-msg--system { justify-content: center; gap: .5rem; color: var(--text-subtle); font-size: .78rem; padding: .3rem; }
.chat-msg--system p { display: inline; margin: 0; }
.chat-msg__tools {
  position: absolute; top: -.7rem; right: .6rem; display: none; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); box-shadow: var(--shadow-xs);
}
.chat-msg:hover .chat-msg__tools, .chat-msg:focus-within .chat-msg__tools { display: flex; }
.chat-msg__tools button { border: 0; background: transparent; color: var(--text-muted); font-size: .74rem; padding: .15rem .4rem;
  border-radius: 4px; cursor: pointer; }
.chat-msg__tools button:hover { background: var(--bg-elev); color: var(--text); }
.chat-msg__reactpick { display: inline-flex; border-right: 1px solid var(--border-soft, var(--border)); margin-right: 2px; }
.chat-reacts { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.chat-react { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0 .45rem;
  font-size: .78rem; cursor: pointer; }
.chat-react.is-mine { border-color: var(--brand); background: var(--brand-50); }
.chat-replies { border: 0; background: transparent; color: var(--brand); font-size: .78rem; font-weight: 600; padding: .2rem 0; cursor: pointer; }
.chat-replies span { color: var(--text-subtle); font-weight: 400; }
.chat-link { border: 0; background: transparent; color: var(--brand); padding: 0; font-size: .76rem; cursor: pointer; }
.chat-link:hover { text-decoration: underline; }

.chat-files { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.chat-file { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem; }
.chat-file__thumb { display: block; width: 100%; }
.chat-file__thumb img { max-width: min(320px, 100%); max-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.chat-file__name { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-xs); padding: .2rem .5rem; background: var(--surface); }
.chat-file__name .icon { width: 14px; height: 14px; }
.chat-file small { color: var(--text-subtle); }
.chat-file__filed { color: var(--ok); font-size: .74rem; }

.chat-note-card { margin-top: .35rem; border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
  background: var(--bg-elev); padding: .5rem .7rem; max-width: 560px; }
.chat-note-card__head { display: flex; align-items: center; gap: .4rem; font-size: .84rem; }
.chat-note-card__head .icon { width: 14px; height: 14px; color: var(--warn); }
.chat-note-card__body { font-size: .82rem; max-height: 220px; overflow: auto; margin-top: .3rem; }
.chat-note-card__more { font-size: .72rem; color: var(--text-subtle); }

/* ---- composer ----------------------------------------------------------------------- */
.chat-composer { border-top: 1px solid var(--border); padding: .55rem .8rem .6rem; background: var(--surface); }
.chat-composer__box { position: relative; }
.chat-composer__input {
  width: 100%; resize: none; min-height: 40px; max-height: 220px; padding: .5rem .65rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font: inherit; font-size: .9rem; line-height: 1.45;
}
.chat-composer__input:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: transparent; }
.chat-composer__bar { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.chat-composer__tool { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent;
  border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); cursor: pointer; margin: 0; }
.chat-composer__tool:hover { border-color: var(--border); color: var(--text); }
.chat-composer__tool .icon { width: 16px; height: 16px; }
.chat-composer__hint { flex: 1; font-size: .72rem; color: var(--text-subtle); }
.chat-composer__files { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.chat-composer__files[hidden] { display: none; }
.chat-chip { font-size: .74rem; border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; background: var(--bg-elev); }
.chat-edit { margin: .2rem 0; }
.chat-mention-list {
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; width: min(320px, 100%);
  max-height: 240px; overflow-y: auto; padding: .25rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: 0 12px 30px -12px rgba(15,18,32,.4);
}
.chat-mention-list[hidden] { display: none; }
.chat-mention-list__row { display: flex; align-items: baseline; gap: .5rem; width: 100%; border: 0; background: transparent;
  padding: .35rem .5rem; border-radius: var(--radius-xs); text-align: left; cursor: pointer; color: var(--text); font-size: .84rem; }
.chat-mention-list__row small { color: var(--text-subtle); }
.chat-mention-list__row.is-active, .chat-mention-list__row:hover { background: var(--brand-50); }

/* ---- thread panel --------------------------------------------------------------------- */
.chat-thread { width: min(380px, 42%); flex: none; border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.chat-thread[hidden] { display: none; }
.chat-thread__inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-thread__head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.chat-thread__parent { padding: .4rem .4rem 0; border-bottom: 1px solid var(--border-soft, var(--border)); }
.chat-thread__log { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem; }
.chat-x { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border);
  border-radius: var(--radius-xs); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.chat-x:hover { color: var(--text); }

/* ---- dialogs ---------------------------------------------------------------------------- */
.chat-dialog { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; }
.chat-dialog[hidden] { display: none; }
.chat-dialog__scrim { position: absolute; inset: 0; background: rgba(15,18,32,.28); }
.chat-dialog__panel { position: relative; width: min(440px, 92%); max-height: 86%; overflow-y: auto; padding: 1rem 1.1rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 24px 60px -24px rgba(15,18,32,.5); }
.chat-form__h { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; }
.chat-form__foot { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .8rem; }
.chat-form--members { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.chat-members { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.chat-members li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chat-pick { display: flex; flex-direction: column; gap: .25rem; max-height: 260px; overflow-y: auto; }
.chat-pick__row { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem .45rem; border: 1px solid var(--border);
  border-radius: var(--radius-xs); cursor: pointer; font-size: .84rem; }
.chat-pick__row span { display: flex; flex-direction: column; min-width: 0; }
.chat-pick__row small { color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; }

/* ---- pages: welcome, new group / DM, search --------------------------------------------------- */
.chat-welcome, .chat-page-form { padding: 1.4rem 1.6rem; max-width: 640px; overflow-y: auto; }
.chat-welcome h1, .chat-page-form h1 { font: 400 var(--title-size)/1.2 var(--font-display); letter-spacing: -.01em; margin: 0 0 .4rem; }
.chat-welcome__acts { display: flex; gap: .5rem; margin: 1rem 0; }
.chat-welcome__matter { max-width: 360px; }
.chat-people__list { display: flex; flex-direction: column; gap: .2rem; max-height: 50vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .3rem; }
.chat-people__row { display: flex; gap: .55rem; align-items: center; padding: .35rem .45rem; border-radius: var(--radius-xs); cursor: pointer; }
.chat-people__row:hover { background: var(--bg-elev); }
.chat-people__row[hidden] { display: none; }
.chat-people__row span { display: flex; flex-direction: column; }
.chat-people__row small { color: var(--text-subtle); font-size: .74rem; }
.chat-search { max-width: 760px; }
.chat-hit { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: .4rem; color: var(--text); text-decoration: none; }
.chat-hit:hover { border-color: var(--brand); color: var(--text); }
.chat-hit__meta { font-size: .76rem; color: var(--text-subtle); }
.chat-hit__body { font-size: .88rem; }

/* ---- drawer (mirrors .notes-drawer) ------------------------------------------------------------ */
.chat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1150;
  width: min(480px, 94vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border-strong);
  box-shadow: -24px 0 60px -28px rgba(15,18,32,.4);
  transform: translateX(100%); visibility: hidden;
  transition: transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
}
.chat-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.chat-drawer__head { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; border-bottom: 1px solid var(--border); }
.chat-drawer__head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-drawer__head .chat-x[hidden] { display: none; }
.chat-drawer__full { font-size: .8rem; color: var(--brand); text-decoration: none; white-space: nowrap; }
.chat-drawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.chat-drawer .chat-conv__head { display: none; }
.chat-drawer .chat-thread { position: absolute; inset: 0; width: auto; z-index: 4; }
.chat-dlist { display: flex; flex-direction: column; gap: 1px; padding: .6rem; }
.chat-dlist__acts { display: flex; gap: .35rem; margin-bottom: .5rem; }

/* ---- floating quick menu: Chat bits ------------------------------------------------------------- */
.quick-fab .notes-fab__btn { position: relative; }
.quick-fab__dot { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--err, #dc2626); border: 2px solid var(--surface); }
.quick-fab__dot[hidden] { display: none; }
.quick-fab__count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius); background: var(--brand);
  color: #fff; font: 600 .7rem/20px var(--font-sans); text-align: center; }
.quick-fab__count[hidden] { display: none; }
[data-chat-fab-recent][hidden] { display: none; }

@media (max-width: 860px) {
  .chat-app { grid-template-columns: 1fr; height: auto; }
  .chat-side { max-height: 36vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .chat-app__main { min-height: 70vh; }
  .chat-thread { position: absolute; inset: 0; width: auto; z-index: 6; }
  .chat-conv__search { display: none; }
}
@media print { .chat-drawer, .chat-composer, .chat-msg__tools { display: none; } }