/* ================================================
   DISCORD-LIKE THREAD STYLE FOR XENFORO
   Created: 2026-07-11
   ================================================ */

/* Import Discord fonts - gg sans (primary) with fallback to Whitney */
@import url('https://cdn.jsdelivr.net/npm/@discord/fonts@1.0.0/fonts.css');

/* ================================================
   GLOBAL DISCORD FONT SETTINGS
   ================================================ */
body,
.p-body,
.message-body,
.message-content,
.message-inner,
.bbWrapper,
input,
textarea,
select,
button {
    font-family: 'gg sans', 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.375;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   DISCORD DARK THEME COLORS
   ================================================ */
:root {
    --discord-bg-primary: #36393f;
    --discord-bg-secondary: #2f3136;
    --discord-bg-tertiary: #202225;
    --discord-bg-hover: #34373c;
    --discord-text-normal: #dcddde;
    --discord-text-muted: #72767d;
    --discord-text-link: #00b0f4;
    --discord-accent: #5865f2;
    --discord-border: #202225;
    --discord-red: #ed4245;
    --discord-green: #3ba55d;
    --discord-yellow: #faa61a;
}

/* ================================================
   THREAD CONTAINER & BACKGROUND
   ================================================ */
.p-body-inner,
.p-body-content {
    background-color: var(--discord-bg-secondary) !important;
}

.block-container {
    background-color: var(--discord-bg-secondary) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ================================================
   MESSAGE/POST CONTAINER - DISCORD STYLE
   ================================================ */
.message,
.message--post {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 8px 16px 8px 72px !important;
    position: relative;
    transition: background-color 0.1s ease;
}

.message:hover {
    background-color: var(--discord-bg-hover) !important;
}

.message-cell--main {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Remove default XenForo borders and backgrounds */
.message-inner,
.message-cell,
.message-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ================================================
   AVATAR - DISCORD STYLE (Left aligned, circular)
   ================================================ */
.message-avatar-wrapper {
    position: absolute !important;
    left: 16px !important;
    top: 8px !important;
    width: 40px !important;
    height: 40px !important;
}

.message-avatar .avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
}

.message-avatar {
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================================
   USERNAME & USER INFO - DISCORD STYLE
   ================================================ */
.message-userDetails {
    margin-bottom: 4px !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.message-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--discord-text-normal) !important;
    display: inline-block;
    margin: 0 !important;
    line-height: 1.375;
}

.username {
    color: var(--discord-text-normal) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-decoration: none !important;
}

.username:hover {
    text-decoration: underline !important;
}

/* Staff/Admin badges with Discord colors */
.message-name .label--staff,
.message-name .label--admin {
    background-color: var(--discord-accent) !important;
    color: white !important;
    border-radius: 3px !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-left: 4px !important;
    vertical-align: middle;
}

/* ================================================
   TIMESTAMP - DISCORD STYLE
   ================================================ */
.message-attribution-main,
.message-date {
    font-size: 12px !important;
    color: var(--discord-text-muted) !important;
    font-weight: 500 !important;
    display: inline-block;
    margin-left: 4px !important;
}

.message-attribution-main a,
.message-date a {
    color: var(--discord-text-muted) !important;
    text-decoration: none !important;
}

.message-attribution-main a:hover,
.message-date a:hover {
    color: var(--discord-text-normal) !important;
    text-decoration: underline !important;
}

.u-dt {
    color: var(--discord-text-muted) !important;
    font-size: 12px !important;
}

/* ================================================
   MESSAGE CONTENT - DISCORD STYLE
   ================================================ */
.message-body {
    margin-top: 4px !important;
    color: var(--discord-text-normal) !important;
    font-size: 16px !important;
    line-height: 1.375 !important;
    word-wrap: break-word;
}

.message-content {
    color: var(--discord-text-normal) !important;
    font-size: 16px !important;
}

.bbWrapper {
    color: var(--discord-text-normal) !important;
    font-size: 16px !important;
    line-height: 1.375 !important;
}

/* Links in messages - Discord blue */
.message-body a,
.bbWrapper a {
    color: var(--discord-text-link) !important;
    text-decoration: none !important;
}

.message-body a:hover,
.bbWrapper a:hover {
    text-decoration: underline !important;
}

/* ================================================
   CODE BLOCKS - DISCORD STYLE
   ================================================ */
.bbCodeBlock {
    background-color: var(--discord-bg-tertiary) !important;
    border: 1px solid #202225 !important;
    border-radius: 4px !important;
    margin: 8px 0 !important;
}

.bbCodeBlock-title {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--discord-text-normal) !important;
    border-bottom: 1px solid #202225 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
}

.bbCodeBlock-content {
    background-color: var(--discord-bg-tertiary) !important;
    color: var(--discord-text-normal) !important;
    padding: 12px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.bbCodeCode {
    background-color: var(--discord-bg-tertiary) !important;
    color: var(--discord-text-normal) !important;
    border: none !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
}

/* Inline code */
code {
    background-color: var(--discord-bg-tertiary) !important;
    color: var(--discord-text-normal) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
}

/* ================================================
   QUOTES - DISCORD STYLE
   ================================================ */
.bbCodeBlock--quote {
    background-color: transparent !important;
    border-left: 4px solid var(--discord-text-muted) !important;
    border-radius: 0 !important;
    margin: 8px 0 !important;
    padding-left: 12px !important;
}

.bbCodeBlock--quote .bbCodeBlock-content {
    background-color: transparent !important;
    color: var(--discord-text-normal) !important;
    padding: 0 !important;
}

blockquote {
    border-left: 4px solid var(--discord-text-muted) !important;
    background-color: transparent !important;
    padding-left: 12px !important;
    margin: 8px 0 !important;
    color: var(--discord-text-normal) !important;
}

/* ================================================
   REACTIONS/LIKES - DISCORD STYLE
   ================================================ */
.message-footer {
    margin-top: 8px !important;
    padding-top: 0 !important;
    border: none !important;
}

.reactionsBar {
    display: flex;
    gap: 4px;
    margin-top: 8px !important;
}

.reaction {
    background-color: rgba(79, 84, 92, 0.16) !important;
    border: 1px solid rgba(79, 84, 92, 0.48) !important;
    border-radius: 8px !important;
    padding: 3px 6px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.1s ease;
    font-size: 14px !important;
}

.reaction:hover {
    background-color: rgba(79, 84, 92, 0.24) !important;
    border-color: rgba(79, 84, 92, 0.64) !important;
}

.reaction--reacted {
    background-color: rgba(88, 101, 242, 0.15) !important;
    border-color: var(--discord-accent) !important;
}

.reaction-count {
    color: var(--discord-text-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ================================================
   MESSAGE ACTIONS - DISCORD STYLE (on hover)
   ================================================ */
.message-actionBar {
    position: absolute !important;
    top: -14px !important;
    right: 16px !important;
    background-color: var(--discord-bg-primary) !important;
    border: 1px solid var(--discord-border) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.message:hover .message-actionBar {
    opacity: 1;
}

.actionBar-action {
    background-color: transparent !important;
    color: var(--discord-text-muted) !important;
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    transition: all 0.1s ease;
}

.actionBar-action:hover {
    background-color: var(--discord-bg-hover) !important;
    color: var(--discord-text-normal) !important;
}

/* ================================================
   SIGNATURE - DISCORD STYLE
   ================================================ */
.message-signature {
    border-top: 1px solid var(--discord-border) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    color: var(--discord-text-muted) !important;
    font-size: 14px !important;
    opacity: 0.6;
}

/* ================================================
   ATTACHMENTS - DISCORD STYLE
   ================================================ */
.message-attachments {
    margin-top: 12px !important;
}

.attachment {
    background-color: var(--discord-bg-tertiary) !important;
    border: 1px solid var(--discord-border) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    margin: 4px 0 !important;
}

.attachment-icon {
    color: var(--discord-text-muted) !important;
}

/* ================================================
   EDITOR/REPLY BOX - DISCORD STYLE
   ================================================ */
.message-responseRow {
    background-color: var(--discord-bg-primary) !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    padding: 16px !important;
}

.input,
textarea,
.fr-element {
    background-color: var(--discord-bg-tertiary) !important;
    color: var(--discord-text-normal) !important;
    border: 1px solid var(--discord-border) !important;
    border-radius: 8px !important;
    padding: 11px 12px !important;
    font-family: 'gg sans', 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.375 !important;
}

.input:focus,
textarea:focus,
.fr-element:focus {
    border-color: var(--discord-accent) !important;
    outline: none !important;
}

.input::placeholder,
textarea::placeholder {
    color: var(--discord-text-muted) !important;
}

/* ================================================
   BUTTONS - DISCORD STYLE
   ================================================ */
.button,
.button--primary,
.button--cta {
    background-color: var(--discord-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: background-color 0.17s ease;
    text-transform: none !important;
}

.button:hover,
.button--primary:hover,
.button--cta:hover {
    background-color: #4752c4 !important;
}

.button--link {
    background-color: transparent !important;
    color: var(--discord-text-link) !important;
}

/* ================================================
   PAGINATION - DISCORD STYLE
   ================================================ */
.pageNav {
    background-color: transparent !important;
    border: none !important;
}

.pageNav-page,
.pageNav-jump {
    background-color: var(--discord-bg-primary) !important;
    color: var(--discord-text-normal) !important;
    border: 1px solid var(--discord-border) !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
}

.pageNav-page--current {
    background-color: var(--discord-accent) !important;
    color: white !important;
    border-color: var(--discord-accent) !important;
}

/* ================================================
   MEMBER INFO/SIDEBAR - DISCORD STYLE
   ================================================ */
.message-userExtras {
    color: var(--discord-text-muted) !important;
    font-size: 12px !important;
}

.userTitle {
    color: var(--discord-text-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* ================================================
   SCROLLBAR - DISCORD STYLE
   ================================================ */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background-color: var(--discord-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--discord-bg-tertiary);
    border: 4px solid var(--discord-bg-secondary);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #1a1c1f;
}

/* ================================================
   EMBEDS - DISCORD STYLE
   ================================================ */
.bbMediaWrapper {
    border-left: 4px solid var(--discord-accent) !important;
    background-color: var(--discord-bg-tertiary) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin: 8px 0 !important;
}

/* ================================================
   MENTIONS - DISCORD STYLE
   ================================================ */
.username--style1,
.username--style2,
a.username {
    background-color: rgba(88, 101, 242, 0.3) !important;
    color: #dee0fc !important;
    padding: 0 2px !important;
    border-radius: 3px !important;
}

.username--style1:hover,
.username--style2:hover,
a.username:hover {
    background-color: var(--discord-accent) !important;
    color: white !important;
}

/* ================================================
   RESPONSIVE - Mobile adjustments
   ================================================ */
@media (max-width: 768px) {
    .message,
    .message--post {
        padding: 8px 8px 8px 56px !important;
    }
    
    .message-avatar-wrapper {
        left: 8px !important;
    }
    
    .message-avatar .avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .message-name,
    .username {
        font-size: 14px !important;
    }
    
    .message-body,
    .message-content,
    .bbWrapper {
        font-size: 14px !important;
    }
}

/* ================================================
   DARK MODE ENHANCEMENTS
   ================================================ */
body.has-no-sidebar .p-body-inner {
    background-color: var(--discord-bg-secondary) !important;
}

.p-body-pageContent {
    background-color: transparent !important;
}

.block-body {
    background-color: transparent !important;
}

/* Thread title */
.p-title-value {
    color: var(--discord-text-normal) !important;
    font-weight: 600 !important;
}

/* Remove XenForo default styling */
.message-cell--user {
    display: none !important;
}

/* ================================================
   EMOJI & SMILIES - DISCORD STYLE
   ================================================ */
.smilie {
    height: 22px !important;
    width: 22px !important;
    vertical-align: middle;
    margin: 0 2px !important;
}

/* ================================================
   FINISH
   ================================================ */