/* Shared composer media styles: emoji picker + pending media previews.
   Used by both the legacy 1-on-1 chat popup and the VIP page composer. */

/* ─── Emoji picker popover ─────────────────────────────────── */

.emoji-picker {
    position: absolute;
    bottom: 58px;
    left: 8px;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 0.6rem;
    z-index: 50;
}

.emoji-picker.hidden { display: none !important; }

.emoji-group + .emoji-group { margin-top: 0.6rem; }

.emoji-group-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 0 0.25rem 0.25rem;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.emoji-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    transition: background 0.12s;
    color: inherit;
}

.emoji-btn:hover,
.emoji-btn:focus {
    background: var(--bg-tertiary);
    outline: none;
}

/* ─── Pending media preview strip (above composer row) ─────── */

.composer-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px 0;
}

.composer-previews:empty { display: none; }

.composer-media-preview {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.composer-media-preview img,
.composer-media-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.composer-media-preview .media-type-badge {
    position: absolute;
    left: 4px;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    pointer-events: none;
}

.composer-media-preview .remove-media {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--accent-danger);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

/* ─── Rendered media inside messages ───────────────────────── */

/* Videos inside message bubbles — works for both chat and VIP message bubbles */
.msg-video {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
    margin-top: 4px;
    background: #000;
}

/* Position context so the emoji popover and mention picker can anchor
   to the composer bottom-left. */
.chat-input-area,
.vip-composer {
    position: relative;
}

/* ─── Markdown-lite formatting inside message bubbles ─────── */

/* Keep formatting subtle — chat messages should still read as chat.
   These rules apply to both .chat-msg-bubble and .vip-msg-bubble via
   the `.chat-msg-text` and `.vip-msg-text` wrappers. */
.chat-msg-text strong,
.vip-msg-text strong { font-weight: 700; }

.chat-msg-text em,
.vip-msg-text em { font-style: italic; }

.chat-msg-text u,
.vip-msg-text u { text-decoration: underline; text-underline-offset: 2px; }

.chat-msg-text s,
.vip-msg-text s { text-decoration: line-through; opacity: 0.75; }

.chat-msg-text code,
.vip-msg-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(0, 0, 0, 0.12);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
}
html[data-theme="dark"] .chat-msg-text code,
html[data-theme="dark"] .vip-msg-text code {
    background: rgba(255, 255, 255, 0.08);
}

.chat-msg-text a,
.vip-msg-text a {
    color: var(--accent-primary);
    text-decoration: underline;
    word-break: break-all;
}

/* ─── @Mention (Slack-style inline link) ──────────────────── */

/* Rendered as <a> so the whole "@Name" is one clickable unit — click
   opens the mentioned user's profile. The soft background makes the
   entire name read as a single token rather than loose text. */
.chat-mention {
    display: inline;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, text-decoration-color 0.12s;
}
.chat-mention:hover,
.chat-mention:focus {
    background: rgba(139, 92, 246, 0.28);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.chat-mention-self {
    background: rgba(245, 158, 11, 0.22);
    color: var(--accent-warning, #f59e0b);
}
.chat-mention-self:hover,
.chat-mention-self:focus {
    background: rgba(245, 158, 11, 0.38);
}

/* Whole-bubble highlight when *I* am mentioned. Applied to the bubble
   element so it works for both legacy chat (.chat-msg) and VIP
   (.vip-msg-bubble). Stays inside the existing bubble border-radius
   instead of spanning the whole row, so the layout isn't disrupted. */
.chat-msg.mentioned-me,
.vip-msg .vip-msg-bubble.mentioned-me {
    background: rgba(245, 158, 11, 0.14) !important;
    border-left: 3px solid var(--accent-warning, #f59e0b);
    padding-left: calc(var(--spacing-sm, 8px) + 2px);
}

/* ─── Mention picker drop-up ──────────────────────────────── */
/*
 * Positioned ABOVE the entire composer container so it never covers
 * the textarea — no matter how many preview thumbnails or formatting
 * buttons are present. Compact sizing keeps it out of the way. */

.mention-picker {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    max-width: 260px;
    max-height: 180px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    padding: 3px;
    z-index: 60;
}

.mention-picker.hidden { display: none !important; }

.mention-picker-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.2;
    user-select: none;
}

.mention-picker-item[aria-selected="true"],
.mention-picker-item:hover {
    background: var(--bg-tertiary);
}

.mention-picker-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    object-fit: cover;
    flex-shrink: 0;
}

.mention-picker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-picker-username {
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.mention-picker-empty {
    padding: 8px 10px;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
}

/* ─── Formatting toolbar (shared: VIP + chat popup) ───────── */
/*
 * A tiny toolbar of B / I / U / code buttons that sits next to the
 * emoji/attach buttons. Clicking wraps the current textarea selection
 * with markdown-lite markers so the renderer (text-format.js) produces
 * the expected formatting. Gives users a visible affordance that text
 * can be styled, without pulling in a full WYSIWYG editor. */

.composer-fmt-btn {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm, 4px);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    font-size: 0.78rem;
    font-family: inherit;
    transition: background var(--transition-fast, 0.12s), color var(--transition-fast, 0.12s);
}
.composer-fmt-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.composer-fmt-btn.is-bold { font-weight: 800; }
.composer-fmt-btn.is-italic { font-style: italic; font-weight: 600; }
.composer-fmt-btn.is-underline { text-decoration: underline; font-weight: 600; text-underline-offset: 2px; }
.composer-fmt-btn.is-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

/* Visual separator between format group and emoji/attach */
.composer-fmt-sep {
    width: 1px;
    align-self: stretch;
    margin: 3px 4px;
    background: var(--glass-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

/* ─── Mention badge in channel list (VIP sidebar) ─────────── */

.vip-convo-mentions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--accent-warning, #f59e0b);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}