/* =========================================================
   search.css

   Owns search and people-finding surfaces:
     - User autocomplete dropdown (search page + compose @-mentions)
     - Search modal (pr25g) opened from the nav search icon
     - Recipient picker (pr25g) — chip-input for new conversation
       and send-post
     - People modal row hover (bugfix/nav-followup-people-
       dropdown-modal)

   Reference: markdown/design/DESIGN_DECISIONS_CSS_REFACTOR.md
   ========================================================= */

/* =========================================================
   User autocomplete dropdown
   Used by search_autocomplete.js (search page) and
   mention_autocomplete.js (compose textareas).
   ========================================================= */

.search-page form {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
    width: 100%;
}

.autocomplete-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.autocomplete-row:hover,
.autocomplete-row.is-selected {
    background: var(--bs-tertiary-bg);
}

.autocomplete-avatar,
.autocomplete-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.autocomplete-avatar-fallback {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.autocomplete-row-text {
    min-width: 0;
    flex-grow: 1;
}

.autocomplete-display-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-empty {
    padding: 12px;
    text-align: center;
}

.mention-dropdown {
    /* Positioned via JS for caret-relative placement. */
    width: auto;
    min-width: 240px;
}

/* =========================================================
   Search modal (pr25g)
   Opened from the nav search icon. Three tabs (users / posts
   / tags); body is populated by search_modal.js per query.
   ========================================================= */

.search-modal-header {
    /* Tighter than default modal-header padding so the large input feels
       front-and-center rather than buried. */
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    align-items: center;
}

.search-modal-input-wrap {
    /* Container exists for future affordances (loading spinner inside
       the input, a leading search icon, etc.). Today: just sizing. */
    min-width: 0;
}

.search-modal-input {
    /* Large, clean input. Less Bootstrap-y than the default form-control;
       borrows the visual weight from the nav and the compose modal. */
    font-size: 1.05rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.search-modal-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.search-modal-tabs {
    /* Snug against the body — no extra margin under the tabs. */
    margin-bottom: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.search-modal-tabs .nav-link {
    /* Tab buttons are styled as <button> not <a>; default browser button
       styling needs neutralizing. */
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--color-text-muted);
    padding: 0.5rem 0.875rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.search-modal-tabs .nav-link:hover {
    color: var(--bs-body-color);
    border-color: transparent;
}

.search-modal-tabs .nav-link.active {
    color: var(--color-accent);
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    font-weight: var(--font-weight-medium);
}

.search-modal-body {
    /* Min-height so the modal doesn't visually shrink/grow as the user
       types into an empty / loading / populated state. */
    min-height: 220px;
    padding: var(--space-3) var(--space-4);
}

.search-modal-footer {
    /* Quiet footer — the "see all" link is a small affordance, not
       a primary CTA. */
    padding: var(--space-2) var(--space-4);
    justify-content: flex-end;
}

.search-modal-footer a:hover {
    color: var(--bs-body-color);
    text-decoration: underline;
}

/* ---- JS-rendered rows inside .search-modal-body ---- */

.search-modal-list {
    display: flex;
    flex-direction: column;
}

.search-modal-row {
    /* Each result row is a flex strip: avatar + text block. The whole
       row is clickable (cursor pointer, hover background). */
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s ease;
}

.search-modal-row:hover,
.search-modal-row:focus-visible {
    background: var(--bs-tertiary-bg);
    outline: none;
}

.search-modal-row-avatar,
.search-modal-row-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.search-modal-row-avatar-fallback {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.search-modal-row-text {
    /* min-width: 0 so the truncate / line-clamp work inside a flex child. */
    min-width: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.search-modal-row-primary {
    font-weight: 500;
    color: var(--bs-body-color);
    /* For user rows, this is the display name. For post rows, it's a
       horizontal strip of name + handle + date + media hint. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-modal-row-secondary {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    /* For user rows this is the @handle on one line. For posts it's the
       body preview — the .search-modal-row-preview override handles the
       2-line clamp. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-modal-row-preview {
    /* 2-line clamp for post body previews. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--bs-body-color);
    /* Slightly larger than the default secondary text so the preview
       is the visual anchor of a post row. */
    font-size: 0.9rem;
    margin-top: 0.125rem;
}

.search-modal-row-post {
    /* Posts have more vertical content than users; align to the top so
       the avatar sits next to the name line rather than centered against
       a tall preview. */
    align-items: flex-start;
}

.search-modal-row-post .search-modal-row-avatar,
.search-modal-row-post .search-modal-row-avatar-fallback {
    /* A touch of top padding nudges the avatar onto the name-line baseline. */
    margin-top: 2px;
}

/* ---- Search PAGE post preview (matches modal preview clamp) ---- */

.search-post-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.search-post-row:hover .search-post-preview {
    /* Subtle hover affordance on the whole row — the link spans the
       preview so this catches the visual hover state. */
    color: var(--bs-body-color);
}

/* ---- Search PAGE tab strip ----
   Before pr25g the page only had one tab type so the tab strip was
   never rendered. Now with three types it shows, and Bootstrap's
   default --bs-nav-tabs-link-active-color makes the active tab text
   invisible against our body-bg in dark mode. Tokenize so the active
   tab uses the violet accent and stays readable.
   ============================================================ */

.search-page .nav-tabs {
    /* Quiet bottom border under the strip so the active tab visually
       sits on top of it. */
    border-bottom: 1px solid var(--bs-border-color);
}

.search-page .nav-tabs .nav-link {
    color: var(--color-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
    padding: 0.5rem 0.875rem;
    background: transparent;
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}

.search-page .nav-tabs .nav-link:hover {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border-color: transparent;
}

.search-page .nav-tabs .nav-link.active {
    color: var(--color-accent);
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    font-weight: var(--font-weight-medium);
}

/* =========================================================
   Recipient picker (pr25g)
   Chip-input replacement for the recipient SelectMultipleField
   (new_conversation.html) and SelectField (send_post.html).
   The shell mimics a single form-control; chips and input live
   inside it; the autocomplete dropdown anchors to the picker root.
   ========================================================= */

.recipient-picker {
    /* Position context for the absolutely-positioned dropdown. */
    position: relative;
}

.recipient-picker-shell {
    /* Looks like one Bootstrap form-control wrapping a chip strip + input. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    min-height: calc(1.5em + 0.75rem + 2px);
    cursor: text;
    transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.recipient-picker-shell:focus-within {
    /* Mimic Bootstrap's :focus state on form-control. */
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
    outline: none;
}

.recipient-chip-area {
    /* Wraps the chip pills. Sibling to the input. Both wrap together in
       the parent .recipient-picker-shell, so chips and input share lines. */
    display: contents;
}

.recipient-picker-input {
    /* Borderless input that grows to fill remaining space in the shell. */
    flex: 1 1 8rem;
    min-width: 8rem;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.125rem 0.25rem;
    font-size: 0.95rem;
    color: var(--bs-body-color);
}

.recipient-picker-input::placeholder {
    color: var(--color-text-muted);
}

/* ---- Chip pills ---- */

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.125rem 0.125rem 0.25rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--bs-body-color);
    max-width: 14rem;
}

.recipient-chip-avatar,
.recipient-chip-avatar-fallback {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.recipient-chip-avatar-fallback {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
}

.recipient-chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.recipient-chip-remove {
    /* Bare button — no border, no background. Sized to be a tappable
       target on mobile (24px circle is the minimum we can give it while
       keeping the chip compact). */
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    line-height: 1;
    font-size: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, color 0.1s ease;
}

.recipient-chip-remove:hover {
    background: var(--bs-secondary-bg);
    color: var(--color-danger);
}

.recipient-chip-remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* ---- Dropdown positioning inside the picker ---- */

.recipient-picker-dropdown {
    /* The factory-rendered dropdown lives as a sibling of the shell
       inside .recipient-picker. We position it just below the shell. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 4px;
    z-index: 1050;
}

/* ---- Reduced-motion ---- */

@media (prefers-reduced-motion: reduce) {
    .recipient-picker-shell,
    .recipient-chip-remove,
    .search-modal-row,
    .search-modal-input {
        transition: none;
    }
}

/* === === === bugfix/nav-followup-people-dropdown-modal — people modal row hover === === === */

/* People modal row — reuses the three-layer violet hover halo pattern
   from .notification-row (pr31). Overrides Bootstrap's default
   .list-group-item-action hover background so the halo isn't competing
   with a grey backdrop. z-index lifts the hovered row above siblings
   so the halo paints over the borders between rows.

   Pattern matches:
     - .notification-row hover (pr31)
     - .has-halo modal glow (compose, free-space modals)
   Same color, tighter mid/far blur — adjacent rows in a stacked list
   shouldn't bleed into each other. */
.people-modal-row {
    position: relative;
    z-index: 0;
    transition: box-shadow var(--transition-fast);
}

.people-modal-row:hover,
.people-modal-row:focus-visible {
    z-index: 1;
    background-color: transparent;
    color: var(--color-text);
    outline: none;
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(var(--color-halo-rgb), 0.45),
        0 0 12px 2px rgba(var(--color-halo-rgb), 0.22),
        0 0 32px 4px rgba(var(--color-halo-rgb), 0.10);
}

/* Match the modal's --radius-lg token directly rather than chasing
   --bs-modal-border-radius through the cascade. Bootstrap sets the
   modal's radius from --bs-border-radius-lg → --radius-lg anyway,
   so we land on the same value (14px). Using the root-level token
   means no cascade quirks can intervene. */
.people-modal-row:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}