/*!
 * MODERN THREAD BODY - FLUENT DESIGN SYSTEM
 * Microsoft-inspired professional email/thread viewing
 * Version 2.0
 */

:root {
    /* Fluent Design System - Core Colors */
    --fluent-bg: #ffffff;
    --fluent-bg-secondary: #faf9f8;
    --fluent-bg-tertiary: #f3f2f1;
    --fluent-text: #323130;
    --fluent-text-secondary: #605e5c;
    --fluent-text-tertiary: #a19f9d;
    --fluent-accent: #0078d4;
    --fluent-accent-dark: #106ebe;
    --fluent-accent-light: #e6f2fa;
    --fluent-border: #edebe9;
    --fluent-border-dark: #c8c6c4;
    --fluent-success: #107c41;
    --fluent-warning: #ff8c00;
    --fluent-error: #d13438;
    
    /* Typography */
    --fluent-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --fluent-font-mono: 'Cascadia Code', 'Source Code Pro', 'Monaco', 'Consolas', monospace;
    
    /* Spacing */
    --fluent-space-xs: 4px;
    --fluent-space-sm: 8px;
    --fluent-space-md: 16px;
    --fluent-space-lg: 24px;
    --fluent-space-xl: 32px;
    
    /* Elevation */
    --fluent-shadow-sm: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.1);
    --fluent-shadow-md: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 0.6px 1.8px rgba(0,0,0,0.1);
    --fluent-shadow-lg: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.1);
    
    /* Animation */
    --fluent-transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    --fluent-transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Border Radius */
    --fluent-radius-sm: 2px;
    --fluent-radius-md: 4px;
    --fluent-radius-lg: 8px;
}

/* ===== RESET & NORMALIZE ===== */
.thread-body {
    margin: 0;
    padding: var(--fluent-space-lg);
    font-family: var(--fluent-font);
    font-size: 15px !important;
    line-height: 1.6;
    color: var(--fluent-text);
    background-color: var(--fluent-bg);
    word-wrap: break-word;
    overflow-x: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Fluent Design Container */
.thread-body > div {
    max-width: 100%;
    background: var(--fluent-bg);
}

/* ===== ELEMENTS ===== */
.thread-body article,
.thread-body aside,
.thread-body details,
.thread-body figcaption,
.thread-body figure,
.thread-body footer,
.thread-body header,
.thread-body hgroup,
.thread-body main,
.thread-body nav,
.thread-body section,
.thread-body summary {
    display: block;
    margin: 0 0 var(--fluent-space-lg);
}

/* ===== TYPOGRAPHY ===== */
.thread-body h1,
.thread-body h2,
.thread-body h3,
.thread-body h4,
.thread-body h5,
.thread-body h6,
.thread-body .h1,
.thread-body .h2,
.thread-body .h3,
.thread-body .h4,
.thread-body .h5,
.thread-body .h6 {
    font-family: var(--fluent-font);
    font-weight: 600;
    line-height: 1.25;
    color: var(--fluent-text);
    margin-top: var(--fluent-space-xl);
    margin-bottom: var(--fluent-space-sm);
    letter-spacing: -0.01em;
}

.thread-body h1:first-child,
.thread-body h2:first-child,
.thread-body h3:first-child,
.thread-body h4:first-child,
.thread-body h5:first-child,
.thread-body h6:first-child {
    margin-top: 0;
}

.thread-body h1,
.thread-body .h1 {
    font-size: 32px;
    font-weight: 600;
    margin-top: 0;
}

.thread-body h2,
.thread-body .h2 {
    font-size: 28px;
    font-weight: 600;
    border-bottom: 1px solid var(--fluent-border);
    padding-bottom: var(--fluent-space-sm);
}

.thread-body h3,
.thread-body .h3 {
    font-size: 22px;
    font-weight: 600;
}

.thread-body h4,
.thread-body .h4 {
    font-size: 18px;
    font-weight: 600;
}

.thread-body h5,
.thread-body .h5 {
    font-size: 16px;
    font-weight: 600;
}

.thread-body h6,
.thread-body .h6 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fluent-text-secondary);
}

.thread-body h1 small,
.thread-body h2 small,
.thread-body h3 small,
.thread-body h4 small,
.thread-body h5 small,
.thread-body h6 small,
.thread-body .h1 small,
.thread-body .h2 small,
.thread-body .h3 small,
.thread-body .h4 small,
.thread-body .h5 small,
.thread-body .h6 small {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--fluent-text-tertiary);
    margin-left: var(--fluent-space-xs);
}

/* ===== LINKS ===== */
.thread-body a:not(.button) {
    color: var(--fluent-accent) !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all var(--fluent-transition);
    font-weight: 500;
}

.thread-body a:not(.button):hover,
.thread-body a:not(.button):focus {
    color: var(--fluent-accent-dark) !important;
    border-bottom-color: var(--fluent-accent-dark);
}

.thread-body a:not(.button):focus {
    outline: 2px solid var(--fluent-accent);
    outline-offset: 2px;
    border-radius: var(--fluent-radius-sm);
}

/* ===== TEXT ELEMENTS ===== */
.thread-body p {
    margin: 0 0 var(--fluent-space-md);
    line-height: 1.6;
    color: var(--fluent-text);
}

.thread-body .lead {
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fluent-text-secondary);
    margin-bottom: var(--fluent-space-lg);
}

.thread-body strong,
.thread-body b {
    font-weight: 600;
}

.thread-body em,
.thread-body i {
    font-style: italic;
}

.thread-body small {
    font-size: 0.875em;
    color: var(--fluent-text-secondary);
}

.thread-body mark {
    background: #fff3cd;
    padding: 0 var(--fluent-space-xs);
    border-radius: var(--fluent-radius-sm);
    color: var(--fluent-text);
}

.thread-body del {
    color: var(--fluent-text-tertiary);
    text-decoration: line-through;
}

.thread-body ins {
    text-decoration: none;
    background: #dff6dd;
    padding: 0 var(--fluent-space-xs);
    border-radius: var(--fluent-radius-sm);
}

.thread-body abbr[title] {
    border-bottom: 1px dashed var(--fluent-border-dark);
    cursor: help;
    text-decoration: none;
}

.thread-body dfn {
    font-style: italic;
    font-weight: 500;
}

.thread-body cite {
    font-style: normal;
    color: var(--fluent-text-secondary);
}

/* ===== CODE & PRE ===== */
.thread-body code,
.thread-body kbd,
.thread-body pre,
.thread-body samp {
    font-family: var(--fluent-font-mono);
    font-size: 0.9em;
    background: var(--fluent-bg-secondary);
    border-radius: var(--fluent-radius-sm);
}

.thread-body code {
    padding: 0.2em 0.4em;
    color: var(--fluent-text);
    background: var(--fluent-bg-tertiary);
    border-radius: var(--fluent-radius-sm);
}

.thread-body pre {
    margin: 0 0 var(--fluent-space-md);
    padding: var(--fluent-space-md);
    background: var(--fluent-bg-secondary);
    border-radius: var(--fluent-radius-md);
    border: 1px solid var(--fluent-border);
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}

.thread-body pre code {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 1em;
    color: var(--fluent-text);
}

.thread-body kbd {
    padding: 0.2em 0.4em;
    background: var(--fluent-text);
    color: var(--fluent-bg);
    border-radius: var(--fluent-radius-sm);
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

/* ===== QUOTES ===== */
.thread-body blockquote {
    margin: 0 0 var(--fluent-space-lg);
    padding: var(--fluent-space-md) var(--fluent-space-lg);
    border-left: 4px solid var(--fluent-accent-light);
    background: var(--fluent-bg-secondary);
    border-radius: 0 var(--fluent-radius-md) var(--fluent-radius-md) 0;
    color: var(--fluent-text-secondary);
}

.thread-body blockquote p {
    margin-bottom: var(--fluent-space-sm);
    font-weight: 400;
    line-height: 1.6;
}

.thread-body blockquote p:last-child {
    margin-bottom: 0;
}

.thread-body blockquote small {
    display: block;
    margin-top: var(--fluent-space-sm);
    color: var(--fluent-text-tertiary);
    font-size: 0.875em;
}

.thread-body blockquote small:before {
    content: '\2014 \00A0';
}

.thread-body blockquote.pull-right {
    border-left: none;
    border-right: 4px solid var(--fluent-accent-light);
    text-align: right;
}

.thread-body q {
    quotes: '"' '"' "'" "'";
    font-style: italic;
}

.thread-body q:before {
    content: open-quote;
}

.thread-body q:after {
    content: close-quote;
}

/* ===== LISTS ===== */
.thread-body ul,
.thread-body ol {
    margin: 0 0 var(--fluent-space-md);
    padding-left: var(--fluent-space-xl);
}

.thread-body li {
    margin-bottom: var(--fluent-space-xs);
    line-height: 1.6;
}

.thread-body li:last-child {
    margin-bottom: 0;
}

.thread-body ul ul,
.thread-body ol ul,
.thread-body ul ol,
.thread-body ol ol {
    margin: var(--fluent-space-xs) 0 0;
    padding-left: var(--fluent-space-xl);
}

.thread-body .list-unstyled {
    padding-left: 0;
    list-style: none;
}

.thread-body .list-inline {
    padding-left: 0;
    list-style: none;
}

.thread-body .list-inline > li {
    display: inline-block;
    padding: 0 var(--fluent-space-sm);
    border-right: 1px solid var(--fluent-border);
}

.thread-body .list-inline > li:last-child {
    border-right: none;
}

/* ===== TABLES ===== */
.thread-body table {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--fluent-space-lg);
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--fluent-bg);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-md);
    overflow: hidden;
}

.thread-body table > thead > tr > th,
.thread-body table > thead > tr > td,
.thread-body table > tbody > tr > th,
.thread-body table > tbody > tr > td,
.thread-body table > tfoot > tr > th,
.thread-body table > tfoot > tr > td {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    line-height: 1.6;
    vertical-align: top;
    border-bottom: 1px solid var(--fluent-border);
    text-align: left;
}

.thread-body table > thead > tr > th,
.thread-body table > thead > tr > td {
    background: var(--fluent-bg-secondary) !important;
    font-weight: 600;
    color: var(--fluent-text);
    border-bottom: 2px solid var(--fluent-border-dark);
}

.thread-body table > tbody > tr:last-child > td {
    border-bottom: none;
}

.thread-body table > tbody > tr:hover {
    background: var(--fluent-bg-tertiary);
}

.thread-body table th {
    font-weight: 600;
}

.thread-body table td[class*="col-"],
.thread-body table th[class*="col-"] {
    float: none;
    display: table-cell;
}

/* ===== HORIZONTAL RULES ===== */
.thread-body hr {
    margin: var(--fluent-space-lg) 0;
    border: 0;
    border-top: 1px solid var(--fluent-border);
    height: 1px;
    background: none;
}

/* ===== MEDIA ===== */
.thread-body img,
.thread-body iframe,
.thread-body object,
.thread-body embed,
.thread-body video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.thread-body img {
    border-radius: var(--fluent-radius-md);
    box-shadow: var(--fluent-shadow-sm);
}

.thread-body iframe {
    border: none;
    margin-bottom: var(--fluent-space-md);
}

/* ===== IMAGE HOVER ===== */
.image-hover {
    display: inline-block;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--fluent-radius-md);
}

.image-hover .caption {
    position: absolute;
    right: var(--fluent-space-sm);
    bottom: var(--fluent-space-sm);
    padding: var(--fluent-space-xs) var(--fluent-space-sm);
    background: rgba(27, 26, 25, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    font-size: 12px;
    border-radius: var(--fluent-radius-sm);
    opacity: 0;
    transform: translateY(4px);
    transition: all var(--fluent-transition-slow);
}

.image-hover:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

/* ===== NON-LOCAL IMAGE ===== */
.thread-body div.non-local-image {
    width: auto;
    height: auto;
    max-width: 100%;
    min-height: 120px;
    background: linear-gradient(145deg, var(--fluent-bg-secondary), var(--fluent-bg-tertiary));
    border-radius: var(--fluent-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== PAGE HEADER ===== */
.thread-body .page-header {
    padding-bottom: var(--fluent-space-sm);
    margin: var(--fluent-space-xl) 0 var(--fluent-space-lg);
    border-bottom: 2px solid var(--fluent-border);
    position: relative;
}

.thread-body .page-header:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--fluent-accent);
}

/* ===== ADDRESS ===== */
.thread-body address {
    display: block;
    margin-bottom: var(--fluent-space-lg);
    font-style: normal;
    line-height: 1.6;
    color: var(--fluent-text-secondary);
    padding: var(--fluent-space-md);
    background: var(--fluent-bg-secondary);
    border-radius: var(--fluent-radius-md);
    border-left: 4px solid var(--fluent-accent);
}

/* ===== THREAD ENTRY TABLE ===== */
table.thread-entry {
    table-layout: fixed;
    width: 100%;
    border: none;
    background: transparent;
}

table.thread-entry th {
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    font-weight: normal;
    background: transparent !important;
}

table.thread-entry th div span {
    vertical-align: middle;
}

table.thread-entry th div .title {
    font-weight: 600;
    color: var(--fluent-text);
}

table.thread-entry th .textra {
    margin-right: var(--fluent-space-md);
    display: inline-block;
    color: var(--fluent-text-secondary);
    font-size: 0.9em;
}

/* ===== SR ONLY ===== */
.thread-body .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .thread-body {
        padding: var(--fluent-space-md);
        font-size: 14px !important;
    }
    
    .thread-body h1,
    .thread-body .h1 {
        font-size: 28px;
    }
    
    .thread-body h2,
    .thread-body .h2 {
        font-size: 24px;
    }
    
    .thread-body h3,
    .thread-body .h3 {
        font-size: 20px;
    }
    
    .thread-body blockquote {
        padding: var(--fluent-space-sm) var(--fluent-space-md);
        margin-left: 0;
        margin-right: 0;
    }
    
    .thread-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .thread-body .list-inline > li {
        display: block;
        padding: var(--fluent-space-xs) 0;
        border-right: none;
        border-bottom: 1px solid var(--fluent-border);
    }
    
    .thread-body .list-inline > li:last-child {
        border-bottom: none;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .thread-body {
        --fluent-bg: #1b1a19;
        --fluent-bg-secondary: #252423;
        --fluent-bg-tertiary: #323130;
        --fluent-text: #ffffff;
        --fluent-text-secondary: #c8c6c4;
        --fluent-text-tertiary: #8a8886;
        --fluent-border: #3b3a39;
        --fluent-border-dark: #4d4c4b;
        --fluent-accent-light: #1e3b4a;
    }
    
    .thread-body pre {
        background: #2b2b2b;
        border-color: #404040;
    }
    
    .thread-body code {
        background: #2b2b2b;
    }
    
    .thread-body mark {
        background: #4a3a1e;
        color: #ffffff;
    }
    
    .thread-body ins {
        background: #1e3a2a;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .thread-body {
        background: white;
        color: black;
        font-size: 12pt !important;
        line-height: 1.5;
    }
    
    .thread-body a:not(.button) {
        color: black !important;
        text-decoration: underline;
    }
    
    .thread-body pre,
    .thread-body blockquote {
        border: 1px solid #ddd;
        background: none;
    }
    
    .thread-body h2 {
        border-bottom: 1px solid #ddd;
    }
    
    .image-hover .caption {
        display: none;
    }
}

/* ===== LEGACY COMPATIBILITY ===== */
.thread-body p.MsoNormal,
.thread-body li.MsoNormal,
.thread-body div.MsoNormal,
.thread-body p.MsoPlainText,
.thread-body li.MsoPlainText,
.thread-body div.MsoPlainText {
    margin: 0;
    margin-bottom: .0001pt;
    line-height: normal;
}