/* browser.css - IE Style with OG Icons, Tabs, and Status Bar Refinements */

.browser-container-ie {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Allow flex shrinking */
    background-color: #c0c0c0;
    font-family: "MS Sans Serif", "Tahoma", sans-serif; /* More authentic Win9x font */
    font-size: 11px;
}

.browser-toolbars-wrapper-ie {
    background-color: #c0c0c0;
    padding-left: 4px; 
    position: relative;
    /* border-bottom: 1px solid #808080; -- Moved to individual toolbars or tab bar */
    display: flex;
    flex-direction: column; /* Stack toolbars vertically */
}

.browser-toolbars-wrapper-ie::before { 
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #c0c0c0;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #808080;
}

/* Menu Bar */
.browser-menu-bar-ie {
    display: flex;
    padding: 2px 1px; 
    border-bottom: 1px solid #808080; 
    box-shadow: 0 1px 0 #ffffff inset; 
    flex-shrink: 0;
}
.browser-menu-bar-ie button {
    background: none;
    border: 1px solid transparent;
    padding: 2px 6px;
    margin: 0 1px;
    font-family: "MS Sans Serif", "Tahoma", sans-serif; /* Ensure font consistency */
    font-size: 11px;
    color: #808080; /* Grayed out for disabled */
    cursor: default; 
}
.browser-menu-bar-ie button u { /* Style for underline */
    text-decoration: underline;
}
.browser-menu-bar-ie button:hover:not(:disabled) { 
    background-color: #0a246a; 
    color: white;
    border-color: #0a246a;
}

/* Main Button Toolbar */
.browser-main-toolbar-ie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 1px 2px; 
    border-bottom: 1px solid #808080; 
    box-shadow: 0 1px 0 #ffffff; 
    min-height: 38px; 
    flex-shrink: 0;
}
.browser-nav-buttons-ie {
    display: flex;
    align-items: center;
}
.browser-nav-buttons-ie button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid transparent; 
    padding: 1px 4px;
    margin: 0 1px;
    font-size: 9px; 
    color: black;
    cursor: pointer;
    min-width: 40px; 
    height: 36px;
}
.browser-nav-buttons-ie button:hover:not(:disabled) {
    border: 1px solid #808080; 
    background-color: #dbdce0; 
}
.browser-nav-buttons-ie button:active:not(:disabled) {
    border: 1px inset #808080;
    background-color: #c0c0c0;
}
.browser-nav-buttons-ie button:disabled {
    color: #808080; 
    cursor: default;
}

.browser-nav-buttons-ie button .icon-area {
    width: 20px; 
    height: 20px;
    background-repeat: no-repeat;
    margin-bottom: 1px;
    background-image: url('./browser-toolbar-icons-gray.png'); 
}
.browser-nav-button-back .icon-area    { background-position: 0 0; }
.browser-nav-button-forward .icon-area { background-position: -20px 0; }
.browser-nav-button-refresh .icon-area { background-position: -60px 0; } 
.browser-nav-button-stop .icon-area    { background-position: -40px 0; }
.browser-nav-button-home .icon-area    { background-position: -80px 0; }
.browser-nav-button-search .icon-area  { background-position: -100px 0; }
.browser-nav-button-favorites .icon-area { background-position: -100px 0; } 
.browser-nav-button-history .icon-area   { background-position: -120px 0; } 

.browser-nav-buttons-ie button:hover:not(:disabled) .icon-area,
.browser-nav-buttons-ie button:active:not(:disabled) .icon-area {
    background-image: url('./browser-toolbar-icons-color.png');
}
.browser-nav-buttons-ie button:disabled .icon-area {
    background-image: url('./browser-toolbar-icons-gray.png') !important;
}

.toolbar-separator {
    width: 1px;
    height: 30px;
    background-color: #808080;
    box-shadow: 1px 0 0 #ffffff; 
    margin: 0 3px;
}

.browser-throbber-netscape {
    width: 38px;  
    height: 38px; 
    margin-left: auto; 
    margin-right: 5px;
    transition: transform 0.2s ease;
}

.browser-throbber-netscape.throbber-active {
    /* animated webp handles its own animation */
}

/* Address Bar Toolbar */
.browser-address-toolbar-ie {
    display: flex;
    align-items: center;
    padding: 3px 2px 2px 2px;
    border-bottom: 1px solid #808080; /* Separator below address bar */
    box-shadow: 0 1px 0 #ffffff; 
    flex-shrink: 0;
}
.browser-address-bar-label {
    margin-right: 4px;
    font-weight: normal; 
    color: #505050; 
    padding-left: 2px;
}
.browser-address-bar-input {
    flex-grow: 1;
    height: 21px;
    padding: 1px 3px;
    border: 1px solid #808080; 
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: 1px 1px 0 #c0c0c0 inset; 
    background-color: #ffffff;
    font-size: 11px;
    margin-right: 4px;
}
.browser-address-bar-go,
.browser-address-bar-links {
    background-color: #c0c0c0;
    border: 1px outset #dfdfdf; 
    padding: 1px 6px; /* Adjusted padding for Go button with icon */
    font-size: 11px;
    height: 21px;
    cursor: pointer;
    display: flex; /* For icon and text alignment */
    align-items: center;
}
.browser-address-bar-go .icon-area { /* Go button icon */
    width: 20px; /* Smaller icon for Go button */
    height: 16px;
    background-image: url('./browser-toolbar-icons-color.png'); /* Using color sprite */
    background-position: -20px center; /* Using Forward arrow icon for Go */
    background-repeat: no-repeat;
    margin-right: 3px;
}
.browser-address-bar-go { margin-right: 4px; }
.browser-address-bar-go:active,
.browser-address-bar-links:active:not(:disabled) {
    border-style: inset;
}
.browser-address-bar-links {
    padding: 1px 6px;
    color: #303030;
}
.browser-address-bar-links:disabled {
    color: #808080;
    cursor: default;
}

/* Tab Bar - IE Style */
.browser-tab-bar-ie {
    display: flex;
    align-items: flex-end; /* Align tabs to the bottom of the bar */
    background-color: #c0c0c0;
    padding: 2px 2px 0 2px; /* Padding around tabs, no bottom padding */
    border-bottom: 1px solid #808080; /* Separator below tabs */
    box-shadow: 0 1px 0 #ffffff; /* Top highlight */
    flex-shrink: 0;
    min-height: 24px; /* Ensure enough height for tabs */
    overflow-x: auto; /* Allow horizontal scrolling if many tabs */
    overflow-y: hidden;
}
.browser-tab-ie {
    display: flex;
    align-items: center;
    background-color: #b0b0b0; /* Slightly darker for inactive tabs */
    border: 1px outset #dfdfdf;
    border-bottom: none; /* Key for tab appearance */
    padding: 2px 5px 2px 3px; /* Top/bottom, right, left for content */
    margin-right: 1px; /* Slight separation or overlap */
    margin-top: 2px; /* Push tabs down slightly from top of bar */
    font-size: 10px;
    color: black;
    cursor: default; /* For clicking tab itself */
    position: relative;
    max-width: 150px; /* Limit tab width */
    white-space: nowrap;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.browser-tab-ie.active {
    background-color: #d4d0c8; /* Lighter for active tab, closer to window content bg */
    z-index: 1; /* Bring active tab to front */
    padding-bottom: 3px; /* Make it extend down slightly more */
    margin-bottom: -1px; /* Overlap the tab bar's bottom border */
    font-weight: normal; /* IE tabs often weren't bold */
}
.tab-favicon-ie {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    flex-shrink: 0;
}
.tab-favicon-ie img {
    width: 100%;
    height: 100%;
}
.tab-title-text-ie {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}
.tab-close-btn-ie {
    margin-left: 5px;
    padding: 0 3px;
    font-size: 12px; /* Slightly larger for 'x' */
    line-height: 1;
    color: #404040;
    cursor: pointer;
    border-radius: 2px;
    flex-shrink: 0;
}
.tab-close-btn-ie:hover {
    background-color: #ff8080;
    color: white;
}
.browser-new-tab-btn-ie {
    background-color: #c0c0c0;
    border: 1px outset #dfdfdf;
    padding: 1px 5px;
    margin-left: 3px; /* Space from last tab */
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    height: 18px; 
    align-self: center; /* Vertically center in the tab bar */
    line-height: 14px;
    flex-shrink: 0;
}
.browser-new-tab-btn-ie:active {
    border-style: inset;
}


/* Webview Area */
browser-webview { 
    flex-grow: 1;
    background-color: white;
    border: 1px solid #000000; 
    display: flex; 
    align-items: center;
    justify-content: center;
    overflow: auto;
}

/* Browser content area — holds browserbox-webview */
.browser-content {
    flex: 1;
    min-height: 0; /* Critical: allows flex item to shrink below content size */
    overflow: hidden;
    position: relative;
    background-color: white;
    border: 1px solid #000000;
    outline: none;
}

.browser-content:focus,
.browser-content:focus-visible {
    outline: none;
}

browserbox-webview {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
}

browserbox-webview:focus,
browserbox-webview:focus-visible {
    outline: none;
}

/* Status Bar */
.browser-status-bar-ie {
    display: flex;
    height: 22px;
    border-top: 1px solid #ffffff; 
    background-color: #c0c0c0;
    padding: 1px 0px 0px 1px; 
    flex-shrink: 0;
}
.status-bar-panel {
    border: 1px solid #808080; 
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    padding: 0 5px; /* Adjusted padding for vertical centering */
    margin: 1px; 
    line-height: 18px; /* Align text vertically within 20px effective height */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    display: flex; /* For aligning icon and text */
    align-items: center;
}
.status-bar-main { /* First long panel */
    flex-grow: 2; 
    min-width: 150px;
}
.status-bar-icon-main {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    display: inline-block; /* Default for img, but explicit */
}
.status-bar-text-main {
    flex-grow: 1;
}
.status-bar-short { /* Two middle short square panels */
    width: 25px; 
    padding: 0; /* Remove padding if they are just visual separators */
    justify-content: center; /* Center content if any */
}
.status-bar-zone { /* Last half-long panel */
    flex-grow: 1;
    min-width: 100px;
}
.status-bar-icon-zone {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
.status-bar-zone-text {
    flex-grow: 1;
}

/* ========================================
   Win98-style Focus States
   ======================================== */

/* Remove default browser focus outlines */
.browser-container-ie *:focus {
    outline: none;
}

/* Win98 dotted focus ring for buttons */
.browser-nav-buttons-ie button:focus-visible,
.browser-address-bar-go:focus-visible,
.browser-address-bar-links:focus-visible,
.browser-new-tab-btn-ie:focus-visible,
.browser-tab-ie:focus-visible,
.browser-tab-close-ie:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -3px;
}

/* Address bar input - Win98 style focus (no outline, just keep sunken border) */
.browser-address-bar-input:focus,
.browser-address-bar-input:focus-visible {
    outline: none;
}

/* Menu bar buttons */
.browser-menu-bar-ie button:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -2px;
}