/* Lower-right chat for the open table. The panel is a .cc-card so it drags. */
.chat {
  position: fixed; right: 36px; bottom: 20px; z-index: 32;
}
.chat[hidden] { display: none !important; }

.chat-toggle {
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.chat-toggle svg { width: 28px; height: 28px; }
.chat-unread {
  position: absolute; top: -4px; right: -4px; min-width: 1.15rem; height: 1.15rem;
  padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  font-size: 0.68rem; font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.chat-unread[hidden] { display: none !important; }

.chat-card {
  position: absolute; right: 0; bottom: 68px;
  width: min(320px, calc(100vw - 32px)); height: min(420px, calc(100vh - 96px));
  max-width: none; margin: 0;
}
.chat-card[hidden] { display: none !important; }
.chat-card .cc-head b { flex: 1; min-width: 0; }
.chat-card .cc-head button { margin-left: auto; }

#chat-log {
  flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-empty { color: var(--muted); font-size: 0.85rem; }
.chat-line {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 8px; align-items: baseline;
}
.chat-line .who { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-line .who i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c, var(--muted)); border: 1px solid rgba(0, 0, 0, 0.35);
}
.chat-line .who b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.78rem; font-weight: 650;
}
.chat-line .msg { min-width: 0; overflow-wrap: anywhere; font-size: 0.88rem; }

#chat-form { display: flex; gap: 6px; align-items: center; }
#chat-text { flex: 1; min-width: 0; }