/* Apps::Chat — view-specific styles. */

/*
 * Online presence dot
 *
 * Avoid Bootstrap's `.rounded-circle` here — custom.css overrides that
 * utility with `min-width: 40px; min-height: 40px;`, which inflates the
 * dot to avatar size. This dedicated class keeps the dot tiny and
 * positioned at the avatar's bottom-right corner.
 *
 * Visibility is JS-driven: server renders with `.d-none`; the
 * `apps--chat--online-status` Stimulus controller toggles `.is-online`
 * (and `.d-none`) per user based on /apps/chat/presence/online.
 */
.chat-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #198754; /* bg-success */
  border: 1px solid #fff;
  pointer-events: none;
}

.chat-online-dot--lg {
  width: 10px;
  height: 10px;
  border-width: 2px;
}

/*
 * Reactions row
 *
 * Server-rendered initial state lives in
 * `app/views/apps/chat/messages/_reaction_pills.html.erb`. Live updates land
 * via Pusher `message:reacted` and replace the row's innerHTML wholesale.
 * Mirrors the visual language of `_platform_reaction_bar` (small pill with
 * emoji + count) but without the platform partial's tooltip / picker
 * scaffolding — the chat picker has its own floating pill UI.
 */
.chat-message__reactions {
  min-height: 1.75rem;
}

.chat-message__reactions form.d-inline {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: #fff;
  line-height: 1;
  font-size: 0.875rem;
}

.chat-reaction-pill--mine {
  background: rgba(25, 135, 84, 0.12); /* bg-success-subtle */
  border-color: rgba(25, 135, 84, 0.5);
  color: #157347;
}

.chat-reaction-pill__emoji {
  font-size: 1rem;
}

.chat-reaction-pill__count {
  font-size: 0.8125rem;
}

/*
 * Add-reaction trigger + floating picker pill
 *
 * The trigger is a small icon button kept visible inside `.chat-message`
 * but de-emphasized; on hover (or when the message itself is hovered) it
 * lights up. The floating pill is positioned above the trigger by inline
 * styles in the partial; this rule only covers visual chrome.
 */
.chat-reaction-add-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.55;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.chat-reaction-add-btn:hover,
.chat-reaction-add-btn:focus,
.chat-message:hover .chat-reaction-add-btn {
  opacity: 1;
  background: var(--bs-light-bg-subtle, #f8f9fa);
  border-color: var(--bs-border-color, #dee2e6);
}

.chat-reaction-add-btn__plus {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.55rem;
  background: #fff;
  border-radius: 999px;
  padding: 1px;
  line-height: 1;
}

.chat-reaction-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.chat-reaction-picker .reaction-pill-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 999px;
  transition: background-color 120ms ease, transform 120ms ease;
}

.chat-reaction-picker .reaction-pill-btn:hover {
  background: var(--bs-light-bg-subtle, #f8f9fa);
  transform: scale(1.15);
}

.chat-reaction-picker .reaction-pill-btn--mine {
  background: rgba(25, 135, 84, 0.18);
}

.chat-reaction-picker .reaction-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

/*
 * Attachments row + cards
 *
 * Server-rendered initial state lives in
 * `app/views/apps/chat/messages/_attachments.html.erb`. Live-broadcast
 * state is rendered by `room_controller.js#_renderAttachments`. The two
 * MUST emit byte-aligned HTML for these styles to apply identically.
 *
 * Image attachments render the :preview variant (800px max dimension via
 * libvips) inline, capped to a max-width that fits the message column.
 * Non-image attachments render as a small card with FA icon + filename
 * link + size.
 */
.chat-message__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-attachment {
  max-width: 100%;
}

.chat-attachment--image {
  max-width: 360px;
}

.chat-attachment__img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.chat-attachment__caption {
  margin-top: 4px;
  font-size: 0.75rem;
}

.chat-attachment--file {
  max-width: 320px;
  background: #fff;
}

.chat-attachment__name {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--bs-body-color, #212529);
}

.chat-attachment__name:hover {
  text-decoration: underline;
}

/*
 * Optimistic-bubble variants — the local createObjectURL preview lives
 * here while the upload is in flight. The faded look hints at "not yet
 * sent" without flashing a hard placeholder. Once the live message
 * arrives, the entire optimistic <li> is replaced (see
 * room_controller.js#_onMessageCreated) and `URL.revokeObjectURL` is
 * fired on each `data-blob-object-url="true"` <img> so the browser
 * frees the file from memory.
 */
.chat-attachment--optimistic {
  opacity: 0.85;
}

/*
 * Whole-room drag-drop overlay (Slack/Discord pattern)
 *
 * Driven by `apps--chat--drop-zone` Stimulus controller. Hidden by
 * default; the controller toggles `.is-active` (and Bootstrap's
 * `.d-none`) on dragenter / dragleave / drop. Sits absolutely over the
 * room container so the user can drop anywhere inside the room — not
 * just on the small dropzone in the attachments panel.
 */
.chat-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.10);
  border: 3px dashed rgba(13, 110, 253, 0.55);
  border-radius: 0.5rem;
  pointer-events: none; /* allow the underlying drop event to fire on the room */
  transition: opacity 120ms ease;
}

.chat-drop-overlay__inner {
  text-align: center;
  color: #0a58ca;
  background: rgba(255, 255, 255, 0.92);
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.chat-drop-overlay__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.chat-drop-overlay__hint {
  margin-top: 0.25rem;
  color: #495057;
}

/*
 * Threaded replies (Phase 3.4)
 *
 * Two surfaces:
 *   1. The Reply button + replies chip on each top-level message bubble
 *      in the main timeline.
 *   2. The offcanvas-end thread panel (chat-thread-offcanvas) that opens
 *      when the user clicks Reply or the chip.
 *
 * The Reply button uses the same opacity-on-hover idiom as
 * .chat-reaction-add-btn — keeps the bubble chrome quiet at rest, lights
 * up when the user is interacting with the message. Replies chip stays
 * visible whenever a count > 0; clicking opens the same panel.
 */

.chat-message__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.55;
  transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
  font-size: 0.8rem;
  line-height: 1.2;
}

.chat-reply-btn:hover,
.chat-reply-btn:focus,
.chat-message:hover .chat-reply-btn {
  opacity: 1;
  background: var(--bs-light-bg-subtle, #f8f9fa);
  border-color: var(--bs-border-color, #dee2e6);
}

.chat-replies-chip-btn {
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--bs-primary, #0d6efd);
}

.chat-replies-chip-btn:hover {
  text-decoration: underline;
}

.chat-replies-chip-btn__label {
  margin-left: 0.25rem;
}

/*
 * Thread offcanvas — wider than the default 400px (we render full message
 * bubbles with attachments inside, which need horizontal room). Capped at
 * 95vw on tiny viewports per Bootstrap convention.
 */
.chat-thread-offcanvas {
  width: 480px;
  max-width: 95vw;
}

.chat-thread-panel {
  min-height: 100%;
}

.chat-thread-panel__parent {
  background: var(--bs-light-bg-subtle, #f8f9fa);
}

.chat-thread-panel__empty {
  color: var(--bs-secondary-color, #6c757d);
}