/* chat.css — 1:1 personal chat side-bubble + panel.
   Lives bottom-right, above the bug-report button. Visible on every
   internal page. */

/* Floating round bubble */
.chat-bubble {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 80;        /* above the bug button (z=75) so it's the topmost */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2f6df3;
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chat-bubble:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(15,23,42,.28), 0 3px 8px rgba(15,23,42,.20); }
.chat-bubble:active { transform: translateY(0); }
.chat-bubble.is-open { background: #1c4ec4; }

/* Unread badge */
.chat-bubble-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e2445c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(226,68,92,.35);
}

/* When the chat panel is open, hide the bug-report button to avoid
   any overlap with the panel's right edge. The button comes back the
   instant the panel closes. */
body.chat-panel-open .bug-floating-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* The panel */
.chat-panel {
  position: fixed;
  bottom: 86px;
  right: 22px;
  z-index: 79;
  width: 720px;
  max-width: calc(100vw - 44px);
  height: 540px;
  max-height: calc(100vh - 130px);
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15,23,42,.18), 0 6px 16px rgba(15,23,42,.10);
  display: grid;
  grid-template-columns: 240px 1fr;
  overflow: hidden;
  animation: chat-pop 140ms cubic-bezier(.2,.6,.2,1);
}
@keyframes chat-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@media (max-width: 720px) {
  .chat-panel {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 80px;
  }
  .chat-panel.is-thread .chat-list-pane { display: none; }
  .chat-panel:not(.is-thread) .chat-thread-pane { display: none; }
}

/* Left rail — list of conversations */
.chat-list-pane {
  border-right: 1px solid #e6e9ef;
  display: flex;
  flex-direction: column;
  background: #fbfcfd;
  /* Grid + flex items default to min-width/min-height: auto, which
     prevents inner `flex: 1; overflow-y: auto` children from shrinking
     below their content size — the scrollbar would never engage and
     the panel would spill out of its 540px frame. Forcing 0 here is
     what actually makes the inner scroller work. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.chat-list-head {
  padding: 12px 14px;
  border-bottom: 1px solid #e6e9ef;
  background: #fff;
}
.chat-list-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f1729;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-list-sub {
  font-size: 11px;
  color: #676879;
  margin-top: 2px;
}
.chat-search {
  appearance: none;
  width: 100%;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  margin: 8px 0 0;
  outline: none;
  background: #fff;
}
.chat-search:focus {
  border-color: #2f6df3;
  box-shadow: 0 0 0 3px rgba(47,109,243,.12);
}
.chat-list-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(15,23,42,.04);
  transition: background .12s ease;
  position: relative;
}
.chat-row:hover { background: #fff; }
.chat-row.is-active { background: #fff; box-shadow: inset 3px 0 0 #2f6df3; }
.chat-row-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #b3b8c2;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.chat-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f1729;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row-preview {
  font-size: 11.5px;
  color: #676879;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.chat-row-time {
  font-size: 10px;
  color: #99a0b0;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.chat-row-unread {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #2f6df3;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-list-empty {
  text-align: center;
  font-size: 12px;
  color: #676879;
  padding: 28px 14px;
  line-height: 1.55;
}

/* "Start new chat" — list of teammates not yet in conversations */
.chat-new {
  padding: 10px 12px;
  border-bottom: 1px dashed #e6e9ef;
}
.chat-new-label {
  font-size: 10px;
  color: #99a0b0;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  margin-bottom: 6px;
}
.chat-new-people {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chat-new-person {
  appearance: none;
  border: 1px solid #e6e9ef;
  border-radius: 999px;
  background: #fff;
  padding: 3px 8px 3px 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #0f1729;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.chat-new-person:hover { background: #f3f4f7; border-color: #cfd5e0; }
.chat-new-person .av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b3b8c2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chat-new-person .av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Right pane — active thread */
.chat-thread-pane {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* Same reason as .chat-list-pane: must explicitly opt out of the
     auto min-size so the inner .chat-thread-scroll can shrink and
     scroll instead of pushing the composer off-screen. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.chat-thread-head {
  padding: 12px 14px;
  border-bottom: 1px solid #e6e9ef;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-thread-head .back {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: #676879;
}
.chat-thread-head .back:hover { background: #f3f4f7; }
@media (max-width: 720px) { .chat-thread-head .back { display: inline-flex; } }
.chat-thread-name { font-size: 14px; font-weight: 700; color: #0f1729; flex: 1; }
.chat-thread-sub { font-size: 11px; color: #676879; margin-top: 1px; }
.chat-thread-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: #676879;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-thread-close:hover { background: #f3f4f7; color: #0f1729; }

.chat-thread-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  background: #fbfcfd;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-thread-empty {
  text-align: center;
  font-size: 12px;
  color: #676879;
  padding: 36px 24px;
  margin: auto;
  line-height: 1.6;
}
.chat-retention-note {
  text-align: center;
  font-size: 10.5px;
  color: #99a0b0;
  padding: 8px 0;
  font-weight: 500;
}

/* Day separator */
.chat-day {
  align-self: center;
  font-size: 10px;
  color: #99a0b0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #f3f4f7;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 8px auto 4px;
}

/* Message bubble */
.chat-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
}
.chat-msg-mine {
  align-self: flex-end;
  background: #2f6df3;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-mine .chat-msg-time { color: rgba(255,255,255,.78); }
.chat-msg-them {
  align-self: flex-start;
  background: #fff;
  color: #0f1729;
  border: 1px solid #e6e9ef;
  border-bottom-left-radius: 4px;
}
.chat-msg-time {
  font-size: 10px;
  color: #99a0b0;
  margin-top: 3px;
}
/* Group consecutive messages from the same sender */
.chat-msg + .chat-msg { margin-top: 0; }
.chat-msg.is-grouped { margin-top: 1px; }
.chat-msg.is-grouped.chat-msg-mine { border-top-right-radius: 6px; }
.chat-msg.is-grouped.chat-msg-them { border-top-left-radius:  6px; }

/* "New messages ↓" pill — appears above the composer when an incoming
   message lands while the user is scrolled up reading history. Clicking
   it pins them back to the bottom and clears the badge. */
.chat-jump-latest {
  align-self: center;
  margin: 0 auto 6px;
  appearance: none;
  border: 0;
  background: #2f6df3;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(47,109,243,.30);
  position: relative;
  z-index: 1;
  /* Pull the pill upward so it floats just above the composer line. */
  margin-top: -28px;
}
.chat-jump-latest:hover { background: #1c4ec4; }

/* Composer */
.chat-composer {
  border-top: 1px solid #e6e9ef;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-input {
  flex: 1;
  appearance: none;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  resize: none;
  max-height: 120px;
  min-height: 38px;
  line-height: 1.5;
  background: #fbfcfd;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.chat-input:focus {
  border-color: #2f6df3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47,109,243,.12);
}
.chat-send {
  appearance: none;
  border: 0;
  background: #2f6df3;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s ease, transform .08s ease;
}
.chat-send:hover { background: #1c4ec4; }
.chat-send:active { transform: scale(.95); }
.chat-send:disabled { background: #cfd5e0; cursor: not-allowed; }

/* "Pick a teammate" — empty thread placeholder */
.chat-pick {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  color: #676879;
  font-size: 13px;
  line-height: 1.55;
}
.chat-pick-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eaf0ff;
  color: #2f6df3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.chat-pick-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f1729;
  margin-bottom: 4px;
}