/* Question page (Forum.cshtml) styles. A static file rather than an inline block so browsers
   cache it between question pages. Comment thread styles are in comments.css. */

.ql-editor {
    height: 135px !important
}

a{
    text-decoration: auto !important;
}

/* ── User-posted Quill HTML (question body, car info, answers) ──
   Embedded photos arrive with no size attributes (the sanitizer keeps only src), so without
   this a 480px image overflows a phone-width card and scrolls the page sideways. */
.rh-post-body {
    overflow-wrap: anywhere;
    min-width: 0;
}

.rh-post-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: .5rem 0;
    border-radius: .375rem;
}

/* Keep a tall portrait photo from filling the whole phone screen. */
@media (max-width: 575.98px) {
    .rh-post-body img {
        max-height: 60vh;
        width: auto;
    }
}

/* ── gnoz (AI answers) ──
   Colours come from Phoenix theme variables with literal fallbacks, so the cards
   follow light/dark like the rest of the page instead of pinning one palette. */
.rh-ai-cta {
    border: 1px dashed var(--phoenix-border-color, rgba(0,0,0,.15));
    background: var(--phoenix-body-highlight-bg, #f5f7fa);
}

.rh-ai-answer {
    border-left: 3px solid var(--phoenix-primary, #3874ff);
}

.rh-ai-banner {
    font-size: .8125rem;
    line-height: 1.4;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: var(--phoenix-body-highlight-bg, #f5f7fa);
    color: var(--phoenix-body-tertiary-color, #6e7891);
}

.rh-ai-banner strong {
    color: var(--phoenix-emphasis-color, #31374a);
}

.rh-answer-body .rh-ai-source-note {
    font-size: .8125rem;
    color: var(--phoenix-body-tertiary-color, #6e7891);
    margin-bottom: .75rem;
}

/* An unverified answer has to look different from a cited one at a glance,
   or the disclaimer is just words people skim past. */
.rh-answer-body .rh-ai-ungrounded {
    border-left: 3px solid var(--phoenix-warning, #e5780b);
    padding-left: .625rem;
}

.rh-answer-body ul.rh-ai-sources,
.rh-answer-body p.rh-ai-sources {
    font-size: .8125rem;
    color: var(--phoenix-body-tertiary-color, #6e7891);
    margin-bottom: .25rem;
}

.rh-ai-pending {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    color: var(--phoenix-body-tertiary-color, #6e7891);
}

/* ── Question / answer vote widget ──
   Vertical variant of the comments' .rh-vote-widget pill; state
   classes (rh-upvoted / rh-score-positive / …) are shared with it.
   Self-contained so it does not depend on comments.css. */
.rh-vote-widget.rh-vote-vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--phoenix-border-color, rgba(0,0,0,.15));
    border-radius: 20px;
    overflow: hidden;
    width: 36px;
    height: auto;
    user-select: none;
}

.rh-vote-vertical .rh-vote-btn {
    background: none;
    border: none;
    width: 100%;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    color: var(--phoenix-secondary-color, #8a93a2);
    transition: background .12s ease, color .12s ease;
    line-height: 1;
}

.rh-vote-vertical .rh-vote-btn:hover {
    background: var(--phoenix-emphasis-bg, rgba(0,0,0,.05));
}

.rh-vote-vertical .rh-vote-btn:active {
    transform: scale(.95);
}

.rh-vote-vertical .rh-vote-btn:focus-visible {
    outline: 2px solid var(--phoenix-primary, #3874ff);
    outline-offset: -2px;
}

.rh-vote-vertical .rh-vote-btn.rh-upvoted {
    color: var(--phoenix-success, #198754);
    background: rgba(var(--phoenix-success-rgb, 25,135,84), .1);
}

.rh-vote-vertical .rh-vote-btn.rh-downvoted {
    color: var(--phoenix-danger, #dc3545);
    background: rgba(var(--phoenix-danger-rgb, 220,53,69), .1);
}

.rh-vote-vertical .rh-vote-score {
    width: 100%;
    padding: .35rem 0;
    font-size: .85rem;
    font-weight: 700;
    border-top: 1px solid var(--phoenix-border-color, rgba(0,0,0,.12));
    border-bottom: 1px solid var(--phoenix-border-color, rgba(0,0,0,.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--phoenix-body-color);
    transition: color .15s ease;
}

.rh-vote-vertical .rh-vote-score.rh-score-positive { color: var(--phoenix-success, #198754); }
.rh-vote-vertical .rh-vote-score.rh-score-negative { color: var(--phoenix-danger,  #dc3545); }
.rh-vote-vertical .rh-vote-score.rh-score-zero     { color: var(--phoenix-secondary-color, #8a93a2); }