/* ==========================================================================
   css/components/composer.css
   Split from app.html (build 2026.10.08.9-beta), original lines 2517-2694.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
.typing-indicator {
  padding: 4px 16px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  transition: opacity 0.2s;
}
/* When nobody is typing the indicator is emptied (innerHTML=''); collapse it fully so its
   reserved strip doesn't show the lighter channel-area background as a stray gray bar under
   the darker friends / discovery / app views (which give the message area their own bg). */
.typing-indicator:empty { min-height: 0; padding: 0; }

.typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: typingBounce 1.4s ease infinite;
  opacity: 0.7;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* New message just pops in (scale + fade) - no vertical travel, so it can't fight the
   scroll-snap or clip against the composer (that was the jank). */
@keyframes msg-in {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}
.message-group.new-msg { animation: msg-in 0.17s var(--ease-out, ease) forwards; }

/* Input - tight bottom gap (level with the user panel) + slim side gaps so the
   message box runs closer to the edges. */
.message-area { padding: 0 5px 5px 6px; flex-shrink: 0; } /* 6px left / 5px right+bottom, 0 top - box nudged 1px right */

/* Reply bar -sits above message input, visually joined */
.reply-bar { display:none; align-items:center; gap:8px; padding:6px 14px; background:var(--bg-surface); border:1px solid var(--border-strong); border-bottom:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; font-size:13px; }
.reply-bar.open { display:flex; }
.reply-bar-icon { color:var(--accent); flex-shrink:0; opacity:.85; }
.reply-bar-label { color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.reply-bar-label strong { color:var(--accent); }
.reply-bar-snippet { color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; font-style:italic; }
.reply-bar-cancel { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:3px; border-radius:50%; display:flex; flex-shrink:0; transition:background .15s,color .15s; margin-left:auto; }
.reply-bar-cancel:hover { color:var(--text-primary); background:var(--bg-hover); }
/* When reply bar is open, flatten top corners of input bar */
.message-input-bar.replying { border-radius:0 0 var(--radius-lg) var(--radius-lg); }

/* Sticky message -always shown at the bottom, in front of the newest messages */
/* Stuck message cards: accent left rail, icon chip, tag pill, live reactions row. */
.sticky-bar { position:relative; display:flex; align-items:flex-start; gap:11px; padding:10px 14px 10px 16px; margin:0 0 6px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; font-size:13px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.sticky-bar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3.5px; background:var(--accent); }
.sticky-bar .sticky-ico { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:8px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); margin-top:1px; }
.sticky-bar .sticky-body { flex:1; min-width:0; }
.sticky-bar .sticky-head { display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.sticky-bar .sticky-tag { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); padding:2px 8px; border-radius:999px; }
.sticky-bar .sticky-who { font-size:12px; font-weight:600; color:var(--text-primary); }
.sticky-bar .sticky-avatar { width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sticky-bar .sticky-text { color:var(--text-secondary); line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; }
.sticky-bar .sticky-text a { color:var(--accent); }
.sticky-bar .sticky-x { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; border-radius:8px; display:flex; flex-shrink:0; transition:background .12s,color .12s; }
.sticky-bar .sticky-x:hover { color:#fff; background:var(--red,#ed4245); }
#stickyBar .sticky-bar + .sticky-bar { margin-top:4px; }
/* Server-wide variant: gold rail + tag so it reads as bigger than the channel one. */
.sticky-bar.sticky-global::before { background:#d4a441; }
.sticky-bar.sticky-global .sticky-ico { background:color-mix(in srgb,#d4a441 16%,transparent); color:#d4a441; }
.sticky-bar.sticky-global .sticky-tag { color:#d4a441; background:color-mix(in srgb,#d4a441 14%,transparent); }
.sticky-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; align-items:center; }
.sticky-reactions .reaction { margin:0; }
.sticky-react { background:none; border:1px dashed var(--border-strong); border-radius:999px; color:var(--text-muted); cursor:pointer; padding:2px 9px; display:flex; align-items:center; gap:3px; font-size:12px; transition:color .12s,border-color .12s; }
.sticky-react:hover { color:var(--text-primary); border-color:var(--accent); }

/* Reply reference shown above a message */
.msg-reply-ref { display:flex; align-items:center; gap:5px; padding:0 0 4px 0; font-size:12px; color:var(--text-muted); cursor:pointer; max-width:100%; overflow:hidden; user-select:none; line-height:1.3; }
.msg-reply-ref:hover .msg-reply-ref-author, .msg-reply-ref:hover .msg-reply-ref-content { color:var(--text-primary); }
.msg-reply-ref-av { width:16px; height:16px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.msg-reply-ref-author { font-weight:600; color:var(--text-secondary); flex-shrink:0; transition:color .1s; white-space:nowrap; }
.msg-reply-ref-content { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .1s; }
/* Flash highlight when scrolled-to */
@keyframes reply-highlight { 0%,100%{background:transparent} 20%,80%{background:rgba(250,168,26,.12)} }
.message-group.highlighted { animation:reply-highlight 1.6s ease; }
/* Reply target: message currently being replied to gets a blue left-line + subtle wash (NONONONONO). */
.message-group.reply-target {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--blue);
}
.message-group.reply-target:hover { background: color-mix(in srgb, var(--blue) 13%, transparent); }
/* Message rows are clickable to reply; show it on hover without hijacking selection. */
.message-group[data-msg-id] { cursor: default; }

.message-input-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: visible;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  box-shadow: none;
}
.message-input-bar:focus-within { box-shadow: none; }
/* Composer layout (matches the mock): the text input is its own full-width row; the controls
   wrap onto ONE row beneath it - formatting on the LEFT, actions (attach / GIF / emoji / send)
   pushed to the RIGHT. Popups inside the box are position:absolute so they sit out of this
   flex flow. A single hairline divides the input from the control row (no double lines). */
.message-input-bar > .attach-preview-bar { order: 0; flex: 1 1 100%; }
.message-input-bar > .attach-preview-bar:empty { display: none; }
.message-input-bar > .message-input { order: 1; flex: 1 1 100%; padding: 12px 14px 2px; min-height: 40px; }
.message-input-bar > #formatQuick { order: 2; margin-right: auto; padding: 3px 4px 6px 8px; }
.message-input-bar > .attach-btn { order: 3; }
.message-input-bar > .input-right { order: 4; padding: 0 6px 4px 0; }
.message-input-bar > .attach-btn.input-btn,
.message-input-bar .input-right .input-btn { width: 34px; height: 34px; font-size: 18px; }

.input-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.14s var(--ease-spring, ease);
  border-radius: var(--radius-sm);
}
.input-btn:hover { color: var(--accent-bright); transform: scale(1.1); }
.input-btn:active { transform: scale(0.88); }

.message-input {
  flex: 1;
  background: none;
  border: none;
  padding: 11px 0;
  font-size: 14px;
  color: var(--text-primary);
  caret-color: var(--text-primary); /* explicit: CefSharp/Chromium won't draw the implicit caret under a transformed ancestor (parallax bg) */
  resize: none;
  max-height: 200px;
  line-height: 1.6;
  min-height: 44px;
  font-family: inherit;
}
.message-input::placeholder { color: var(--text-muted); }
.message-input:focus { outline: none; }

.input-right { display: flex; align-items: center; padding-right: 6px; gap: 2px; }

.send-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-bright, var(--accent)) 0%, var(--accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: filter 0.15s, transform 0.18s var(--ease-spring, ease), box-shadow 0.15s;
  box-shadow: 0 2px 8px var(--accent-dim);
}
.send-btn:hover:not(:disabled) { filter: brightness(1.12); transform: scale(1.08); box-shadow: 0 4px 16px var(--accent-dim); }
.send-btn:active:not(:disabled) { transform: scale(0.92); }
.send-btn:disabled { background: var(--bg-active); cursor: default; box-shadow: none; }