/* profile-board.css: Profile message board and the titled-companion nav widget. */
/* ===== Profile message board (guestbook-style comments) ===== */
.profile-comments-panel { display: grid; gap: 14px; }

.profile-comment-form { display: grid; gap: 8px; }
.profile-comment-form textarea {
    width: 100%; resize: vertical; min-height: 60px;
    padding: 8px 10px; font-family: var(--font-body); font-size: 0.95rem;
}
.profile-comment-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-comment-form__count { color: var(--text-muted); font-size: 0.8rem; }
.profile-comment-form__blocked { margin: 0; }

.profile-comments-count { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 8px; }
.profile-comments-count:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* The scroll box: a fixed viewport onto a potentially long board, so the
   profile page itself doesn't grow unbounded with every message left on it.
   overscroll-behavior keeps a mouse-wheel scroll at the bottom of the box
   from bleeding into scrolling the whole profile page underneath it. */
.profile-comments-scroll {
    display: grid; gap: 10px;
    max-height: 420px; overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px;
}

.profile-comment-row {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}
.profile-comment-row__meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    font-size: 0.85rem; margin-bottom: 6px;
}
.profile-comment-row__author { font-weight: 600; }
.profile-comment-row__date { color: var(--text-muted); }
.profile-comment-row__body { line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; margin: 0; }
.profile-comment-row__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.profile-comment-row__actions form { margin: 0; }
.profile-comment-row__report-form { margin-top: 8px; display: grid; gap: 8px; }
.profile-comment-row__report-form textarea { width: 100%; }
.profile-comment-row__report-form label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.profile-comment-row__report-form .btn { margin-right: 6px; }
.profile-comment-row__reply-form { margin-top: 8px; display: grid; gap: 8px; }
.profile-comment-row__reply-form textarea { width: 100%; }
.profile-comment-row__reply-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* Indented, left-rule reply thread: one level deep only (see ProfileComment.parent),
   so this never has to nest against itself past a single --reply row. Replies render
   as plain list items, not their own bordered/background box (the base .profile-
   comment-row treatment): a reply already sits inside its parent's indented column,
   so boxing it too read as a stack of separate cards rather than one message with
   responses underneath it. A hairline border-top between consecutive replies is what
   keeps them from reading as one continuous paragraph now that the boxes are gone. */
.profile-comment-replies { display: grid; gap: 10px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border-subtle); }
.profile-comment-replies:empty { display: none; margin-top: 0; }
.profile-comment-row--reply { padding: 0; border: 0; border-radius: 0; background: none; }
.profile-comment-row--reply + .profile-comment-row--reply { padding-top: 10px; border-top: 1px solid var(--border-subtle); }

.profile-comment-report-review { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.profile-comment-report-review form { margin: 0; }

@media (width < 700px) {
    .profile-comments-scroll { max-height: 320px; }
}

@media (pointer: coarse) {
    .profile-comment-row__actions .btn,
    .profile-comment-row__report-form .btn,
    .profile-comment-row__reply-form .btn,
    .profile-comment-form__footer .btn { min-height: 44px; }
}

/* ---- Titled-companion nav widget: sidebar rail + drawer copies (pet_detail's own
   Companion rank panel and profile card use their own focused treatments while
   .pet-title-form below remains shared). One contiguous block, appended here per the usual
   "promoting a whole feature is one contiguous edit" convention. Every color is an
   existing token, so all Legacy palettes and both Frontier modes come along for free;
   the coarse-pointer floor sits at the end of this block for the usual cascade reason. */
.pet-title-nav { margin: 0 0 10px; }
.pet-title-nav__row { display: flex; align-items: stretch; gap: 6px; }
.pet-title-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--flux-tint, var(--color-primary)) 35%, var(--border-color));
    background: color-mix(in srgb, var(--flux-tint, var(--color-primary)) 6%, var(--bg-surface));
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pet-title-nav__link:focus-visible { outline: 2px solid var(--flux-tint, var(--color-primary)); outline-offset: 2px; }
.pet-title-nav__link--vacant,
.pet-title-nav__link--empty {
    border-style: dashed;
    background: var(--bg-subtle);
}
/* Void Flux tint: ambient only, scoped to the filled state (see the template comment).
   Each flux sets a local --flux-tint that the rules above already key off, so the base
   .pet-title-nav__link styling never needs to know these modifiers exist. */
.pet-title-nav__link--flux-drizzle { --flux-tint: var(--color-warning); }
.pet-title-nav__link--flux-aurora { --flux-tint: var(--color-violet); }
.pet-title-nav__link--flux-fog { --flux-tint: var(--color-error); }
.pet-title-nav__link--flux-comet { --flux-tint: var(--color-info); }
.pet-title-nav__portrait {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
}
.pet-title-nav__portrait img { width: 100%; height: 100%; object-fit: cover; }
.pet-title-nav__portrait--icon { border-style: dashed; font-size: 1rem; }
.pet-title-nav__placeholder { font-size: 0.95rem; }
/* A held rank gets a persistent glow ring plus a one-shot sheen the moment it renders,
   echoing .mentor__sheen's "live signal" treatment on Vesper's own portrait. The glow
   never animates (this widget is on every page, not a one-off reveal, so a perpetual
   loop here would just be nagging); only the sheen plays, and only once per render, same
   "each visit, her signal re-forms" idea. overflow:hidden on the portrait already clips
   the sheen pseudo-element to the circle; box-shadow paints outside that box regardless
   of the element's own overflow, so the glow isn't clipped by it. position:relative here
   is load-bearing, not decorative: see CLAUDE.md "A dropdown's wrapper must establish a
   containing block" — without it the sheen's inset:0 resolves against whatever ancestor
   happens to be positioned instead of this 36px circle.

   An earlier pass reshaped this into a shield/plaque silhouette via clip-path (a flat top
   tapering to a point, meant to read as an insignia rather than another avatar). Reverted:
   it looked off on mobile/tablet. Every other portrait in this game is a circle, and a
   lone angular clip-path among them read as a rendering glitch rather than a deliberate
   plaque, especially at 36px where the diagonal edges alias more visibly than a
   border-radius circle does. Keep new "flare" experiments here to glow/color/motion, not
   silhouette: the shape is the one thing players have already flagged as wrong. */
.pet-title-nav__portrait--filled {
    position: relative;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--flux-tint, var(--color-primary)) 50%, transparent),
        0 0 8px 1px color-mix(in srgb, var(--flux-tint, var(--color-primary)) 35%, transparent);
}
.pet-title-nav__portrait--filled::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%,
        color-mix(in srgb, var(--flux-tint, var(--color-primary)) 65%, transparent) 50%, transparent 60%);
    mix-blend-mode: screen;
    animation: pet-title-sheen 1.6s ease-out 0.2s both;
}
@keyframes pet-title-sheen {
    from { transform: translateX(-130%); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}
.pet-title-nav__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.pet-title-nav__rank {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--flux-tint, var(--color-primary));
}
.pet-title-nav__name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pet-title-nav__name--muted { color: var(--text-muted); font-weight: 500; font-size: 0.82rem; }
.pet-title-nav--drawer { margin: 0 0 12px; }

/* Quick-assign popover: .pet-title-nav__quickedit is the containing block the absolutely
   positioned popover resolves against (see CLAUDE.md "A dropdown's wrapper must
   establish a containing block" — an unpositioned wrapper here renders the popover a
   full viewport away from its trigger, not merely off by a few pixels). */
.pet-title-nav__quickedit { position: relative; flex: 0 0 auto; }
.pet-title-nav__quickedit-btn {
    height: 100%;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pet-title-nav__quickedit-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pet-title-nav__popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pet-title-quickform { display: flex; flex-direction: column; gap: 8px; }
.pet-title-quickform__field { display: block; }
.pet-title-quickform select { width: 100%; }
.pet-title-quickform__loading { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); }

.pet-title-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pet-title-form select { max-width: 220px; }
.pet-title-form__field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pet-title-form__field label { font-size: 0.9rem; color: var(--text-secondary); }

/* :hover paired with :focus-visible above is split per the house rule: guarding the pair
   would delete keyboard focus styling on every touch device (a tapped element keeps its
   hover state until something else is tapped otherwise, which reads as permanently
   selected — see CLAUDE.md "Every :hover rule lives inside @media (hover: hover)"). */
@media (hover: hover) {
    .pet-title-nav__link:hover {
        background: color-mix(in srgb, var(--flux-tint, var(--color-primary)) 12%, var(--bg-surface));
        border-color: color-mix(in srgb, var(--flux-tint, var(--color-primary)) 55%, var(--border-color));
    }
    .pet-title-nav__link--vacant:hover,
    .pet-title-nav__link--empty:hover { background: var(--bg-hover); }
    .pet-title-nav__quickedit-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
    .pet-title-nav__link:hover .pet-title-nav__portrait--filled {
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--flux-tint, var(--color-primary)) 70%, transparent),
            0 0 12px 2px color-mix(in srgb, var(--flux-tint, var(--color-primary)) 55%, transparent);
    }
}

@media (pointer: coarse) {
    .pet-title-nav__link { min-height: 44px; }
    .pet-title-nav__quickedit-btn { min-height: 44px; min-width: 44px; }
}