/* ── Composer wrap — floating card ───────────────────────────── */
#composer-wrap {
  position: relative;
  height: fit-content;
  width: 100%;
  bottom: 6px;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  background: rgb(235, 106, 106);
  z-index: 1;
  overflow: visible;
}

/* ── Main composer — fills the card ─────────────────────────── */
#composer {
  margin: 0rem 1rem 0rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgb(32, 32, 31);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
}
#composer-top     { order: 1; }
#composer-input-row { order: 2; }
#composer-actions { order: 3; }

/* ── Composer top — file previews (left) + user blobs (right) ──
   Hidden by default. JS adds .is-visible when there's a reason
   to show it (someone typing, files queued, user just joined).
   Uses grid-template-rows 0fr→1fr trick to animate height:auto. ── */
#composer-top {
  display: none;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}
#composer-top.is-visible {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Inner wrapper is required for the 0fr/1fr grid trick ── */
#composer-top-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.75rem 0rem 0.75rem;
  gap: 0.5rem;
}

/* File previews — left side of composer-top ─────────────────── */
#file-previews {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  flex: 1; min-width: 0;
}
#file-previews:empty { display: none; }
/* When no files, user-blobs still need to be right-aligned */
#composer-top-inner:has(#file-previews:empty) { justify-content: flex-end; }

.fp-item {
  display: flex; align-items: center; gap: 0.3rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  padding: 0.32rem 0.5rem; font-size: var(--text-xs); max-width: 180px;
}
.fp-name   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fp-remove { cursor: pointer; color: var(--muted); font-size: var(--text-sm); flex-shrink: 0; line-height: 1; transition: color 0.1s; }
.fp-remove:hover { color: var(--accent); }

/* ── Online user blobs — right side of composer-top ─────────── */
#user-blobs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Each blob is wrapped in a .blob-wrap to hold the dot indicator */
.blob-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.user-blob {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface2); border: 1.5px solid var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; color: var(--text);
  text-transform: uppercase; cursor: default;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
  user-select: none; overflow: hidden; flex-shrink: 0;
}
.user-blob.is-me { background: rgba(224,122,95,0.2); border-color: var(--accent); color: var(--accent); }
.user-blob img   { width: 100%; height: 100%; object-fit: cover; }
.user-blob::after {
  content: attr(data-name);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface3); color: var(--text);
  font-size: var(--text-xs); font-weight: 600;
  padding: 0.2rem 0.5rem; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity 0.12s; z-index: 10;
  border-radius: 4px;
  border: 1px solid var(--border-md);
}
.user-blob:hover::after { opacity: 1; }
.user-blob::before {
  content: ''; position: absolute; bottom: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b;
  border: 2px solid var(--surface);
  transition: background 0.4s ease;
  z-index: 1;
}
.user-blob:not(.is-connecting)::before { background: #4ade80; }
.user-blob.is-offline::before          { background: var(--surface3); }
.user-blob.is-me::before               { background: #4ade80; }

/* Typing dots next to a blob — shown when that user is typing ── */
.blob-typing {
  display: none;
  align-items: center;
  gap: 2px;
}
.blob-typing.visible { display: inline-flex; }
.blob-typing span {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.blob-typing span:nth-child(2) { animation-delay: 0.2s; }
.blob-typing span:nth-child(3) { animation-delay: 0.4s; }

/* ── Bottom action row — CSS grid, no DOM movement ever ─────── */
/* Collapsed: [ left | input | right ] all on one row
   Expanded:  input spans full width on row 1,
              left + right on row 2              */
#composer-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  padding: 0 0.5rem 0.5rem 0.5rem;
  min-height: 44px;

  padding: 0rem 0rem 0rem 0rem;
}

/* Collapsed positions */
#composer-actions-left  { grid-column: 1; grid-row: 1; order: 1; display: flex; align-items: center; gap: 0.3rem; }
#composer-input-row     { grid-column: 2; grid-row: 1; order: 2; min-width: 0; display: flex; flex-direction: column; margin: 0.5rem 0.3rem 0; }
#composer-actions-right { grid-column: 3; grid-row: 1; order: 3; display: flex; align-items: center; gap: 0.3rem; }

/* Expanded: input-row becomes full-width row 1, buttons drop to row 2 */
#composer.is-expanded #composer-input-row {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0.5rem 0 0;
}
#composer.is-expanded #composer-actions-left  { grid-row: 2; }
#composer.is-expanded #composer-actions-right { grid-row: 2; }

#msg-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: var(--text-md); font-family: var(--font);
  line-height: 1.45; resize: none;
  padding: 0rem 0.65rem 0.5rem 0.65rem;
  max-height: 160px; overflow-y: auto;
  field-sizing: content;

  
  padding: 0rem 0.65rem 0.5rem 0rem;
}
#msg-input::placeholder { color: var(--muted); }

#composer.is-expanded #msg-input {
  padding: 0rem 0.65rem 0.5rem 0.65rem;
}

/* + attach button ───────────────────────────────────────────── */
#attach-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  cursor: pointer; color: var(--text);
  transition: background 0.15s;
  border: none;


  
  background: rgba(255,255,255,0);
  width: 53px;
  height: 53px;
}
#attach-btn:hover { background: rgba(255,255,255,0.12); }
#attach-btn svg   { width: 18px; height: 18px; }

/* Send button ───────────────────────────────────────────────── */
#send-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: none; color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;

  
  background: rgba(255,255,255,0);
  width: 53px;
  height: 53px;
}
#send-btn svg   { width: 18px; height: 18px; }
#send-btn:hover { background: var(--accent); color: #fff; }

/* ── Character counter — sits left of send btn ───────────────── */
.char-counter {
  font-size: var(--text-xs);
  font-family: var(--mono); color: var(--muted);
  padding: 0 0.15rem;
  line-height: 1; pointer-events: none; transition: color 0.15s;
  align-self: center;
}
.char-counter.hidden     { display: none; }
.char-counter.near-limit { color: #d4a84b; }
.char-counter.over-limit { color: #e07a7a; font-weight: 700; }

/* ── Inline error (shown inside message wrapper, not in menu) ─ */
.ctx-inline-error {
  font-size: var(--text-xs); color: var(--danger);
  padding: 0.25rem 0.4rem; margin-top: 0.15rem;
  background: rgba(255,100,100,0.08);
  border-left: 2px solid var(--danger);
  line-height: 1.4; animation: ctx-err-in 0.15s ease;
}
@keyframes ctx-err-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton user blobs ─────────────────────────────────────── */
.blob-skeleton {
  background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 45%, var(--surface2) 100%);
  background-size: 200% 100%;
  animation: blob-sweep 1.6s ease-in-out infinite;
  border-color: transparent;
}
.blob-skeleton:nth-child(2) { animation-delay: 0.25s; }
.blob-skeleton:nth-child(3) { animation-delay: 0.5s; }
@keyframes blob-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Typing indicator ────────────────────────────────────────── */
.typing-person { display: inline-flex; align-items: center; gap: 0.25rem; }
.typing-avatar {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700;
  color: var(--text); text-transform: uppercase;
  overflow: hidden; flex-shrink: 0;
}
.typing-avatar img { width: 100%; height: 100%; object-fit: cover; }
.typing-name   { color: var(--text); font-weight: 600; font-size: var(--text-xs); }
.typing-suffix { color: var(--muted); font-size: var(--text-xs); }
.typing-dots   { display: inline-flex; align-items: center; gap: 2px; margin-left: 1px; }
.typing-dots span {
  width: 3px; height: 3px; border-radius: 50%; background: var(--muted);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1;   }
}