/* SocialComposer — shared styles for the V2 Quill (bubble + quill-mention)
   timeline / comment composers (the comment box, Post and Challenge editors).
   Linked from V2 _Site.cshtml and _Popup.cshtml so editors render correctly in
   both full-page and popup-layout views (styles.css is NOT loaded under _Popup). */

/* ---------------------------------------------------------------------- */
/*  Composer overlays — the single source of truth for their stacking level */
/*                                                                          */
/*  Both of these attach to <body> (picmo's popup always; quill-mention when */
/*  positioningStrategy is "fixed") so they escape composer/panel overflow — */
/*  but they then have to out-rank whatever they float over. The ceiling is  */
/*  Bootstrap's modal at --bs-modal-zindex: 10055 (styles.css), because the  */
/*  comment box renders inside modals: the Gallery fullscreen photo viewer,  */
/*  AddOnBase popups, etc. Anything lower is not merely "behind a card" —    */
/*  inside a modal it is completely invisible and reads as a dead button.    */
/*                                                                          */
/*  This file is loaded by BOTH V2 layouts (_Site.cshtml and _Popup.cshtml), */
/*  which is why the rules live here and not in messaging-v2.css (chat-jewel */
/*  pages only) or styles.css (_Site only). Keep them here — a second copy   */
/*  in a later-loading sheet is exactly how this broke before.               */
/*                                                                          */
/*  The `body >` prefix is load-order insurance, not decoration. Both        */
/*  elements are appended directly to <body>, and the competing declarations */
/*  are bare single-class selectors (quill-mention's own 9001; styles.css    */
/*  used to pin picmo to 3). Matching their specificity would leave the      */
/*  winner decided by sheet order, which is not stable — the Messaging page  */
/*  loads quill.mention.min.css a second time, AFTER this file. `body > .x`  */
/*  outranks `.x` outright, so it holds wherever the composer is used.       */
/* ---------------------------------------------------------------------- */
body > .picmo__popupContainer,
body > .ql-mention-list-container {
    z-index: 10060; /* > --bs-modal-zindex (10055) */
}

/* Compact the @mention suggestion list. quill-mention ships `font-size: 16px;
   line-height: 44px; padding: 0 20px`, which is a 56px-tall row — far too heavy for a
   dropdown, and on a phone a handful of suggestions fills the screen. messaging-v2.css
   already trimmed the font and padding but not the line-height, which is what actually
   sets the height. Same `body >` prefix as above: quill.mention.min.css is a bare
   single-class selector and loads after us on the Messaging page.
   Long names ellipsize rather than widening the list past a narrow viewport. */
/* Theme the panel. quill-mention hardcodes a white background; messaging-v2.css replaces it
   with var(--mv2-pane-bg, #fff), but --mv2-pane-bg is only defined on the Messaging page, so
   everywhere else (comment boxes, the Post/Challenge composers) the fallback painted a WHITE
   panel while the theme kept its near-white text — in dark mode every unhighlighted name was
   invisible. Keep Messaging's own pane colour where it exists, otherwise use the themed white,
   and set a themed text colour for the rows to inherit. */
body > .ql-mention-list-container {
    max-height: 13rem;
    max-width: min(17rem, calc(100vw - 1.5rem));
    background: var(--mv2-pane-bg, var(--custom-white, #fff));
    color: var(--default-text-color, #333);
    border-color: var(--default-border, rgba(0, 0, 0, 0.1));
}

body > .ql-mention-list-container .ql-mention-list-item {
    font-size: 0.8125rem; /* match the comment composer's controls */
    line-height: 1.35;
    padding: 0.375rem 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------- */
/*  Base editor look                                                        */
/* ---------------------------------------------------------------------- */
.social-composer-editor .ql-container { font-size: inherit; border: none; }
.social-composer-editor .ql-editor { padding: 3px 10px; min-height: 26px; }
.social-composer-editor .ql-editor.ql-blank::before { font-style: normal; color: #999; left: 10px; right: 10px; }

/* ---------------------------------------------------------------------- */
/*  Comment box composer row                                                */
/*  Editor fills the available width; the action buttons sit on the right.  */
/*  (Replaces the old CKEditor inline-block + JS width-resize timer.)        */
/* ---------------------------------------------------------------------- */
.commentbox-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
}

.commentbox-composer .commentbox-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--input-border, rgba(0, 0, 0, 0.12));
    border-radius: 0.375rem;
    background: var(--custom-white, #fff);
}

.commentbox-composer .social-composer-editor { width: 100%; }
.commentbox-composer .social-composer-editor .ql-editor { max-height: 8rem; overflow-y: auto; }

.commentbox-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------- */
/*  WhatsApp-style attach (+) popover (Photo / Document)                    */
/*  Mirrors the messaging composer's attach menu, scoped to the comment box.*/
/* ---------------------------------------------------------------------- */
.commentbox-attach-wrap {
    position: relative;
    display: inline-flex;
}

/* Opens upward by default (the composer normally sits at the bottom of its
   container). Where the composer is at the TOP of a scrollable panel — the Gallery
   fullscreen viewer's comment rail — there is nothing above it, so the menu
   overflowed the panel and `overflow: auto` clipped "Photo" off the top, leaving
   only "Document" pickable. CommentBox.cshtml measures the space above on open and
   adds .drop-down when it doesn't fit, flipping the menu below the button. */
.commentbox-attach-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    z-index: 1050;
    min-width: 11rem;
    padding: 0.375rem;
    background: var(--custom-white, #fff);
    border: 1px solid var(--default-border, rgba(0, 0, 0, 0.08));
    border-radius: 0.625rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.commentbox-attach-menu.drop-down {
    bottom: auto;
    top: calc(100% + 0.5rem);
}

.commentbox-attach-menu[hidden] { display: none; }

.commentbox-attach-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    text-align: left;
    white-space: nowrap;
    font-size: 0.8125rem; /* match the comment input (.form-control) */
    color: inherit;
    cursor: pointer;
}

.commentbox-attach-item:hover,
.commentbox-attach-item:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: 0;
}

/* Colored circular icon badges (Photo = purple, Document = blue) — mirrors the
   messaging composer's attach menu (.composer-attach-icon). */
.commentbox-attach-icon {
    width: 1.75rem;   /* match .btn-icon.btn-sm (emoji / + / send) */
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem; /* match .btn-icon.btn-sm glyph */
    color: #fff;
    flex: 0 0 auto;
}

.commentbox-attach-icon.image    { background: #635bff; }
.commentbox-attach-icon.document { background: #0ea5e9; }

/* ---------------------------------------------------------------------- */
/*  Post / Challenge composer (Mamix)                                        */
/*  Mirrors the comment box: a bordered editor surface with an inline-       */
/*  expand action toolbar (emoji / media / documents / tag-users + submit)   */
/*  that only appears once the editor is focused (or always in edit mode).   */
/* ---------------------------------------------------------------------- */
.post-composer-input {
    border: 1px solid var(--input-border, rgba(0, 0, 0, 0.12));
    border-radius: 0.5rem;
    background: var(--custom-white, #fff);
}

/* Accent the editor surface while it has focus. */
.post-composer-input:focus-within {
    border-color: rgba(118, 138, 254, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(118, 138, 254, 0.15);
}

.post-composer .social-composer-editor .ql-editor {
    min-height: 56px;
    max-height: 16rem;
    overflow-y: auto;
}

/* Action toolbar is hidden until the composer is expanded (focused / edit). */
.post-composer-extra {
    display: none;
    margin-top: 0.625rem;
}

.post-composer.expanded .post-composer-extra {
    display: block;
}