/* ---- Chat ---- */

/* Lijst */
.chat-card { padding: 6px 10px; }
.chat-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; min-height: 64px;
  border: 0; background: none; text-align: left; cursor: pointer; border-radius: 14px;
}
.chat-row + .chat-row { border-top: 1px solid var(--line); border-radius: 0; }
.chat-row:hover { background: var(--card-2); }
.chat-row .avatar { width: 44px; height: 44px; }
.chat-group-av { background: var(--accent-soft); color: var(--accent); }
.chat-group-av.home { background: var(--together-soft); color: var(--together-ink); }
@media (prefers-color-scheme: dark) { .chat-group-av.home { color: var(--together); } }
.chat-group-av .ico { width: 22px; height: 22px; }
.chat-row-top, .chat-row-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-row-top .row-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-when { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; padding-left: 8px; }
.chat-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.chat-preview.ev { font-style: italic; }
.chat-row.unread .row-main { font-weight: 780; }
.chat-row.unread .chat-preview { color: var(--ink); }
.chat-row.unread .chat-when { color: var(--danger); font-weight: 700; }
.chat-count {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.ico.chat-pin { width: 15px; height: 15px; color: var(--muted); transform: rotate(35deg); }
.ico.chat-bell-on { width: 14px; height: 14px; color: var(--muted); }
.chat-sub { margin: 18px 6px 6px; }
.chat-card.dms .chat-row { min-height: 56px; padding: 8px 6px; }
.chat-card.dms .avatar { width: 36px; height: 36px; font-size: 13px; }
.chat-new { text-align: center; margin: 14px 0 6px; }
.chat-new .link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.chat-new .link .ico { width: 16px; height: 16px; }
.chat-people { margin-top: 6px; }

/* Gesprek: vult het scherm, enkel de berichten scrollen (hoogte zet chat.js) */
.view-chat.chat-open, body.compact .view-chat.chat-open { padding-bottom: 0; }
.chat-screen {
  display: flex; flex-direction: column; min-height: 0; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 4px; border-bottom: 1px solid var(--line); flex: none; }
.chat-head .avatar { width: 36px; height: 36px; font-size: 13px; }
.chat-head .chat-group-av .ico { width: 18px; height: 18px; }
.chat-title { display: flex; align-items: center; gap: 6px; font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-members { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; overflow-wrap: normal; }
.chat-bell.on { color: var(--accent); background: var(--accent-soft); }

.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 3px; background: var(--paper);
}
.chat-more { text-align: center; margin: 0 0 6px; }
.chat-empty { text-align: center; margin: auto 10px; padding: 20px 0; }
.chat-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.chat-day span { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--card); padding: 3px 10px; border-radius: 99px; }
.chat-new-line { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; color: var(--danger); font-size: 12px; font-weight: 800; }
.chat-new-line::before, .chat-new-line::after { content: ""; flex: 1; border-top: 1px solid var(--danger); opacity: .5; }

/* Berichten */
.chat-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 82%; margin-top: 6px; }
.chat-msg.grouped { margin-top: 0; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.theirs { align-self: flex-start; }
.chat-msg .avatar.xs, .chat-av-space { width: 26px; height: 26px; flex: none; font-size: 10px; }
.chat-bubble {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 11px 6px; border-radius: 18px; min-width: 0;
  background: var(--card); box-shadow: var(--shadow); overflow-wrap: anywhere;
}
.chat-msg.theirs .chat-bubble { border-bottom-left-radius: 6px; }
.chat-msg.theirs.grouped .chat-bubble { border-top-left-radius: 6px; }
.chat-msg.mine .chat-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; cursor: pointer; box-shadow: none; }
.chat-msg.mine.grouped .chat-bubble { border-top-right-radius: 6px; }
.chat-name { font-size: 12.5px; font-weight: 750; }
.chat-text { white-space: pre-wrap; line-height: 1.35; }
.chat-time { align-self: flex-end; font-size: 10.5px; opacity: .65; font-weight: 600; margin-top: 1px; }

/* Gebeurtenis: klein blokje in het midden */
.chat-event-row { display: flex; justify-content: center; margin: 8px 0; }
.chat-event {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 88%; padding: 6px 12px; border: 0; border-radius: 10px;
  background: var(--card-2); color: var(--muted); font-size: 13px; font-weight: 650; text-align: center; line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--line);
}
button.chat-event { cursor: pointer; }
button.chat-event:hover { color: var(--ink); background: var(--together-soft); box-shadow: inset 0 0 0 1px var(--together); }
.chat-event .chat-time { align-self: baseline; }

/* Typen */
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.chat-input {
  flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 14px; border-radius: 21px; line-height: 1.35;
  border: 1px solid var(--line); background: var(--card-2); font-size: 16px; overflow-y: auto;
}
.chat-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.chat-send {
  flex: none; width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-send:disabled { background: var(--card-2); color: var(--muted); cursor: default; box-shadow: inset 0 0 0 1px var(--line); }
.chat-send .ico { width: 20px; height: 20px; }
.chat-quote { background: var(--card-2); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* Laptop: wat ruimer */
@media (min-width: 900px) {
  .chat-msg { max-width: 66%; }
  .chat-log { padding: 14px 20px; }
}
/* Klein venster (menubalk-app): randloos, zo veel mogelijk berichten */
body.compact .chat-screen { border-radius: 14px; }
body.compact .chat-head { padding: 4px 6px 4px 2px; }
body.compact .chat-head .icon-btn { width: 36px; height: 36px; }
body.compact .chat-log { padding: 8px; }
body.compact .chat-msg { max-width: 88%; }