/* Windows 95 Internet Explorer 5.0 Window */
#ie-window {
    width: 900px;
    height: 650px;
    max-width: 95vw;
    max-height: 90vh;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}

/* IE Toolbar */
.ie-toolbar {
    background: var(--w95-face);
    padding: 2px;
    border-bottom: 2px groove #c0c0c0;
}

.ie-toolbar-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 2px 0;
}

/* IE Navigation Buttons */
.ie-nav-buttons {
    display: flex;
    gap: 0;
    margin-right: 8px;
}

.ie-nav-btn {
    width: 44px;
    height: 36px;
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-family: 'MS Sans Serif', sans-serif;
    padding: 2px;
}

.ie-nav-btn:hover {
    background: var(--w95-hover);
}

.ie-nav-btn:active {
    border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);
}

.ie-nav-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ie-nav-btn .btn-icon {
    font-size: 16px;
    line-height: 1;
}

.ie-nav-btn .btn-text {
    font-size: 9px;
    margin-top: 2px;
}

/* Address Bar */
.ie-address-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ie-address-label {
    font-size: 11px;
    font-family: 'MS Sans Serif', sans-serif;
}

.ie-address-bar {
    flex: 1;
    height: 22px;
    border: 2px inset var(--w95-face);
    background: white;
    padding: 0 4px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
}

.ie-go-btn {
    padding: 2px 8px;
    height: 22px;
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
    cursor: pointer;
    font-size: 11px;
    font-family: 'MS Sans Serif', sans-serif;
}

.ie-go-btn:active {
    border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);
}

/* IE Logo */
.ie-logo {
    width: 32px;
    height: 32px;
    margin-left: 8px;
}

.ie-loading-icon {
    width: 22px;
    height: 22px;
    transition: transform 0.5s;
}

.ie-loading-icon.spinning {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Content Area */
.ie-content {
    background: white;
    border: 2px inset var(--w95-face);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

#twitter-feed-content {
    padding: 8px;
    font-family: 'MS Sans Serif', 'Times New Roman', serif;
}

/* Community Header */
.community-header {
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
    margin: 8px;
    padding: 0;
    overflow: hidden;
}

/* Community Banner */
.community-banner {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    border-bottom: 2px solid var(--w95-shadow);
}

.community-info {
    padding: 12px;
}

.community-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.community-name {
    font-size: 16px;
    font-weight: bold;
    color: #000080;
    font-family: 'MS Sans Serif', sans-serif;
}

.community-join-btn {
    padding: 4px 12px;
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
    cursor: pointer;
    font-size: 11px;
    font-family: 'MS Sans Serif', sans-serif;
    font-weight: bold;
}

.community-join-btn:hover {
    background: var(--w95-hover);
}

.community-join-btn:active {
    border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);
}

.community-description {
    font-size: 12px;
    color: #000;
    margin-bottom: 8px;
    font-family: 'MS Sans Serif', sans-serif;
}

.community-stats {
    display: flex;
    gap: 20px;
    padding-top: 8px;
    border-top: 1px solid #808080;
}

.community-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #666;
}

.community-stat-icon {
    font-size: 14px;
}

.community-stat-value {
    font-weight: bold;
    color: #000;
}

/* Tweet Styles */
.tweet-container {
    background: white;
    border: 2px solid;
    border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);
    margin-bottom: 10px;
    padding: 12px;
    cursor: pointer;
    position: relative;
}

.tweet-container:hover {
    background: #f0f0f0;
}

.tweet-container:active {
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
}

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

.tweet-avatar {
    width: 40px;
    height: 40px;
    border: 1px solid #808080;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.tweet-author {
    flex: 1;
}

.tweet-author-name {
    font-weight: bold;
    font-size: 13px;
    color: #000080;
}

.tweet-author-username {
    font-size: 12px;
    color: #666;
}

.tweet-date {
    font-size: 11px;
    color: #666;
    font-family: 'Courier New', monospace;
}

.tweet-content {
    margin-bottom: 8px;
}

.tweet-text {
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    word-wrap: break-word;
}

.tweet-link {
    color: #0000ff;
    text-decoration: underline;
}

.tweet-link:visited {
    color: #800080;
}

.tweet-mention,
.tweet-hashtag {
    color: #000080;
    text-decoration: none;
    font-weight: bold;
}

.tweet-mention:hover,
.tweet-hashtag:hover {
    text-decoration: underline;
}

/* Tweet Media */
.tweet-media {
    margin-top: 8px;
    border: 1px solid #808080;
    background: #f0f0f0;
    padding: 2px;
}

.tweet-media img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    display: block;
    cursor: pointer;
    image-rendering: auto; /* Let browser handle image rendering */
}

/* Tweet Footer */
.tweet-footer {
    display: flex;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid #c0c0c0;
}

.tweet-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
}

.tweet-stat-icon {
    font-size: 14px;
}

.tweet-stat-count {
    font-family: 'Courier New', monospace;
}

/* No Tweets Message */
.ie-no-tweets {
    text-align: center;
    padding: 40px;
    color: #666;
}

.ie-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.ie-error-details {
    font-size: 11px;
    color: #808080;
    margin-top: 8px;
}

/* Status Bar */
.ie-status-bar {
    height: 22px;
    background: var(--w95-face);
    border-top: 1px solid var(--w95-hilite);
    display: flex;
    align-items: center;
    padding: 0 4px;
    font-size: 11px;
    font-family: 'MS Sans Serif', sans-serif;
}

.ie-status-text {
    flex: 1;
    padding: 0 4px;
}

.ie-status-zone {
    padding: 0 8px;
    border-left: 1px solid var(--w95-shadow);
}

/* Scrollbar styling for IE content */
.ie-content::-webkit-scrollbar {
    width: 16px;
}

.ie-content::-webkit-scrollbar-track {
    background: var(--w95-face);
    border-left: 1px solid var(--w95-shadow);
}

.ie-content::-webkit-scrollbar-thumb {
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
}

.ie-content::-webkit-scrollbar-thumb:hover {
    background: var(--w95-hover);
}

.ie-content::-webkit-scrollbar-thumb:active {
    border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);
    background: var(--w95-pressed);
}

/* Load More Button */
.load-more-container {
    text-align: center;
    padding: 20px;
    border-top: 2px groove var(--w95-face);
    background: #f0f0f0;
}

.load-more-btn {
    padding: 8px 24px;
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);
    cursor: pointer;
    font-size: 12px;
    font-family: 'MS Sans Serif', sans-serif;
    font-weight: bold;
}

.load-more-btn:hover {
    background: var(--w95-hover);
}

.load-more-btn:active {
    border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);
}

/* IE Window Icon for taskbar */
.win95-icon-ie {
    background-image: url('icons/All [Without duplicates]/Earth (16 colors).ico');
}