/* =============================================================
   vexyl-os.css — Vexyl-OS Desktop & GUI Styles
   Vexyl Data Corporation Internal Systems — Est. 1983
   ============================================================= */

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --vexyl-blue:      #000080;
    --vexyl-cyan:      #00FFFF;
    --vexyl-white:     #FFFFFF;
    --vexyl-silver:    #C0C0C0;
    --vexyl-gray:      #808080;
    --vexyl-darkgray:  #404040;
    --vexyl-black:     #000000;
    --vexyl-yellow:    #FFFF00;
    --vexyl-green:     #00FF00;
    --vexyl-teal:      #008080;

    /* Windows 3.1 theme mappings */
    --accent:          var(--vexyl-blue);
    --bg-desktop:      #008080;             /* Win 3.1 teal desktop */
    --bg-window:       var(--vexyl-silver); /* Win 3.1 gray window background */
    --bg-titlebar:     var(--vexyl-blue);   /* Win 3.1 navy active title bar */
    --bg-sidebar:      var(--vexyl-silver); /* Win 3.1 gray sidebar */
    --text-primary:    var(--vexyl-black);  /* black body text */
    --text-accent:     var(--vexyl-blue);   /* navy accent / link color */
    --text-dim:        var(--vexyl-gray);   /* gray secondary text */
    --border-color:    var(--vexyl-gray);   /* gray border */

    --font-mono:       'Courier New', Courier, monospace;
    --font-ui:         'Arial', 'MS Sans Serif', sans-serif;

    --transition-speed: 0.15s;
}

/* Glitch theme (applied via JS when logic_state === 'glitched') */
body.glitched {
    --accent:       #CC0000;
    --bg-desktop:   #4A0000;   /* dark red desktop when glitched */
    --bg-titlebar:  #8B0000;
    --bg-sidebar:   #BDA0A0;   /* slightly reddish gray */
    --text-accent:  #CC0000;
    --border-color: #FF2000;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-ui);
    background-color: var(--bg-desktop);
    color: var(--text-primary);
}

/* ── Desktop Layout ────────────────────────────────────────── */
#desktop {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 32px 1fr 24px;
    grid-template-areas:
        "topbar topbar"
        "sidebar main"
        "taskbar taskbar";
    height: 100vh;
    width: 100vw;
    transition: all var(--transition-speed);
}

/* ── Top Menu Bar ──────────────────────────────────────────── */
#topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    background: var(--bg-window);   /* Win 3.1: gray menu bar, not navy */
    border-bottom: 2px solid var(--border-color);
    padding: 0 8px;
    gap: 16px;
    font-size: 13px;
    z-index: 100;
}

#topbar .menu-item {
    padding: 2px 10px;
    cursor: pointer;
    color: var(--text-primary);   /* black text on gray menu bar */
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
    font-family: var(--font-ui);
}

#topbar .menu-item:hover {
    background: var(--bg-titlebar);   /* navy selection highlight */
    color: #FFFFFF;
    border-color: transparent;
}

#topbar .logo {
    color: var(--text-accent);   /* navy logo text */
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 13px;
    margin-right: 16px;
    font-family: var(--font-ui);
    text-shadow: none;
}

#topbar .clock {
    margin-left: auto;
    color: var(--text-primary);   /* black clock text on gray bar */
    font-size: 12px;
    margin-right: 8px;
    font-family: var(--font-mono);
}

/* ── Sidebar ───────────────────────────────────────────────── */
#sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border-right: 2px solid var(--border-color);
    overflow: hidden;
}

/* ORION panel */
#retrobot-panel {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#retrobot-avatar {
    display: block;
    margin: 0 auto 8px;
}

#retrobot-speech {
    font-size: 11px;
    color: var(--text-accent);   /* navy text for ORION speech */
    min-height: 80px;
    line-height: 1.5;
    font-style: italic;
    font-family: var(--font-ui);
}

/* Command Ribbon */
#command-ribbon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
}

#command-ribbon h4 {
    color: var(--text-primary);   /* black heading */
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    font-family: var(--font-ui);
}

.ribbon-btn {
    background: var(--bg-window);   /* Win 3.1 gray button */
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
}

.ribbon-btn:hover {
    background: var(--bg-titlebar);   /* navy on hover */
    color: #FFFFFF;
}

.ribbon-btn:active {
    border-top:    2px solid #808080;
    border-left:   2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

.ribbon-btn.danger {
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: #8B0000;   /* dark red text */
}

.ribbon-btn.danger:hover {
    background: #8B0000;
    color: #FFFFFF;
}

/* File tree */
#file-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    font-size: 11px;
    font-family: var(--font-ui);
}

#file-tree h4 {
    color: var(--text-primary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.file-entry {
    padding: 3px 4px;
    cursor: pointer;
    color: var(--text-primary);   /* black text */
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 2px;
}

.file-entry:hover {
    color: #FFFFFF;
    background: var(--bg-titlebar);   /* navy selection */
}

.file-entry .file-icon {
    color: var(--text-accent);   /* navy icon */
    font-size: 12px;
}

/* ── Main Area ─────────────────────────────────────────────── */
#main-area {
    grid-area: main;
    position: relative;
    overflow: hidden;
    background: var(--bg-desktop);
}

/* Input bar — always anchored to bottom of main area */
#input-bar {
    position: absolute;
    bottom: 8px;
    left:   8px;
    right:  8px;
    z-index: 5;
}

/* ── Windows (Absolute-positioned within #main-area) ───────── */
/* Default positions — overridden by drag JS */
#viewer-window {
    position: absolute;
    top:    8px;
    left:   8px;
    right:  216px;   /* leave room for wider icon window on the right */
    bottom: 238px;   /* leave room for output window + input bar */
    min-width:  200px;
    min-height: 100px;
}

#icon-window {
    position: absolute;
    top:    8px;
    right:  8px;
    width:  200px;      /* wider to fit 6 icons in 3-column layout */
    height: 310px;      /* taller to accommodate 2 rows of 3 icons */
    min-width:  140px;
    min-height: 120px;
}

#output-window {
    position: absolute;
    left:   8px;
    right:  8px;
    bottom: 50px;    /* just above the input bar */
    height: 180px;
    min-height: 80px;
}

/* ── Windows ───────────────────────────────────────────────── */
.vexyl-window {
    background: var(--bg-window);   /* Win 3.1 gray window */
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #404040;
    border-right:  2px solid #404040;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset  1px  1px 0 #DFDFDF,   /* inner highlight top-left  */
        inset -1px -1px 0 #808080,   /* inner shadow bottom-right */
        2px 2px 0 #000000;           /* outer drop shadow         */
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Draggable titlebar cursor */
.window-titlebar {
    cursor: move;
    user-select: none;
    display: flex;
    align-items: center;
    background: var(--bg-titlebar);   /* navy active title bar */
    border-bottom: 1px solid #000080;
    padding: 3px 8px;
    font-size: 12px;
    gap: 8px;
    flex-shrink: 0;
    font-family: var(--font-ui);
}

.window-title {
    flex: 1;
    color: #FFFFFF;           /* white title text on navy bar */
    font-weight: bold;
    letter-spacing: 0;
    font-size: 12px;
    text-transform: none;     /* normal case, not all-caps */
}

.window-controls {
    display: flex;
    gap: 4px;
}

/* Control buttons — Win 3.1 gray raised squares */
.wctl-btn {
    width: 16px;
    height: 14px;
    background: #C0C0C0;
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #404040;
    border-right:  2px solid #404040;
    cursor: pointer;
    font-size: 9px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.wctl-btn:hover {
    background: #D0D0D0;    /* slightly lighter gray on hover */
    color: #000000;
}

.wctl-btn:active {
    border-top:    2px solid #404040;
    border-left:   2px solid #404040;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

.window-body {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

/* Minimised window — collapse body, keep titlebar visible */
.vexyl-window.win-minimised > .window-body,
.vexyl-window.win-minimised > #icon-grid {
    display: none;
}

/* Maximised viewer window — expand to fill #main-area */
#viewer-window.win-maximised {
    top:    8px !important;
    left:   8px !important;
    right:  8px !important;
    bottom: 50px !important;
    width:  auto !important;
    height: auto !important;
}

/* Resize handle — bottom-right corner grip */
.window-resize-handle {
    position: absolute;
    bottom: 0;
    right:  0;
    width:  14px;
    height: 14px;
    cursor: se-resize;
    /* Classic Win 3.1 diagonal grip lines */
    background:
        linear-gradient(135deg,
            transparent 33%, #808080 33%, #808080 44%,
            transparent 44%, transparent 55%, #808080 55%, #808080 66%,
            transparent 66%, transparent 77%, #808080 77%, #808080 88%,
            transparent 88%);
    opacity: 0.8;
    z-index: 2;
}

/* ── Vexyl-Viewer Window (old flex override removed — now absolute) */
#viewer-window > .window-body {
    min-height: 0;
    background: #111111;   /* dark CRT background so green DATA text is readable */
    padding: 0;
}

#viewer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background: #111111;   /* dark background — DATA renderer uses black, MEMO/PHOTO have own bg */
}

/* Placeholder text in viewer */
#viewer-placeholder {
    color: #808080;        /* mid-gray placeholder text on dark background */
    font-size: 12px;
    padding: 20px;
    text-align: center;
    font-family: var(--font-ui);
}

/* ── Icon Window / Desktop Icon Grid ────────────────────────── */
#icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    padding: 8px;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    cursor: pointer;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: background 0.1s, border-color 0.1s;
    text-align: center;
}

.desktop-icon:hover,
.desktop-icon:focus {
    background: var(--bg-titlebar);   /* navy selection (Win 3.1 style) */
    border-color: var(--bg-titlebar);
    outline: none;
}

.desktop-icon-img {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 4px;
}

.desktop-icon-name {
    font-size: 10px;
    color: var(--text-primary);   /* black icon label */
    word-break: break-all;
    line-height: 1.3;
    font-family: var(--font-ui);
}

.desktop-icon:hover .desktop-icon-name,
.desktop-icon:focus .desktop-icon-name {
    color: #FFFFFF;   /* white text when navy-selected */
}

.desktop-icon--locked .desktop-icon-img {
    opacity: 0.5;
}

.desktop-icon--locked .desktop-icon-name {
    color: #8B0000;   /* dark red for locked items */
}

/* ── Output / Command Area — CRT green on black (lore aesthetic) */
#output-body {
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--vexyl-green);
    background: #000000;           /* black CRT background inside the gray window */
    overflow-y: auto;
    height: 100%;
    padding: 4px;
    font-family: var(--font-mono);
}

/* ── Input Bar (absolute-positioned in #main-area) ─────────── */
#input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-window);   /* gray input bar */
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
}

#prompt-label {
    color: var(--text-accent);   /* navy prompt label */
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    font-family: var(--font-mono);
}

#cmd-input {
    flex: 1;
    background: #FFFFFF;           /* white input field */
    border-top:    2px solid #808080;   /* inset sunken border */
    border-left:   2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
    outline: none;
    color: #000000;
    font-family: var(--font-mono);
    font-size: 13px;
    caret-color: #000000;
    padding: 2px 4px;
    /* Touch-friendly minimum tap height */
    min-height: 28px;
}

#cmd-input::placeholder {
    color: #808080;
}

#cmd-submit {
    background: var(--bg-window);   /* Win 3.1 gray button */
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 12px;
    padding: 4px 14px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    /* Touch-friendly */
    min-height: 28px;
    touch-action: manipulation;
}

#cmd-submit:hover {
    background: var(--bg-titlebar);   /* navy on hover */
    color: #FFFFFF;
}

#cmd-submit:active {
    border-top:    2px solid #808080;
    border-left:   2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

/* ── Mobile Bottom Navigation ──────────────────────────────── */
#mobile-nav {
    display: none;
    grid-area: mobile-nav;
    align-items: stretch;
    background: var(--bg-window);   /* gray mobile nav bar */
    border-top: 2px solid #808080;
    gap: 2px;
    padding: 4px;
}

.mob-nav-btn {
    flex: 1;
    background: var(--bg-window);
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 11px;
    padding: 6px 2px;
    cursor: pointer;
    text-align: center;
    touch-action: manipulation;
    transition: background 0.1s, color 0.1s;
}

.mob-nav-btn:hover,
.mob-nav-btn:active {
    background: var(--bg-titlebar);
    color: #FFFFFF;
}

/* ── Taskbar ───────────────────────────────────────────────── */
#taskbar {
    grid-area: taskbar;
    display: flex;
    align-items: center;
    background: var(--bg-window);   /* Win 3.1 gray taskbar */
    border-top: 2px solid #808080;
    padding: 0 8px;
    font-size: 11px;
    gap: 12px;
    font-family: var(--font-ui);
}

#taskbar .chapter-indicator {
    color: var(--text-primary);   /* black taskbar text */
}

#taskbar .clearance-indicator {
    color: #8B0000;   /* dark red clearance indicator */
    font-weight: bold;
    margin-left: auto;
}

/* ── ORION SVG Avatar ───────────────────────────────────── */
.retrobot-svg {
    display: block;
    margin: 0 auto;
}

/* ── Glitch Animation ──────────────────────────────────────── */
@keyframes glitch-flicker {
    0%   { opacity: 1; }
    92%  { opacity: 1; }
    93%  { opacity: 0.4; clip-path: inset(10% 0 30% 0); transform: translateX(-3px); }
    94%  { opacity: 1; clip-path: none; transform: none; }
    97%  { opacity: 1; }
    98%  { opacity: 0.6; clip-path: inset(60% 0 5% 0); transform: translateX(3px); }
    99%  { opacity: 1; clip-path: none; transform: none; }
    100% { opacity: 1; }
}

@keyframes glitch-border {
    0%   { border-color: var(--border-color); }
    50%  { border-color: #FF0000; }
    100% { border-color: var(--border-color); }
}

body.glitched .vexyl-window {
    animation: glitch-border 2s infinite;
}

body.glitched #topbar .logo {
    animation: glitch-flicker 4s infinite;
}

/* ── Crash Overlay ─────────────────────────────────────────── */
#crash-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    color: #FF0000;
    font-size: 18px;
    text-align: center;
    padding: 40px;
}

#crash-overlay.active {
    display: flex;
}

#crash-overlay .crash-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 16px;
    text-shadow: 0 0 20px #FF0000;
}

#crash-overlay .crash-detail {
    font-size: 12px;
    color: #888;
    margin-top: 20px;
    line-height: 1.8;
}

/* ── Scrollbar Styling — Win 3.1 gray scrollbars ──────────── */
::-webkit-scrollbar {
    width: 16px;   /* Win 3.1 wider scrollbars */
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #C0C0C0;
    border: 1px solid #808080;
}

::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #404040;
    border-right:  2px solid #404040;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #D0D0D0;
}

::-webkit-scrollbar-button {
    background: #C0C0C0;
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #404040;
    border-right:  2px solid #404040;
    display: block;
    height: 16px;
}

/* ── Utility ───────────────────────────────────────────────── */
.hidden {
    display: none !important;
}

.blink {
    animation: blink 1s step-end infinite;
}

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

/* ── Topbar Dropdown Menus ─────────────────────────────────── */
.menu-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.menu-group .menu-item {
    padding: 2px 10px;
    cursor: pointer;
    color: var(--text-primary);   /* black text */
    border: 1px solid transparent;
    transition: background 0.1s, color 0.1s;
    user-select: none;
    font-family: var(--font-ui);
}

.menu-group .menu-item:hover,
.menu-group.open .menu-item {
    background: var(--bg-titlebar);   /* navy selection */
    color: #FFFFFF;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #C0C0C0;     /* Win 3.1 gray dropdown */
    border: 2px solid;
    border-color: #FFFFFF #404040 #404040 #FFFFFF;
    border-top: none;
    box-shadow: 2px 2px 0 #000000;
    z-index: 200;
    flex-direction: column;
}

.menu-group.open .dropdown {
    display: flex;
}

.dropdown-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid #808080;
    color: #000000;    /* black dropdown text */
    font-family: var(--font-ui);
    font-size: 12px;
    padding: 5px 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--bg-titlebar);   /* navy selection */
    color: #FFFFFF;
}

.dropdown-item--danger {
    color: #8B0000;   /* dark red text for danger items */
}

.dropdown-item--danger:hover {
    background: #8B0000;
    color: #FFFFFF;
}

.dropdown-separator {
    height: 2px;
    background: #808080;
    border-top: 1px solid #404040;
    border-bottom: 1px solid #FFFFFF;
    margin: 2px 0;
}

/* ── Screen Glitch Animation ──────────────────────────────── */
@keyframes screen-glitch-anim {
    0%   { transform: none;                             filter: none; }
    15%  { transform: skewX(-3deg) translateX(-4px);    filter: hue-rotate(90deg) brightness(1.4); }
    30%  { transform: skewX(2deg)  translateX(3px);     filter: hue-rotate(200deg) invert(0.05); }
    45%  { transform: none;                             filter: none; }
    60%  { transform: translateX(-2px) scaleY(1.01);   filter: brightness(0.9); }
    75%  { transform: none;                             filter: none; }
    90%  { transform: skewX(-1deg);                    filter: hue-rotate(45deg); }
    100% { transform: none;                             filter: none; }
}

body.screen-glitch {
    animation: screen-glitch-anim 0.45s steps(1) forwards;
    pointer-events: none; /* prevent mis-clicks during glitch */
}

body.screen-glitch .vexyl-window {
    border-color: #FF0000;
}

/* ── Topbar Browser Icon Button ────────────────────────────── */
#topbar-browser {
    background: var(--bg-window);     /* Win 3.1 gray button */
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: var(--text-primary);       /* black text */
    font-family: var(--font-ui);
    font-size: 12px;
    padding: 2px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
}

#topbar-browser:hover {
    background: var(--bg-titlebar);   /* navy on hover */
    color: #FFFFFF;
}

#topbar-browser:active {
    border-top:    2px solid #808080;
    border-left:   2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

#topbar-browser svg {
    flex-shrink: 0;
}

/* Browser button text — hidden on very small screens via the 480px media query */
.browser-btn-text {
    display: inline;
}

/* ── Intranet Browser Window Overlay ───────────────────────── */
#browser-window {
    position: fixed;
    /* sit just inside the OS chrome */
    top:    32px;  /* below topbar */
    left:   220px; /* right of sidebar */
    right:  0;
    bottom: 24px;  /* above taskbar */
    z-index: 500;
    display: flex;
    flex-direction: column;
    background: var(--bg-window);   /* gray */
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #404040;
    border-right:  2px solid #404040;
    box-shadow: 2px 2px 0 #000000;
}

#browser-window.hidden {
    display: none;
}

/* Address / navigation bar */
.browser-addressbar {
    display: flex;
    align-items: center;
    background: var(--bg-window);   /* gray address bar */
    border-bottom: 2px solid #808080;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    gap: 8px;
    flex-shrink: 0;
}

.browser-address-label {
    color: var(--text-primary);
    white-space: nowrap;
}

#browser-address {
    flex: 1;
    color: var(--text-primary);
    background: #FFFFFF;       /* white address field */
    border-top:    1px solid #808080;
    border-left:   1px solid #808080;
    border-bottom: 1px solid #FFFFFF;
    border-right:  1px solid #FFFFFF;
    padding: 1px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Navigation buttons inside the browser titlebar */
.browser-nav-btn {
    width: 22px !important;
    height: 18px !important;
    font-size: 10px !important;
}

/* iframe content area */
.browser-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
}

#browser-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #FFFFFF;   /* white iframe background */
}

/* ── Responsive: medium screens (small tablets / wide landscape phones) ── */
@media (min-width: 769px) and (max-width: 1100px) {
    /* Narrow the sidebar slightly to give main area more breathing room */
    #desktop {
        grid-template-columns: 180px 1fr;
    }
    /* Scale down sidebar typography to fit the narrower column */
    #retrobot-speech {
        font-size: 10px;
    }
    /* Shrink icon-window so it fits the narrower main area */
    #icon-window {
        width: 172px;
    }
    /* Adjust viewer right-anchor to match narrower icon window */
    #viewer-window {
        right: 192px; /* 172px + 20px gap */
    }
}

/* Compact desktop layout for short viewports (landscape phones, small laptops) */
@media (max-height: 500px) and (min-width: 600px) {
    /* Shrink the output window so the viewer gets usable height */
    #output-window {
        height: 110px;
        bottom: 44px;
    }
    #viewer-window {
        bottom: 164px; /* 110px + 44px + 10px breathing room */
    }
    #input-bar {
        bottom: 6px;
    }
}

/* ── Responsive: mobile layout on small screens ─────────────── */
@media (max-width: 768px) {
    #desktop {
        grid-template-columns: 1fr;
        /* Let topbar height grow naturally so items never clip */
        grid-template-rows: auto 1fr 56px 24px;
        grid-template-areas:
            "topbar"
            "main"
            "mobile-nav"
            "taskbar";
    }
    #sidebar {
        display: none;
    }
    /* Show mobile nav */
    #mobile-nav {
        display: flex;
    }
    /* Compact topbar: tighter gaps and smaller text so items fit on small screens */
    #topbar {
        gap: 0;
        padding: 0 4px;
        flex-wrap: wrap;
        row-gap: 0;
    }
    #topbar .logo {
        font-size: 11px;
        margin-right: 6px;
    }
    #topbar .menu-item {
        padding: 2px 5px;
        font-size: 11px;
    }
    /* Hide the clock — saves ~80px of horizontal space on mobile */
    #topbar-clock {
        display: none;
    }
    /* Compact the browser button */
    #topbar-browser {
        font-size: 10px;
        padding: 2px 5px;
    }
    /* On mobile, stack windows vertically (override absolute positioning) */
    #main-area .vexyl-window,
    #input-bar {
        position: static !important;
        width:  auto !important;
        height: auto !important;
        right:  auto !important;
        bottom: auto !important;
    }
    #main-area {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 6px;
        overflow-y: auto;
        overflow-x: hidden; /* prevent horizontal bleed from wide content */
    }
    /* Viewer grows to fill all remaining vertical space — eliminates dead teal gap */
    #viewer-window {
        flex: 1;
        min-height: 220px;
    }
    /* Increase DATA/pre font size for readability on small screens */
    #viewer-content pre {
        font-size: 15px;
    }
    /* Allow the memo SVG to use its natural width without being squished */
    #viewer-content svg {
        max-width: 100%;
        height: auto;
    }
    #icon-window {
        flex-shrink: 0;
    }
    /* Output window adapts to its content with sensible min/max bounds */
    #output-window {
        height: auto;
        min-height: 110px;
        max-height: 200px;
        flex-shrink: 0;
    }
    /* Clip window bodies so long lines don't cause horizontal scroll */
    .window-body,
    #icon-grid {
        overflow-x: hidden;
    }
    /* Touch-friendly input */
    #cmd-input,
    #cmd-submit {
        font-size: 16px; /* prevent iOS zoom on focus */
        min-height: 36px;
    }
    /* Reduce submit button padding so it doesn't crowd the input on narrow screens */
    #cmd-submit {
        padding: 4px 8px;
        flex-shrink: 0;
    }
    /* Ensure the prompt label doesn't push everything off-screen */
    #prompt-label {
        font-size: 11px;
        flex-shrink: 0;
    }
    /* Tighten the input row layout to prevent clipping on narrow phones */
    #input-bar {
        gap: 4px;
        padding: 4px 6px;
        overflow: hidden; /* contain any flex overflow within the bar */
    }
    /* Allow the text input to shrink below its content size in flex */
    #cmd-input {
        min-width: 0;
    }
    /* Larger ribbon buttons for touch */
    .ribbon-btn {
        padding: 8px 8px;
        font-size: 13px;
    }
    /* Browser window on mobile — full screen */
    #browser-window {
        left:   0;
        right:  0;
        top:    0;
        bottom: 80px; /* above mobile-nav + taskbar */
    }
    /* Disable resize handle on mobile (touch-drag is sufficient) */
    .window-resize-handle {
        display: none;
    }
    /* Thinner scrollbars on mobile — Win 3.1 16px bars waste too much space */
    ::-webkit-scrollbar {
        width:  8px;
        height: 8px;
    }
    ::-webkit-scrollbar-button {
        height: 8px;
        width:  8px;
    }
}

/* ── Very small phones (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
    /* Abbreviate the logo to the icon glyph only */
    #topbar .logo {
        font-size: 0;         /* hide the text */
        margin-right: 2px;
        flex-shrink: 0;
    }
    #topbar .logo::after {
        content: '▣';
        font-size: 14px;
        color: var(--text-accent);
        display: inline;
    }
    /* Hide only the WWW label — keep the globe SVG as a compact icon button */
    .browser-btn-text {
        display: none;
    }
    #topbar-browser {
        padding: 2px 4px;
    }
    /* Squeeze menu item padding even further */
    #topbar .menu-item {
        padding: 2px 4px;
        font-size: 10px;
    }
}

/* ── Landscape orientation on mobile phones ─────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    /* Side-by-side panels make much better use of the wide-but-short viewport */
    #main-area {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 4px;
        padding: 4px;
    }
    /* Viewer takes remaining width on the left, aligned to top */
    #viewer-window {
        flex: 1;
        min-width: 200px;
        min-height: 160px;
        align-self: flex-start;
    }
    /* File manager sits to the right of the viewer */
    #icon-window {
        width: 160px;
        align-self: flex-start;
        flex-shrink: 0;
    }
    /* Output and input bar span the full width below */
    #output-window {
        width: 100%;
        height: 110px;
        max-height: 110px;
        flex-shrink: 0;
    }
    #input-bar {
        width: 100%;
    }
}

/* ── Windows 3.1 Style Enhancements ────────────────────────── */
/*
 * VEXYL-OS interface styled after Windows 3.1 Program Manager.
 * Classic gray desktop with navy active title bars, 3D raised chrome.
 */

/* Window border — Win 3.1 raised 3D frame */
.vexyl-window {
    box-shadow:
        inset  1px  1px 0 #DFDFDF,   /* inner top/left highlight  */
        inset -1px -1px 0 #808080,   /* inner bottom/right shadow */
        2px 2px 0 #000000;           /* outer drop shadow         */
}

/* Title bar — Win 3.1 navy gradient for active window */
.window-titlebar {
    background: linear-gradient(90deg, #000080 0%, #0000AA 50%, #000080 100%);
    border-bottom: 1px solid #000080;
}

/* Title bar text — bright white, bold, normal case */
.window-title {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
    text-shadow: none;
    letter-spacing: 0;
}

/* Window control buttons — Win 3.1 gray 3D squares (already set above, reinforce) */
.wctl-btn {
    width: 16px;
    height: 14px;
    background: #C0C0C0;
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #404040;
    border-right:  2px solid #404040;
    color: #000000;
    font-weight: bold;
    font-size: 9px;
}

.wctl-btn:hover {
    background: #D0D0D0;
    color: #000000;
}

.wctl-btn:active {
    border-top:    2px solid #404040;
    border-left:   2px solid #404040;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

/* Sidebar ribbon buttons — Win 3.1 gray raised style */
.ribbon-btn {
    background: #C0C0C0;
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: #000000;
}

.ribbon-btn:active {
    border-top:    2px solid #808080;
    border-left:   2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

/* ENTER / submit button — Win 3.1 raised button */
#cmd-submit {
    background: #C0C0C0;
    border-top:    2px solid #FFFFFF;
    border-left:   2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right:  2px solid #808080;
    color: #000000;
}

#cmd-submit:active {
    border-top:    2px solid #808080;
    border-left:   2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right:  2px solid #FFFFFF;
}

/* Topbar — Win 3.1 flat gray menu bar, no glow */
#topbar .menu-group .menu-item {
    border: 1px solid transparent;
    padding: 2px 8px;
    font-size: 13px;
    color: #000000;
}

#topbar .menu-group.open .menu-item,
#topbar .menu-group .menu-item:hover {
    background: #000080;     /* navy selection */
    color: #FFFFFF;
    border: 1px solid transparent;
}

/* Dropdown menus — Win 3.1 gray popup */
.dropdown {
    background: #C0C0C0;
    border:     2px solid;
    border-color: #FFFFFF #404040 #404040 #FFFFFF;
    border-top: none;
    box-shadow: 2px 2px 0 #000000;
}

/* Desktop — plain teal, no grid pattern */
#desktop {
    background-image: none;
    background-color: #008080;  /* Win 3.1 teal desktop */
}

/* Topbar — Win 3.1 raised menu bar edge */
#topbar {
    border-bottom: 2px solid #808080;
    box-shadow:
        0  1px 0 #FFFFFF;   /* highlight below border */
}

/* Taskbar — Win 3.1 raised status bar */
#taskbar {
    border-top: 2px solid #FFFFFF;
    box-shadow:
        0 -1px 0 #808080;   /* shadow above highlight */
}