/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection in input fields and editable areas */
input, textarea, [contenteditable="true"], .selectable {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Windows 95 Mixin Variables */
:root {
    --win95-gray: #c0c0c0;
    --win95-dark-gray: #808080;
    --win95-light-gray: #dfdfdf;
    --win95-white: #ffffff;
    --win95-black: #000000;
    --win95-blue: #000080;
    --win95-light-blue: #0000ff;
    --win95-teal: #008080;
    --win95-button-highlight: #ffffff;
    --win95-button-shadow: #808080;
    --win95-button-dark-shadow: #000000;
}

/* Windows 95 Inset Border Mixin */
.win95-inset {
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    background-color: var(--win95-gray);
}

/* Windows 95 Outset Border Mixin */
.win95-outset {
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
    border-right-width: 2px;
    border-bottom-width: 2px;
    box-shadow: inset 1px 1px 0 var(--win95-white),
                inset -1px -1px 0 var(--win95-button-shadow);
    background-color: var(--win95-gray);
}

/* Windows 95 Window Border */
.win95-window {
    border: 1px solid var(--win95-black);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: var(--win95-black);
    background-color: var(--win95-teal);
    overflow: hidden;
    margin: 0;
    padding: 0;
    user-select: none;
}

/* Desktop */
.desktop {
    width: 100vw;
    height: calc(100vh - 28px);
    position: relative;
    overflow: hidden;
}

/* Window Styles */
.window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: var(--win95-gray);
    border: 1px solid var(--win95-black);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.window-active {
    z-index: 9999 !important;
}

/* Window Title Bar */
.window-title-bar {
    background: linear-gradient(90deg, var(--win95-blue) 0%, #003366 100%);
    color: var(--win95-white);
    padding: 2px 2px 2px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    height: 20px;
}

.window:not(.window-active) .window-title-bar {
    background: var(--win95-dark-gray);
}

.window-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 11px;
    gap: 4px;
}

.window-icon {
    font-size: 14px;
}

.window-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Window Controls */
.window-controls {
    display: flex;
    gap: 2px;
}

.window-button {
    width: 16px;
    height: 14px;
    padding: 0;
    font-size: 9px;
    font-weight: bold;
    background-color: var(--win95-gray);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--win95-button-highlight);
    border-left: 1px solid var(--win95-button-highlight);
    border-right: 1px solid var(--win95-button-dark-shadow);
    border-bottom: 1px solid var(--win95-button-dark-shadow);
}

.window-button:active {
    border-top: 1px solid var(--win95-button-dark-shadow);
    border-left: 1px solid var(--win95-button-dark-shadow);
    border-right: 1px solid var(--win95-button-highlight);
    border-bottom: 1px solid var(--win95-button-highlight);
    padding: 1px 0 0 1px;
}

.window-button:hover {
    background-color: var(--win95-light-gray);
}

/* Window Content */
.window-content {
    flex: 1;
    overflow: auto;
    background-color: var(--win95-white);
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    margin: 2px;
}

/* Window Resize Handle */
.window-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--win95-button-shadow) 45%, var(--win95-button-shadow) 50%, transparent 50%);
}

/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background-color: var(--win95-gray);
    border-top: 2px solid var(--win95-button-highlight);
    display: flex;
    align-items: center;
    padding: 2px;
    gap: 2px;
    z-index: 10000;
}

.start-button {
    height: 22px;
    padding: 0 6px;
    font-weight: bold;
    font-size: 11px;
    background-color: var(--win95-gray);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
    box-shadow: inset 1px 1px 0 var(--win95-white);
}

.start-button:active {
    border-top: 2px solid var(--win95-button-dark-shadow);
    border-left: 2px solid var(--win95-button-dark-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    padding: 1px 5px 0 7px;
}

.start-icon {
    font-size: 16px;
}

.start-icon-img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.taskbar-separator {
    width: 2px;
    height: 22px;
    background: linear-gradient(90deg, var(--win95-button-shadow) 0%, var(--win95-button-shadow) 50%, var(--win95-button-highlight) 50%);
}

.taskbar-buttons {
    flex: 1;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
}

.taskbar-buttons::-webkit-scrollbar {
    height: 0;
}

.taskbar-button {
    height: 22px;
    min-width: 120px;
    max-width: 160px;
    padding: 0 6px;
    font-size: 11px;
    background-color: var(--win95-gray);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
    overflow: hidden;
    text-align: left;
}

.taskbar-button.active {
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
}

.taskbar-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.taskbar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-tray {
    height: 22px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--win95-button-shadow);
    border-left: 1px solid var(--win95-button-shadow);
    border-right: 1px solid var(--win95-button-highlight);
    border-bottom: 1px solid var(--win95-button-highlight);
}

.clock {
    font-size: 11px;
    cursor: default;
}

/* Calendar Popup */
.calendar-popup {
    display: none;
    position: absolute;
    bottom: 30px;
    right: 2px;
    background-color: var(--win95-gray);
    border: 2px solid var(--win95-button-highlight);
    border-right-color: var(--win95-button-dark-shadow);
    border-bottom-color: var(--win95-button-dark-shadow);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    padding: 8px;
    z-index: 10000;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
}

.calendar-popup.visible {
    display: block;
}

.calendar-header {
    text-align: center;
    font-weight: bold;
    padding: 4px 0 8px 0;
    border-bottom: 1px solid var(--win95-button-shadow);
    margin-bottom: 6px;
}

.calendar-days-header {
    display: grid;
    grid-template-columns: repeat(7, 24px);
    gap: 1px;
    margin-bottom: 4px;
}

.calendar-days-header span {
    text-align: center;
    font-weight: bold;
    padding: 2px 0;
    color: #000080;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 24px);
    gap: 1px;
}

.calendar-day {
    text-align: center;
    padding: 3px 0;
    cursor: default;
}

.calendar-day.other-month {
    color: #808080;
}

.calendar-day.today {
    background: #000080;
    color: #fff;
}

/* Start Menu */
.start-menu {
    position: fixed;
    bottom: 30px;
    left: 2px;
    width: 200px;
    background-color: var(--win95-gray);
    border: 2px solid var(--win95-button-highlight);
    border-right-color: var(--win95-button-dark-shadow);
    border-bottom-color: var(--win95-button-dark-shadow);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
}

.start-menu-sidebar {
    width: 24px;
    background: linear-gradient(180deg, var(--win95-blue) 0%, var(--win95-light-blue) 100%);
    color: var(--win95-white);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 8px 2px;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

.start-menu-items {
    flex: 1;
    padding: 2px;
}

.start-menu-item {
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.start-menu-item:hover {
    background-color: var(--win95-blue);
    color: var(--win95-white);
}

.menu-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.menu-icon-img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}

.start-menu-separator {
    height: 1px;
    background-color: var(--win95-button-shadow);
    margin: 2px 4px;
}

/* Start Menu Submenu */
.start-menu-submenu {
    position: relative;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 8px;
}

.submenu {
    position: absolute;
    left: 100%;
    top: -2px;
    background-color: var(--win95-gray);
    border: 2px solid var(--win95-button-highlight);
    border-right-color: var(--win95-button-dark-shadow);
    border-bottom-color: var(--win95-button-dark-shadow);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    z-index: 10002;
    padding: 2px;
}

.start-menu-submenu:hover > .submenu {
    display: block !important;
}

/* Nested submenu positioning */
.submenu .start-menu-submenu .submenu {
    left: 100%;
    top: -2px;
}

/* Fix submenu text color - prevent inheriting white from hovered parent */
.submenu .start-menu-item {
    color: var(--win95-black);
}

.submenu .start-menu-item:hover {
    color: var(--win95-white);
}

/* Chat Window Specific Styles */
.chat-output {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    background-color: var(--win95-white);
}

.chat-message {
    margin-bottom: 6px;
    line-height: 1.4;
}

.chat-message.user {
    color: var(--win95-black);
    font-weight: bold;
}

.chat-message.bot {
    color: var(--win95-blue);
}

.chat-message.system {
    color: var(--win95-dark-gray);
    font-style: italic;
}

/* HTML-rendered bot messages (90s web styling) */
.chat-message-html {
    font-family: 'Times New Roman', Times, serif;
    font-size: 200%;
    color: var(--win95-black) !important;
    line-height: 1.6;
    background-color: var(--win95-white);
    padding: 8px;
    border: 1px solid var(--win95-button-shadow);
    margin: 4px 0;
}

/* 90s Web Effects Support */
.chat-message-html h1,
.chat-message-html h2,
.chat-message-html h3 {
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
    margin: 8px 0;
}

.chat-message-html h1 { font-size: 18px; }
.chat-message-html h2 { font-size: 16px; }
.chat-message-html h3 { font-size: 14px; }

.chat-message-html p {
    margin: 6px 0;
}

.chat-message-html ul,
.chat-message-html ol {
    margin: 6px 0;
    padding-left: 20px;
}

.chat-message-html a {
    color: #0000ff;
    text-decoration: underline;
}

.chat-message-html a:visited {
    color: #800080;
}

/* 90s text effects */
.chat-message-html marquee {
    background-color: yellow;
    padding: 2px;
}

.chat-message-html blink {
    animation: blink-text 1s infinite;
}

@keyframes blink-text {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.chat-message-html hr {
    border: none;
    border-top: 2px ridge var(--win95-button-shadow);
    margin: 8px 0;
}

.chat-message-html blockquote {
    border-left: 3px solid #0000ff;
    margin: 8px 0;
    padding-left: 12px;
    font-style: italic;
    background-color: #f0f0f0;
}

.chat-message-html code {
    font-family: 'Courier New', Courier, monospace;
    background-color: #e0e0e0;
    padding: 2px 4px;
    border: 1px solid #c0c0c0;
}

.chat-message-html pre {
    font-family: 'Courier New', Courier, monospace;
    background-color: #e0e0e0;
    padding: 8px;
    border: 1px solid #c0c0c0;
    overflow-x: auto;
    margin: 6px 0;
}

.chat-message-html table {
    border-collapse: collapse;
    margin: 8px 0;
}

.chat-message-html th,
.chat-message-html td {
    border: 1px solid #000000;
    padding: 4px 8px;
}

.chat-message-html th {
    background-color: #c0c0c0;
    font-weight: bold;
}

/* 90s backgrounds */
.chat-message-html [style*="background"] {
    padding: 4px;
}

/* Center tags */
.chat-message-html center {
    display: block;
    text-align: center;
}

/* 90s Multi-column/Table Layouts */
.chat-message-html .two-column {
    display: table;
    width: 100%;
}

.chat-message-html .column {
    display: table-cell;
    vertical-align: top;
    padding: 4px;
}

.chat-message-html .column-left {
    width: 50%;
    padding-right: 8px;
}

.chat-message-html .column-right {
    width: 50%;
    padding-left: 8px;
}

.chat-message-html .sidebar {
    display: table-cell;
    width: 30%;
    background-color: #ffff99;
    border: 2px solid #000000;
    padding: 8px;
    vertical-align: top;
}

.chat-message-html .main-content {
    display: table-cell;
    width: 70%;
    padding-left: 8px;
    vertical-align: top;
}

/* Framesets simulation */
.chat-message-html .frame {
    border: 3px ridge var(--win95-button-shadow);
    padding: 8px;
    margin: 4px;
    background-color: #ffffff;
}

.chat-message-html .frame-header {
    background-color: #000080;
    color: #ffffff;
    padding: 4px;
    font-weight: bold;
    margin: -8px -8px 8px -8px;
}

/* Inline layouts */
.chat-message-html .inline-box {
    display: inline-block;
    border: 2px solid #000000;
    padding: 4px;
    margin: 2px;
    background-color: #e0e0e0;
}

/* 90s button styles */
.chat-message-html .retro-button {
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    padding: 4px 12px;
    font-weight: bold;
    display: inline-block;
    margin: 2px;
}

/* Nested tables for complex layouts */
.chat-message-html table table {
    margin: 0;
}

.chat-message-html .layout-table {
    width: 100%;
    border: none;
}

.chat-message-html .layout-table td {
    border: none;
    vertical-align: top;
}

/* Minesweeper Game */
.minesweeper-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background-color: var(--win95-gray);
    user-select: none;
}

.minesweeper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    background-color: var(--win95-gray);
    border-top: 3px solid var(--win95-button-highlight);
    border-left: 3px solid var(--win95-button-highlight);
    border-right: 3px solid var(--win95-button-dark-shadow);
    border-bottom: 3px solid var(--win95-button-dark-shadow);
}

.mine-counter,
.timer {
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    background-color: #000000;
    padding: 4px 8px;
    border: 2px inset var(--win95-button-shadow);
    min-width: 60px;
    text-align: center;
}

.smiley-button {
    width: 36px;
    height: 36px;
    font-size: 24px;
    background-color: var(--win95-gray);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid var(--win95-button-highlight);
    border-left: 3px solid var(--win95-button-highlight);
    border-right: 3px solid var(--win95-button-dark-shadow);
    border-bottom: 3px solid var(--win95-button-dark-shadow);
    padding: 0;
}

.smiley-button:active {
    border-top: 3px solid var(--win95-button-dark-shadow);
    border-left: 3px solid var(--win95-button-dark-shadow);
    border-right: 3px solid var(--win95-button-highlight);
    border-bottom: 3px solid var(--win95-button-highlight);
}

.minesweeper-board {
    display: grid;
    gap: 0;
    border-top: 3px solid var(--win95-button-shadow);
    border-left: 3px solid var(--win95-button-shadow);
    border-right: 3px solid var(--win95-button-highlight);
    border-bottom: 3px solid var(--win95-button-highlight);
    background-color: var(--win95-gray);
}

.mine-cell {
    width: 20px;
    height: 20px;
    background-color: var(--win95-gray);
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.mine-cell.revealed {
    border: 1px solid var(--win95-button-shadow);
    background-color: var(--win95-light-gray);
    cursor: default;
}

.mine-cell.flagged {
    cursor: pointer;
}

.mine-cell.mine {
    background-color: #ff0000;
}

.mine-cell.exploded {
    background-color: #ff0000;
}

/* Number colors (classic Minesweeper) */
.mine-cell.number-1 { color: #0000ff; }
.mine-cell.number-2 { color: #008000; }
.mine-cell.number-3 { color: #ff0000; }
.mine-cell.number-4 { color: #000080; }
.mine-cell.number-5 { color: #800000; }
.mine-cell.number-6 { color: #008080; }
.mine-cell.number-7 { color: #000000; }
.mine-cell.number-8 { color: #808080; }

.chat-input-container {
    display: flex;
    align-items: center;
    padding: 4px;
    background-color: var(--win95-gray);
    gap: 4px;
    border-top: 2px solid var(--win95-button-highlight);
}

.chat-prompt {
    color: var(--win95-black);
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

.chat-input {
    flex: 1;
    background-color: var(--win95-white);
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    outline: none;
    color: var(--win95-black);
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding: 3px 4px;
}

/* Scrollbar Styling - Windows 95 Style */
.chat-output::-webkit-scrollbar,
.window-content::-webkit-scrollbar {
    width: 16px;
}

.chat-output::-webkit-scrollbar-track,
.window-content::-webkit-scrollbar-track {
    background: var(--win95-gray);
}

.chat-output::-webkit-scrollbar-thumb,
.window-content::-webkit-scrollbar-thumb {
    background: var(--win95-gray);
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
}

.chat-output::-webkit-scrollbar-thumb:hover,
.window-content::-webkit-scrollbar-thumb:hover {
    background: var(--win95-light-gray);
}

.chat-output::-webkit-scrollbar-button,
.window-content::-webkit-scrollbar-button {
    background: var(--win95-gray);
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
    height: 16px;
}

.chat-output::-webkit-scrollbar-button:hover,
.window-content::-webkit-scrollbar-button:hover {
    background: var(--win95-light-gray);
}

/* About Window */
.about-content {
    padding: 20px;
    text-align: center;
    user-select: text;
}

.about-content h2 {
    margin-bottom: 10px;
    color: var(--win95-blue);
}

.about-content p {
    margin: 8px 0;
    line-height: 1.6;
}

/* Cursor Blink Effect */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background-color: var(--win95-black);
    animation: blink 1s infinite;
    margin-left: 2px;
}

/* Windows 95 Button */
.win95-button {
    background-color: var(--win95-gray);
    border: none;
    padding: 4px 12px;
    font-size: 11px;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
    cursor: pointer;
    min-width: 75px;
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
    box-shadow: inset 1px 1px 0 var(--win95-white);
}

.win95-button:active {
    border-top: 2px solid var(--win95-button-dark-shadow);
    border-left: 2px solid var(--win95-button-dark-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    padding: 5px 11px 3px 13px;
}

.win95-button:focus {
    outline: 1px dotted var(--win95-black);
    outline-offset: -4px;
}

/* Windows 95 Input Fields */
.win95-input,
.win95-textbox {
    background-color: var(--win95-white);
    color: var(--win95-black);
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    padding: 3px 4px;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
    font-size: 11px;
    outline: none;
}

.win95-input:focus,
.win95-textbox:focus {
    outline: 1px dotted var(--win95-black);
    outline-offset: -2px;
}

.win95-input:disabled,
.win95-textbox:disabled {
    background-color: var(--win95-gray);
    color: var(--win95-dark-gray);
}

/* Windows 95 Textarea */
.win95-textarea {
    background-color: var(--win95-white);
    color: var(--win95-black);
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    padding: 4px;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
    font-size: 11px;
    outline: none;
    resize: vertical;
}

.win95-textarea:focus {
    outline: 1px dotted var(--win95-black);
    outline-offset: -2px;
}

/* Windows 95 Select/Dropdown */
.win95-select {
    background-color: var(--win95-white);
    color: var(--win95-black);
    border-top: 2px solid var(--win95-button-shadow);
    border-left: 2px solid var(--win95-button-shadow);
    border-right: 2px solid var(--win95-button-highlight);
    border-bottom: 2px solid var(--win95-button-highlight);
    padding: 2px 4px;
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
    font-size: 11px;
    outline: none;
}

.win95-select:focus {
    outline: 1px dotted var(--win95-black);
    outline-offset: -2px;
}

/* Windows 95 Checkbox */
.win95-checkbox {
    width: 13px;
    height: 13px;
    border: 2px solid var(--win95-button-shadow);
    background-color: var(--win95-white);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.win95-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: -3px;
    left: 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--win95-black);
}

.win95-checkbox:focus {
    outline: 1px dotted var(--win95-black);
    outline-offset: 1px;
}

/* Windows 95 Radio Button */
.win95-radio {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--win95-button-shadow);
    background-color: var(--win95-white);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.win95-radio:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--win95-black);
}

.win95-radio:focus {
    outline: 1px dotted var(--win95-black);
    outline-offset: 1px;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background-color: var(--win95-gray);
    border: 2px solid var(--win95-button-highlight);
    border-right-color: var(--win95-button-dark-shadow);
    border-bottom-color: var(--win95-button-dark-shadow);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    padding: 2px;
    z-index: 100000;
    user-select: none;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
}

.context-menu-item:hover {
    background-color: var(--win95-blue);
    color: var(--win95-white);
}

.context-menu-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.context-menu-label {
    flex: 1;
}

.context-menu-separator {
    height: 1px;
    background-color: var(--win95-button-shadow);
    margin: 2px 4px;
    border-bottom: 1px solid var(--win95-button-highlight);
}

/* Context Menu Submenu */
.context-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--win95-gray);
    border: 2px solid var(--win95-button-highlight);
    border-right-color: var(--win95-button-dark-shadow);
    border-bottom-color: var(--win95-button-dark-shadow);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 160px;
    padding: 2px;
    z-index: 100001;
}


/* Model Selector Application */
.model-selector-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    user-select: none;
}

.model-selector-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px groove var(--win95-button-shadow);
}

.model-selector-header h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--win95-black);
}

.model-selector-header p {
    margin: 0;
    font-size: 11px;
    color: var(--win95-dark-gray);
}

.model-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow-y: auto;
    padding: 4px;
}

.model-card {
    background-color: var(--win95-white);
    border: 2px solid var(--win95-button-shadow);
    padding: 12px;
    cursor: pointer;
    transition: all 0.1s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.model-card:hover {
    border-color: var(--win95-blue);
}

.model-card.selected {
    background-color: var(--win95-light-gray);
    border: 2px solid var(--win95-blue);
    box-shadow: inset 0 0 0 1px var(--win95-blue);
}

.model-ascii {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    line-height: 1.2;
    white-space: pre;
    color: var(--win95-black);
    text-align: center;
    margin-bottom: 8px;
    user-select: none;
}

.model-info {
    flex: 1;
}

.model-name {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 2px;
    color: var(--win95-black);
}

.model-provider {
    font-size: 9px;
    color: var(--win95-dark-gray);
    margin-bottom: 6px;
}

.model-description {
    font-size: 10px;
    color: var(--win95-black);
    line-height: 1.3;
}

.model-radio {
    position: absolute;
    top: 8px;
    right: 8px;
}

.model-radio input[type="radio"] {
    width: 13px;
    height: 13px;
    cursor: pointer;
}

.model-selector-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px groove var(--win95-button-shadow);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Scrollbar for model grid */
.model-grid::-webkit-scrollbar {
    width: 16px;
}

.model-grid::-webkit-scrollbar-track {
    background: var(--win95-gray);
}

.model-grid::-webkit-scrollbar-thumb {
    background: var(--win95-gray);
    border-top: 2px solid var(--win95-button-highlight);
    border-left: 2px solid var(--win95-button-highlight);
    border-right: 2px solid var(--win95-button-dark-shadow);
    border-bottom: 2px solid var(--win95-button-dark-shadow);
}

.model-grid::-webkit-scrollbar-thumb:hover {
    background: var(--win95-light-gray);
}

/* Code Editor Syntax Highlighting */
.syntax-keyword {
    color: #0000ff;
    font-weight: bold;
}

.syntax-string {
    color: #a31515;
}

.syntax-comment {
    color: #008000;
    font-style: italic;
}

.syntax-number {
    color: #098658;
}

.syntax-boolean {
    color: #0000ff;
    font-weight: bold;
}

.syntax-builtin {
    color: #267f99;
}

.syntax-property {
    color: #001080;
    font-weight: bold;
}

.syntax-value {
    color: #0451a5;
}

.syntax-selector {
    color: #800000;
    font-weight: bold;
}

.syntax-color {
    color: #0000ff;
}

.syntax-tag {
    color: #800000;
}

.syntax-attribute {
    color: #ff0000;
}

.syntax-heading {
    color: #0000ff;
    font-weight: bold;
}

.syntax-bold {
    font-weight: bold;
}

.syntax-italic {
    font-style: italic;
}

.syntax-code {
    color: #a31515;
    background-color: #f5f5f5;
    padding: 2px 4px;
}

.syntax-codeblock {
    color: #000000;
    background-color: #f5f5f5;
    display: block;
    padding: 8px;
    border: 1px solid #c0c0c0;
}

/* ============================================
   MODERN ANIMATIONS - OPTION 1: SUBTLE & POLISHED
   ============================================ */

/* Window Animations */
@keyframes windowScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.window {
    animation: windowScaleIn 0.15s cubic-bezier(0.2, 0, 0.2, 1);
    transition: box-shadow 0.2s ease;
}

.window:hover {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

/* Window Title Bar Transitions */
.window-title-bar {
    transition: background 0.2s ease;
}

/* Button Hover Effects - Subtle Lift */
.win95-button,
.start-button,
.window-button,
.taskbar-button,
.smiley-button {
    transition: all 0.15s cubic-bezier(0.2, 0, 0.2, 1);
}

.win95-button:hover,
.start-button:hover,
.smiley-button:hover {
    box-shadow: inset 1px 1px 0 var(--win95-white),
                inset -1px -1px 0 var(--win95-button-shadow),
                0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.window-button:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.5px);
}

.taskbar-button:hover:not(.active) {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Active button states - smooth spring back */
.win95-button:active,
.start-button:active,
.smiley-button:active {
    transform: translateY(0);
    transition: all 0.05s ease;
}

/* Menu Item Transitions */
.start-menu-item,
.context-menu-item {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Start Menu Animation */
@keyframes menuSlideIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.start-menu {
    animation: menuSlideIn 0.18s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Context Menu Animation */
@keyframes contextMenuFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.context-menu {
    animation: contextMenuFadeIn 0.15s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Scrollbar Smooth Transitions */
.chat-output::-webkit-scrollbar-thumb,
.window-content::-webkit-scrollbar-thumb,
.model-grid::-webkit-scrollbar-thumb {
    transition: background 0.2s ease;
}

/* Input Field Focus Animations */
.win95-input,
.win95-textbox,
.win95-textarea,
.win95-select,
.chat-input {
    transition: outline 0.15s ease, box-shadow 0.15s ease;
}

.win95-input:focus,
.win95-textbox:focus,
.win95-textarea:focus,
.win95-select:focus,
.chat-input:focus {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 128, 0.1);
}

/* Model Card Hover Effect */
.model-card {
    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.model-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.model-card:active {
    transform: translateY(0);
    transition: all 0.05s ease;
}

/* Minesweeper Cell Hover */
.mine-cell {
    transition: all 0.1s ease;
}

.mine-cell:hover:not(.revealed) {
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

/* Taskbar Button Active State Transition */
.taskbar-button {
    transition: all 0.15s ease;
}

/* Checkbox and Radio Smooth Transitions */
.win95-checkbox,
.win95-radio {
    transition: all 0.15s ease;
}

.win95-checkbox:hover,
.win95-radio:hover {
    transform: scale(1.1);
}

.win95-checkbox:active,
.win95-radio:active {
    transform: scale(0.95);
}

/* Smooth color transitions for interactive elements */
.start-icon,
.menu-icon,
.context-menu-icon,
.taskbar-icon {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.start-button:hover .start-icon,
.start-menu-item:hover .menu-icon,
.context-menu-item:hover .context-menu-icon {
    transform: scale(1.1);
}

/* Window resize handle subtle highlight */
.window-resize-handle {
    transition: opacity 0.2s ease;
    opacity: 0.7;
}

.window-resize-handle:hover {
    opacity: 1;
}

/* Submenu Slide Animation */
@keyframes submenuSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.submenu,
.context-submenu {
    animation: submenuSlideIn 0.15s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Smooth scrolling */
.chat-output,
.window-content,
.model-grid,
.start-menu-items {
    scroll-behavior: smooth;
}