/* Discussion drawer styles extracted from discussion-modal.js. */
/* ========== Discussion Drawer (FullscreenPanel member) ========== */
/* Positioning and animation handled by .fullscreen-panel base CSS */

/* Discussion panel body — light Utility family background */
#panel-discussion .fullscreen-panel__body {
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    /* Scope semantic tokens to light theme so children inherit light values */
    --surface-secondary: #f1f5f9;
    --surface-tertiary: #e2e8f0;
    --surface-primary: #fff;
    --surface-app: #e8edf4;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #fff;
    --border-default: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.15);
    --accent-primary: #1A8F80;
    --accent-primary-subtle: rgba(26, 143, 128, 0.08);
    --accent: #1A8F80;
    --interactive-hover: rgba(0, 0, 0, 0.04);
    /* Feed-card tokens — match the Paper Layer (feed page) appearance */
    --feed-card-bg: #fff;
    --feed-card-radius: var(--radius-2xl, 24px);
    --feed-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --feed-card-border: 1px solid rgba(0, 0, 0, 0.08);
    --feed-card-padding: 16px 24px 24px;
    --feed-card-avatar-size: 48px;
    --feed-card-avatar-badge-size: 32px;
    --feed-card-author-size: 16px;
    --feed-card-author-weight: 700;
    --feed-card-channel-size: 13px;
    --feed-card-body-size: 17px;
    --feed-card-body-leading: 1.6;
    --feed-card-action-size: 13px;
    --feed-card-action-weight: 600;
    --feed-card-action-color: #94a3b8;
    --feed-card-action-border: rgba(0, 0, 0, 0.1);
    --feed-card-action-radius: 9999px;
    --feed-card-action-padding: 8px 14px;
    --feed-card-clamp-lines: 3;
    --feed-card-grand-size: 30px;
    --feed-card-grand-weight: 600;
    --feed-card-grand-tracking: 0;
    --feed-card-image-height: 400px;
    --feed-card-tall-max: 600px;
    --feed-card-image-min-height: 280px;
    --feed-card-image-gradient: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 25%, transparent 55%, rgba(0,0,0,0.8) 100%);
    --feed-card-glass-bg: rgba(255,255,255,0.15);
    --feed-card-glass-border: rgba(255,255,255,0.3);
}

/* Chat input ALWAYS fixed at bottom - same position for chat and drawer.
   Uses left + right + auto margins so the pill centers within the main
   content column (matches the 680px content centering from house-detail.css
   line 921). */
.house-main-content .chat-input-container,
.chat-container .chat-input-container {
    position: fixed;
    bottom: 0;
    left: calc(var(--layout-rail-width, 88px) + var(--layout-sidebar-width, 240px));
    right: 0;
    z-index: 200;
    background: transparent;
    border-top: 0;
    padding: var(--space-3) var(--space-4);
    margin-left: auto;
    margin-right: auto;
}

/* Add padding to chat messages so content isn't hidden behind fixed input */
.chat-messages {
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .house-main-content .chat-input-container,
    .chat-container .chat-input-container {
        left: 0;
        right: 0;
    }
}

/* When right rail is visible (≥1024px), reserve its width + gap so the input
   stays centered under the chat content column instead of sliding left. */
@media (min-width: 1024px) {
    .house-main-content .chat-input-container,
    .chat-container .chat-input-container {
        right: calc(320px + var(--space-6));
    }
}

/* ========== Discussion Panel Body Layout ========== */
/* Flex column so reply bar pins at bottom, content scrolls independently */
#panel-discussion .fullscreen-panel__body {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* body itself doesn't scroll — content area does */
}

/* ========== Drawer Utility Bar ========== */
/* The discussion drawer uses the shared utility-bar pattern */
.discussion-drawer .utility-bar {
    flex-shrink: 0;
}

/* Lighten the chat input area when in discussion mode */
body.discussion-mode .chat-input-container {
    background: transparent;
}

/* When the discussion drawer is open it covers the right rail, so the input
   should span to the viewport right instead of reserving 220px for a rail
   that's no longer visible. Keeps the pill centered in the drawer body. */
body.discussion-mode .house-main-content .chat-input-container,
body.discussion-mode .chat-container .chat-input-container {
    right: 0;
}

/* House name badge — left zone next to back arrow */
.discussion-drawer .discussion-drawer-house-name {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent-dark);
    background: var(--accent-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.discussion-drawer .discussion-drawer-house-name:empty {
    display: none;
}

/* ========== Drawer Content ========== */
.discussion-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    padding-bottom: var(--space-6);
    -webkit-overflow-scrolling: touch;
}

/* Constrain the comments section to match the card width */
.discussion-drawer-content .discussion-comments {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== Post Styles ========== */
.discussion-post {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-default, #21262d);
}

.discussion-post--chat-source {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.discussion-post-header {
    margin-bottom: 12px;
}

.discussion-post-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 6px;
}

.breadcrumb-house {
    color: var(--accent, #1A8F80);
    font-weight: 500;
}

.breadcrumb-sep {
    color: var(--text-muted, #8b949e);
}

.breadcrumb-channel {
    color: var(--text-muted, #8b949e);
}

.discussion-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.discussion-post-author .avatar {
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    color: var(--text-primary, #e6edf3);
    font-weight: 500;
}

a.author-name--link {
    text-decoration: none;
    color: var(--text-primary, #e6edf3);
}

a.author-name--link:hover {
    color: var(--accent-primary, #14b8a6);
    text-decoration: underline;
}

.post-time, .comment-time {
    color: var(--text-muted, #8b949e);
    font-size: 12px;
}

.discussion-post-image img {
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 12px;
    display: block;
}

.discussion-post-content {
    color: var(--text-primary, #e6edf3);
    line-height: 1.6;
    margin-bottom: 12px;
}

.discussion-post-content a {
    color: var(--accent-primary, #58a6ff);
}

/* ========== Link Preview in Discussion Post ========== */
.discussion-post-link {
    margin-bottom: 12px;
}

.discussion-post-link a {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-default, #30363d);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.discussion-post-link a:hover {
    border-color: var(--border-strong, #484f58);
}

.discussion-post-link img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 300px;
}

.discussion-post-link .link-meta {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.discussion-post-link .link-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discussion-post-link .link-desc {
    font-size: 12px;
    color: var(--text-muted, #6e7681);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== App Embed in Discussion Post ========== */
.discussion-post-app-embed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.discussion-post-app-embed:hover {
    background: rgba(255, 255, 255, .07);
}
.discussion-post-app-embed__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.discussion-post-app-embed__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.discussion-post-app-embed__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.discussion-post-app-embed__desc {
    font-size: 12px;
    color: var(--text-muted, #8b949e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== Post Footer - Reddit-style horizontal layout ========== */
.discussion-post-footer {
    margin-top: 12px;
}

.post-actions-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.vote-btn:hover {
    background: var(--surface-tertiary, #21262d);
}

.vote-btn.upvote:hover,
.vote-btn.upvote.active {
    color: #ff4500;
}

.vote-btn.downvote:hover,
.vote-btn.downvote.active {
    color: #7193ff;
}

/* .vote-score inside comment headers — scoped to avoid overriding feed-card action pills */
.comment-header .vote-score {
    min-width: 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
}

.action-divider {
    width: 1px;
    height: 16px;
    background: var(--border-default, #30363d);
    margin: 0 8px;
}

.reply-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted, #8b949e);
    font-size: 13px;
}

.reply-indicator svg {
    opacity: 0.7;
}

/* ========== Comments Section ========== */
.discussion-comments {
    padding-top: 8px;
}

.comments-list {
    display: flex;
    flex-direction: column;
}

.no-comments {
    color: var(--text-muted, #8b949e);
    text-align: center;
    padding: 32px;
    font-size: 14px;
}

/* ========== Comment Styles with Thread Lines ========== */
.comment {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px 0;
    padding-left: 0;
    align-items: flex-start;
}

/* Left rail: avatar at top, vote stack below */
.comment-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 32px;
}

.comment-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.comment-vote .vote-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

.comment-vote .vote-btn:hover {
    background: var(--surface-tertiary, #21262d);
    color: var(--text-primary, #e6edf3);
}

.comment-vote .vote-btn.upvote.active {
    color: var(--accent-primary, #33e658);
}

.comment-vote .vote-btn.downvote.active {
    color: var(--color-red-500, #ff6b6b);
}

.comment-vote .vote-score {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
    min-width: 14px;
    text-align: center;
    line-height: 1;
}

/* Footer action row */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.comment-actions .reply-btn,
.comment-actions .comment-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-actions .reply-btn svg,
.comment-actions .comment-share-btn svg {
    width: 12px;
    height: 12px;
}

/* Thread line for nested comments - shows on left border */
.comment-thread-line {
    display: none;
}

/* Nested comments get left border as thread indicator */
.comment-replies {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 2px solid var(--border-default, #30363d);
}

.comment-replies .comment {
    padding-left: 0;
}

/* Visual indent levels with colored borders */
.comment-replies .comment-replies {
    border-left-color: #3d4450;
}

.comment-replies .comment-replies .comment-replies {
    border-left-color: #4a5568;
}

.comment-main {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.comment-header .avatar {
    border-radius: 50%;
    object-fit: cover;
}

.comment-content {
    color: var(--text-primary, #e6edf3);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.comment-content a {
    color: var(--accent-primary, #58a6ff);
}

.comment-header__spacer {
    flex: 1;
}

.comment-header .vote-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment-header .vote-score {
    font-size: 11px;
    min-width: 14px;
    text-align: center;
    color: var(--text-muted, #8b949e);
}

.reply-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #6e7681);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
}

.reply-btn:hover {
    background: var(--surface-tertiary, #21262d);
    color: var(--text-primary, #e6edf3);
}

.comment-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted, #6e7681);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}

.comment-share-btn svg {
    width: 12px;
    height: 12px;
}

.comment-share-btn:hover {
    background: var(--surface-tertiary, #21262d);
    color: var(--text-primary, #e6edf3);
}

.comment-replies {
    margin-top: 8px;
}

/* ========== Chat Source Badge ========== */
.chat-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 8px;
    background: var(--surface-tertiary, #21262d);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted, #8b949e);
}

/* ========== Start Discussion Prompt ========== */
.start-discussion-prompt {
    background: var(--surface-secondary, #161b22);
    border: 1px dashed var(--border-default, #30363d);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.start-discussion-prompt p {
    color: var(--text-muted, #8b949e);
    font-size: 14px;
    margin: 0;
}

/* ========== Error State ========== */
.discussion-error {
    text-align: center;
    padding: var(--space-10, 40px);
    color: var(--text-muted, #8b949e);
}

.discussion-error__message {
    margin: 0;
}

.discussion-error button {
    margin-top: var(--space-4, 16px);
    background: var(--surface-tertiary, #21262d);
    border: 1px solid var(--border-default, #30363d);
    color: var(--text-primary, #e6edf3);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}

/* ========== Loading State ========== */
.discussion-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted, #8b949e);
}

/* ========== Discussion Card Width Constraint ========== */
/* Match feed stream max-width so the post card doesn't stretch full-width */
.discussion-drawer-content .feed-card {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== Discussion Post — chrome-less variant ==========
   Reference design has the post body sit flat on the drawer surface (no card
   border, no shadow, no white box). Strip the standard feed-card chrome only
   when rendered inside the discussion drawer. */
.discussion-drawer-content .feed-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* Slim divider between post body and the comments thread, matching the hairline
   separator in the reference. */
.discussion-drawer-content .feed-card + .discussion-comments {
    border-top: 1px solid var(--border-subtle, #e6e8eb);
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-4, 16px);
}

/* ========== Discussion Drawer Header ==========
   Light surface with a yellow "DISCUSSION" pill on the left and a dark
   house · r/channel context pill on the right (matches reference). */
#panel-discussion .utility-bar.utility-bar--discussion {
    background: var(--surface-primary, #ffffff);
    border-bottom: 1px solid var(--border-subtle, #e6e8eb);
    color: var(--text-primary, #0d1117);
}

#panel-discussion .utility-bar--discussion .utility-bar__back {
    color: var(--text-primary, #0d1117);
}

.discussion-drawer-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-yellow-100, #fff4a3);
    color: var(--text-primary, #0d1117);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: var(--radius-full, 9999px);
    text-transform: uppercase;
}

.discussion-drawer-context-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-dark-900, #0d1117);
    color: var(--accent-primary, #33e658);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    white-space: nowrap;
}

.discussion-drawer-context-badge:empty {
    display: none;
}

/* ========== Built-in Reply Form (feed page fallback) ========== */
/* Reset to dark platform tones — scope dark tokens so we escape the light-theme overrides on the panel body.
   Matches the house chat-input-container styling (surface-primary bg, surface-secondary input, accent-primary send). */
.discussion-drawer-reply {
    display: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
    /* Re-scope tokens to dark platform palette */
    --surface-primary: #0d1117;
    --surface-secondary: #161b22;
    --border-default: #21262d;
    --text-primary: #e6edf3;
    --text-muted: #8b949e;
    --accent-primary: var(--color-orange-500, #F26A2C);
    background: var(--surface-primary);
    border-top: 1px solid var(--border-default);
}

.discussion-drawer-reply.visible {
    display: flex;
}

.discussion-reply-input {
    flex: 1;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: 22px;
    padding: var(--space-3) 18px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    min-height: 44px;
    line-height: 1.4;
    transition: border-color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.discussion-reply-input:focus {
    border-color: var(--color-orange-500, #F26A2C);
}

.discussion-reply-input::placeholder {
    color: var(--text-muted);
}

.discussion-reply-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-inverse, #fff);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast, 0.15s) var(--ease-default, ease), filter var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.discussion-reply-send:hover {
    filter: brightness(1.15);
}

/* No members panel: drawer extends to right edge */
.discussion-drawer--no-members {
    right: 0;
}

/* When built-in reply is visible, content needs less bottom padding */
.discussion-drawer:has(.discussion-drawer-reply.visible) .discussion-drawer-content {
    padding-bottom: 16px;
}

/* Comment highlight flash — used when navigating from a notification */
.comment--highlight {
    animation: commentFlash 2.5s ease-out;
    border-radius: 8px;
}

@keyframes commentFlash {
    0%   { background: rgba(20, 184, 166, 0.35); box-shadow: inset 0 0 0 2px rgba(20, 184, 166, 0.6), 0 0 12px rgba(20, 184, 166, 0.3); }
    30%  { background: rgba(20, 184, 166, 0.20); box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.35); }
    100% { background: transparent; box-shadow: none; }
}