@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Primary Colors */
    --ios-blue: #5AC8FA;
    --ios-blue-dark: #007AFF;
    --ios-gray: #E5E5EA;
    --ios-gray-dark: #D1D1D6;
    --ios-text: #000000;
    --ios-text-secondary: #8E8E93;
    
    /* Background Colors */
    --ios-bg: #F2F2F7;
    --ios-bg-secondary: #FFFFFF;
    
    /* Message Bubble Colors */
    --my-message-bg: var(--ios-blue);
    --my-message-text: #FFFFFF;
    --other-message-bg: var(--ios-gray);
    --other-message-text: var(--ios-text);
    
    /* Spacing */
    --message-spacing: 12px;
    --bubble-radius: 18px;
    --container-max-width: 800px;
    
    /* Transitions */
    --ios-transition: 0.2s ease;
}

/* Base Font Override */
* {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Preserve command styling - only apply font, remove other overrides */
span.command {
    all: unset !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    display: inline !important;
}

/* Body Background */
body {
    background: linear-gradient(180deg, #E5E5EA 0%, #FFFFFF 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    color: var(--ios-text) !important;
    line-height: 1.4 !important;
}

/* Main Container Centering */
#thread-container {
    max-width: var(--container-max-width) !important;
    margin: 20px auto 100px auto !important;
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

#threads {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Index Thread Container */
#index-thread-container {
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 20px auto !important;
    max-width: var(--container-max-width) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--ios-gray) !important;
}

/* Article/Post Base Styling - Remove Animations */
article.p {
    animation: none !important;
    transform: none !important;
    position: relative !important;
    margin: var(--message-spacing) 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 70% !important;
    clear: both !important;
}

/* Remove all inherited animations and transforms */
article.p > * {
    animation: none !important;
    transform: none !important;
}

article.p header {
    animation: none !important;
    transform: none !important;
}

blockquote {
    animation: none !important;
    transform: none !important;
}

/* Message Bubble Container */
.post-container {
    background: var(--other-message-bg) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin: 4px 0 !important;
    position: relative !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Message Alignment - Other Messages (Right) */
article.p:not(.my-post):not(#p0):not(.post-placeholder) {
    float: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: 30% !important;
    margin-right: 0 !important;
    max-width: 70% !important;
    width: 100% !important;
}

article.p:not(.my-post):not(#p0):not(.post-placeholder) .post-container {
    background: var(--other-message-bg) !important;
    color: var(--other-message-text) !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Message Alignment - My Messages (Left) - Blue Bubbles */
article.p.my-post,
article#p0,
article.reply-form.my-post {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 30% !important;
}

article.p.my-post .post-container,
article#p0 .post-container,
article.reply-form.my-post .post-container {
    background: var(--my-message-bg) !important;
    color: var(--my-message-text) !important;
}

/* Reply form shadow */
article.reply-form .post-container,
article#p0 .post-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Reply form transparency - More specific selectors */
article#p0.glass.p.reply-form {
    opacity: 0.65 !important;
}

article.glass.p.reply-form.my-post {
    opacity: 1 !important;
}

article.glass.p.reply-form:not(.my-post) {
    opacity: 0.65 !important;
}

/* When editing, need to override the above rules */
article#p0.glass.p.reply-form.editing {
    opacity: 1 !important;
}

article.glass.p.reply-form.editing {
    opacity: 1 !important;
}

/* Clean Message Bubbles - No Tails */
/* Removed bubble tails for cleaner iOS look */

/* Clear Floats */
article.p:after {
    content: "";
    display: table;
    clear: both;
}

/* Header Styling (Name/Time container) */
article.p header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    color: var(--ios-text-secondary) !important;
    position: relative !important;
}

/* User Name in Header */
article.p header .name {
    color: var(--ios-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* Timestamp Styling */
article.p time {
    background: transparent !important;
    color: var(--ios-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 4px !important;
    display: inline !important;
}

/* Position header based on message alignment */
article.p:not(.my-post):not(#p0):not(.post-placeholder) header {
    text-align: right !important;
    margin-right: 16px !important;
    margin-left: auto !important;
    width: fit-content !important;
    justify-self: flex-end !important;
}

article.p.my-post header,
article#p0 header,
article.reply-form.my-post header {
    text-align: left !important;
    margin-left: 16px !important;
}

/* Blockquote (Message Content) Styling */
article.p blockquote {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: inherit !important;
    text-shadow: none !important;
    min-height: auto !important;
    height: auto !important;
}

/* Smaller rounded buttons with grey border */
button, input[type="button"], input[type="submit"], .form-buttons a {
    background: var(--ios-blue) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--ios-gray) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: var(--ios-transition) !important;
    cursor: pointer !important;
    min-height: 32px !important;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background: var(--ios-blue-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

button:active, input[type="button"]:active, input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    background: var(--ios-blue-dark) !important;
}

/* Remove selection/focus border from buttons */
button:focus, button:focus-visible, 
input[type="button"]:focus, input[type="button"]:focus-visible,
input[type="submit"]:focus, input[type="submit"]:focus-visible {
    outline: none !important;
    border: 1px solid var(--ios-gray) !important;
}
}

/* MMS-Style Input Fields */
input[type="text"], textarea, select {
    background: var(--ios-bg-secondary) !important;
    border: 1px solid var(--ios-gray) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: var(--ios-text) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    transition: var(--ios-transition) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    min-height: 44px !important; /* MMS touch target */
}

input[type="text"]:focus, textarea:focus, select:focus {
    border-color: var(--ios-blue) !important;
    background: var(--ios-bg-secondary) !important;
    box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
}

/* Textarea specific styling */
textarea {
    resize: vertical !important;
    min-height: 100px !important;
    line-height: 1.4 !important;
}

/* MMS-Style Links */
a {
    color: var(--ios-blue) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: var(--ios-transition) !important;
}

a:hover {
    color: var(--ios-blue-dark) !important;
    text-shadow: none !important;
}

a:active {
    opacity: 0.5 !important;
}

/* Navigation Styling */
#banner {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: none !important;
    border-bottom: 1px solid var(--ios-gray) !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05) !important;
    animation: none !important;
}

#banner a[id^="banner-"] {
    /* Remove all styling overrides, but add light padding */
    all: revert !important;
    padding: 4px 8px !important;
}

#banner a[id^="banner-"]:hover {
    /* Remove hover overrides too */
    all: revert !important;
    padding: 4px 8px !important;
}

/* Board Navigation - Keep colors and font, remove background/border */
#board-navigation a {
    all: revert !important;
    color: var(--ios-blue) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#board-navigation a:hover {
    all: revert !important;
    color: var(--ios-blue-dark) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Aside Container and Asides - iOS Button/Card Style */
.aside-container {
    padding: 16px !important;
    margin: 16px 0 !important;
}

.aside-container aside {
    background: var(--ios-bg-secondary) !important;
    border: 1px solid var(--ios-gray) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    color: var(--ios-text) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: var(--ios-transition) !important;
}

aside {
    background: var(--ios-bg-secondary) !important;
    border: 1px solid var(--ios-gray) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    color: var(--ios-text) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: var(--ios-transition) !important;
}

aside:hover {
    background: var(--ios-gray) !important;
    border-color: var(--ios-gray-dark) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Style aside content like iOS buttons */
aside * {
    color: var(--ios-text) !important;
    font-weight: inherit !important;
    text-shadow: none !important;
}

/* Page Title iOS-Style Typography */
h1#page-title {
    color: var(--ios-text) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 32px auto 24px auto !important;
    text-shadow: none !important;
    letter-spacing: -0.5px !important;
    max-width: var(--container-max-width) !important;
}

span.title-mms {
    color: var(--ios-text) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
    margin: 20px auto !important;
    text-shadow: none !important;
    letter-spacing: -0.3px !important;
}

/* Responsive Design */

/* Mobile Devices (up to 700px) */
@media screen and (max-width: 700px) {
    #thread-container {
        padding: 10px !important;
    }
    
    article.p {
        max-width: 85% !important;
        margin: 8px 0 !important;
    }
    
    article.p:not(.my-post) {
        margin-left: 15% !important;
    }
    
    article.p.my-post {
        margin-right: 15% !important;
    }
    
    .post-container {
        padding: 10px 12px !important;
        font-size: 15px !important;
    }
    
    article.p blockquote {
        font-size: 15px !important;
    }
    
    /* Smaller bubble tails on mobile */
    article.p .post-container::after {
        border-width: 8px !important;
    }
    
    article.p:not(.my-post) .post-container::after {
        left: -6px !important;
    }
    
    article.p.my-post .post-container::after {
        right: -6px !important;
    }
}

/* Tablet Devices (701px to 900px) */
@media screen and (min-width: 701px) and (max-width: 900px) {
    article.p {
        max-width: 75% !important;
    }
    
    article.p:not(.my-post) {
        margin-left: 25% !important;
    }
    
    article.p.my-post {
        margin-right: 25% !important;
    }
}

/* Large Desktop (over 1200px) */
@media screen and (min-width: 1201px) {
    #thread-container {
        max-width: 900px !important;
    }
    
    article.p {
        max-width: 60% !important;
    }
    
    article.p:not(.my-post) {
        margin-left: 40% !important;
    }
    
    article.p.my-post {
        margin-right: 40% !important;
    }
}

/* Images and Media */
figure {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: var(--ios-transition) !important;
    overflow: hidden !important;
    animation: none !important;
}

figure:hover {
    transform: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

figure img, figure video {
    border-radius: 12px !important;
    max-width: 100% !important;
    height: auto !important;
    filter: none !important;
    animation: none !important;
    transition: var(--ios-transition) !important;
}

figure img:hover, figure video:hover {
    opacity: 0.9 !important;
}

/* Image and Text Spacing - Proper spacing when images and text coexist */
article.p .post-container:has(figure) blockquote {
    margin-left: 12px !important;
    padding-left: 8px !important;
}

article.p .post-container figure + blockquote {
    margin-left: 16px !important;
}

/* Ensure text doesn't crowd images in message bubbles */
article.p .post-container {
    gap: 8px !important;
}

/* Quotes/Reply Styling (MMS-like reply preview) */
a.quote {
    background: rgba(90, 200, 250, 0.1) !important;
    color: var(--ios-blue) !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(90, 200, 250, 0.3) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Disable problematic animations and effects */
img, video, a img, .expanded, [class*="-panel"], [id*="-panel"], [class*="banner-"], [id*="banner-"] {
    animation: none !important;
    filter: none !important;
}

/* Modal/Popup Styling */
.modal, .popup-menu {
    background: var(--ios-bg-secondary) !important;
    border: 1px solid var(--ios-gray) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    animation: none !important;
}

.popup-menu * {
    color: var(--ios-text) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* Additional MMS-Style Scrollbar */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--ios-gray-dark) !important;
    border-radius: 4px !important;
    border: none !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ios-text-secondary) !important;
}

/* Smooth Transitions for Message Appearance */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

article.p:not(.reply-form):not(#p0) {
    animation: fadeSlideIn 0.45s ease forwards !important;
}

article.p:hover {
    transition: none !important;
    background: none !important;
}

/* File Info Styling */
.fileinfo {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--ios-text-secondary) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 4px 0 !important;
}

/* Text Selection */
::selection {
    background: rgba(90, 200, 250, 0.3) !important;
    color: var(--ios-text) !important;
}

::-moz-selection {
    background: rgba(90, 200, 250, 0.3) !important;
    color: var(--ios-text) !important;
}

/* Hide horizontal separators to keep clean look */
hr {
    display: none !important;
}

/* Subtle hover effects for interactive elements */
article.p .post-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: box-shadow var(--ios-transition) !important;
}

/* Focus states for accessibility */
button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--ios-blue) !important;
    outline-offset: 2px !important;
}

/* Notification styling */
.notification {
    background: var(--ios-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3) !important;
}

/* Special text styling overrides - Ensure Visibility */
.greentext, .redtext, em.greentext, em.redtext {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    display: inline !important;
}

.greentext, em.greentext {
    color: #34C759 !important; /* iOS green */
}

.redtext, em.redtext {
    color: #FF3B30 !important; /* iOS red */
}

/* Fix greentext specifically in blockquotes and aux-inner */
blockquote .greentext,
blockquote em.greentext,
.aux-inner .greentext,
.aux-inner em.greentext,
span.aux-inner .greentext,
span.aux-inner em.greentext {
    color: #34C759 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Quote Links - Ensure Visibility */
a.quote {
    background: rgba(90, 200, 250, 0.15) !important;
    color: var(--ios-blue) !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(90, 200, 250, 0.3) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Post Links - Quote Numbers and Indicators */
.post-link, a.post-link {
    color: var(--ios-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.post-link-id {
    color: var(--ios-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 500 !important;
}

.post-link-indicator {
    color: var(--ios-text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 12px !important;
    margin-left: 4px !important;
}

/* Go-to-post links */
.go-to-post {
    color: var(--ios-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

/* Fix quote text colors in my-post messages (white text on blue) */
article.p.my-post .post-link,
article.p.my-post a.post-link,
article.p.my-post .post-link-id,
article.p.my-post .go-to-post {
    color: white !important;
}

article.p.my-post .post-link-indicator {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Fix span.complete-result text color in my-post messages */
article.p.my-post span.complete-result,
article.p.my-post .complete-result {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Blockquote text - ensure it's visible */
blockquote {
    color: var(--ios-text) !important;
    opacity: 1 !important;
}

/* Fix visibility issues for all quote content */
.aux-inner,
.aux-inner *,
span.aux-inner,
span.aux-inner * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    background: transparent !important;
}

/* Ensure blockquote content is visible */
blockquote,
blockquote *,
article.p blockquote,
article.p blockquote * {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--ios-text) !important;
}

/* Override any transparency that might hide text */
article.p blockquote,
article.p .greentext,
article.p .redtext,
article.p a.quote,
.post-link,
.post-link *,
.post-link-id,
.post-link-indicator {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* Fix embedded articles in quotes - make them look like regular messages */
blockquote article,
.aux-inner article,
span.aux-inner article,
blockquote article.p,
.aux-inner article.p,
span.aux-inner article.p {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background: var(--other-message-bg) !important;
    color: var(--other-message-text) !important;
    border-radius: var(--bubble-radius) !important;
    padding: 12px 16px !important;
    margin: 4px 0 !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Quoted articles in my-post should look like regular messages (not inherit blue styling) */
article.p.my-post blockquote article,
article.p.my-post .aux-inner article,
article.p.my-post span.aux-inner article,
article.p.my-post blockquote article.p,
article.p.my-post .aux-inner article.p,
article.p.my-post span.aux-inner article.p {
    background: var(--other-message-bg) !important;
    color: var(--other-message-text) !important;
}

/* Fix embedded article content - inherit from parent article */
blockquote article *,
.aux-inner article *,
span.aux-inner article *,
blockquote article.p *,
.aux-inner article.p *,
span.aux-inner article.p * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* Ensure quoted article content in my-post uses regular text colors */
article.p.my-post blockquote article *,
article.p.my-post .aux-inner article *,
article.p.my-post span.aux-inner article *,
article.p.my-post blockquote article.p *,
article.p.my-post .aux-inner article.p *,
article.p.my-post span.aux-inner article.p * {
    color: var(--other-message-text) !important;
}

/* Fix aux-inner specifically in quoted articles within my-post */
article.p.my-post blockquote article .aux-inner,
article.p.my-post blockquote article span.aux-inner,
article.p.my-post .aux-inner article .aux-inner,
article.p.my-post .aux-inner article span.aux-inner,
article.p.my-post span.aux-inner article .aux-inner,
article.p.my-post span.aux-inner article span.aux-inner {
    color: var(--other-message-text) !important;
    background: transparent !important;
}

/* Fix aux-inner content in quoted articles */
article.p.my-post blockquote article .aux-inner *,
article.p.my-post blockquote article span.aux-inner *,
article.p.my-post .aux-inner article .aux-inner *,
article.p.my-post .aux-inner article span.aux-inner *,
article.p.my-post span.aux-inner article .aux-inner *,
article.p.my-post span.aux-inner article span.aux-inner * {
    color: var(--other-message-text) !important;
}

/* Fix embedded article headers and timestamps */
blockquote article header,
blockquote article time,
.aux-inner article header,
.aux-inner article time {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--ios-text-secondary) !important;
    font-size: 12px !important;
}

/* Clean up any remaining overrides */
body {
    background-size: auto !important;
    animation: none !important;
}

/* Ensure proper layering */
#thread-container {
    position: relative !important;
    z-index: 1 !important;
}


/* Reply Form Positioning - Keep it fixed and stable */
article.reply-form,
article#p0 {
    position: fixed !important;
    bottom: 33px !important;
    z-index: 9999 !important;
    /* Remove all transitions that interfere with JS scaling */
    transition: none !important;
    animation: none !important;
}

/* Desktop positioning - nudged left */
@media screen and (min-width: 701px) {
    article.reply-form,
    article#p0 {
        left: calc(50% - 50px) !important;
        transform: translateX(-50%) !important;
        max-width: var(--container-max-width) !important;
        width: calc(100% - 30px) !important;
    }
}

/* Mobile positioning - centered */
@media screen and (max-width: 700px) {
    article.reply-form,
    article#p0 {
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: var(--container-max-width) !important;
        width: calc(100% - 30px) !important;
    }
}

/* Remove transitions from reply form containers and inputs */
article.reply-form *,
article#p0 *,
article.reply-form .post-container,
article#p0 .post-container,
article.reply-form textarea,
article#p0 textarea,
article.reply-form #text-input,
article#p0 #text-input {
    transition: none !important;
    animation: none !important;
}

/* Reply Form textarea - Remove background and border, let JS handle sizing */
article#p0 textarea,
article#p0 #text-input,
article#p0.editing textarea,
article#p0.editing #text-input,
article.reply-form textarea,
article.reply-form #text-input,
article.reply-form.editing textarea,
article.reply-form.editing #text-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: white !important;
    resize: none !important;
    box-shadow: none !important;
}

/* Post placeholder - Override everything, force blue bubble on left */
article.post-placeholder,
article.editing.post-placeholder,
article.p.editing.post-placeholder,
article.p.post-placeholder,
article[class*="post-placeholder"] {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 65% !important;
    max-width: 35% !important;
    display: block !important;
    justify-content: flex-start !important;
    text-align: left !important;
    position: relative !important;
    /* Override any right-side positioning */
    right: unset !important;
    left: 0 !important;
}

article.post-placeholder .post-container,
article.editing.post-placeholder .post-container,
article.p.editing.post-placeholder .post-container,
article.p.post-placeholder .post-container,
article[class*="post-placeholder"] .post-container {
    background: var(--my-message-bg) !important;
    color: var(--my-message-text) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    /* Force override any other background */
    background-color: var(--my-message-bg) !important;
    /* Add spinner */
    position: relative !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Three dots indicator */
article.post-placeholder .post-container::before,
article.editing.post-placeholder .post-container::before,
article.p.editing.post-placeholder .post-container::before,
article.p.post-placeholder .post-container::before,
article[class*="post-placeholder"] .post-container::before {
    content: "• • •" !important;
    color: white !important;
    font-size: 16px !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    letter-spacing: 4px !important;
}

article.p.editing.post-placeholder header,
article.p.post-placeholder header,
article.editing.post-placeholder header {
    text-align: left !important;
    margin-left: 16px !important;
}

/* Hide ALL text content in post placeholder */
article.post-placeholder span,
article.editing.post-placeholder span,
article.p.editing.post-placeholder span,
article.p.post-placeholder span,
article[class*="post-placeholder"] span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: transparent !important;
}

/* Hide blockquote text in post placeholder */
article.post-placeholder blockquote,
article.editing.post-placeholder blockquote,
article.p.editing.post-placeholder blockquote,
article.p.post-placeholder blockquote,
article[class*="post-placeholder"] blockquote {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: transparent !important;
}

/* Hide any text content that says "placeholder" */
article[class*="post-placeholder"] *:before,
article[class*="post-placeholder"] *:after {
    content: "" !important;
    display: none !important;
}

/* Nuclear override - force this to not match other message selectors */
article[class*="post-placeholder"]:not(.my-post) {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 30% !important;
}

article[class*="post-placeholder"]:not(.my-post) .post-container {
    background: var(--my-message-bg) !important;
    color: var(--my-message-text) !important;
}

/* Make all form elements invisible but functional */
article.p.editing.post-placeholder textarea,
article.p.editing.post-placeholder #text-input,
article.p.editing.post-placeholder .aux-inner,
article.p.editing.post-placeholder .moderation,
article.p.post-placeholder textarea,
article.p.post-placeholder #text-input,
article.p.post-placeholder .aux-inner,
article.p.post-placeholder .moderation,
article.editing.post-placeholder textarea,
article.editing.post-placeholder #text-input,
article.editing.post-placeholder .aux-inner,
article.editing.post-placeholder .moderation {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    opacity: 0 !important;
    color: transparent !important;
}

/* Completely eliminate placeholder text */
article#p0 textarea::placeholder,
article#p0 #text-input::placeholder,
article#p0.editing textarea::placeholder,
article#p0.editing #text-input::placeholder {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: "" !important;
    color: transparent !important;
}

article#p0 textarea::-webkit-input-placeholder,
article#p0 #text-input::-webkit-input-placeholder,
article#p0.editing textarea::-webkit-input-placeholder,
article#p0.editing #text-input::-webkit-input-placeholder {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

article#p0 textarea::-moz-placeholder,
article#p0 #text-input::-moz-placeholder,
article#p0.editing textarea::-moz-placeholder,
article#p0.editing #text-input::-moz-placeholder {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Upload Button - Small circular button */
.upload-container button {
    background: var(--ios-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    transition: var(--ios-transition) !important;
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.upload-container button:hover {
    background: var(--ios-blue-dark) !important;
}

/* Add + symbol to upload button */
.upload-container button::before {
    content: "+" !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: inline-block !important;
    color: white !important;
}

/* Hide original button text */
.upload-container button {
    font-size: 0 !important;
    color: transparent !important;
}

/* Mobile adjustments */
@media screen and (max-width: 700px) {
    article.p.my-post {
        margin-right: 15% !important;
        max-width: 85% !important;
    }
}


/* Final cleanup for a polished look */
* {
    box-sizing: border-box !important;
}

/* Remove hover overlay completely */
div#hover-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* NUCLEAR OPACITY FIX - Put at very end to override everything */
article#p0.glass.p.reply-form:not(.editing) {
    opacity: 0.65 !important;
}

article#p0.glass.p.reply-form.editing {
    opacity: 1 !important;
}

article.glass.p.reply-form:not(.editing):not(.my-post) {
    opacity: 0.65 !important;
}

article.glass.p.reply-form.my-post {
    opacity: 1 !important;
}