/* --- ESTILOS DO CATSCAPE NAVIGATOR (WINDOWS XP LUNA) --- */
#catscape-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif; /* Fonte padrão do XP */
}

#catscape-modal.active { display: flex; }

.catscape-window {
    width: 800px; max-width: 95vw; height: 600px; max-height: 90vh;
    background-color: #ece9d8; /* Fundo bege clássico do XP */
    border: 3px solid #0053e5; /* Borda azul XP */
    border-radius: 8px 8px 0 0; /* Apenas o topo era arredondado */
    box-shadow: 0px 10px 25px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; color: #000;
    overflow: hidden; /* Mantém a barra de título contida na borda arredondada */
}

/* Barra de Título Azul Gradiente */
.catscape-titlebar {
    background: linear-gradient(to bottom, #0058e6 0%, #3a93ff 8%, #288eff 40%, #127dff 88%, #036bfe 100%);
    color: white; 
    height: 30px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 4px 0 4px; 
}

.title-text {
    font-weight: bold; 
    font-size: 13px;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
}

.title-buttons { display: flex; gap: 2px; align-items: center; }

/* Botões do Windows XP */
.xp-btn {
    width: 21px; height: 21px;
    border: 1px solid #fff;
    border-radius: 3px;
    color: white; font-weight: bold; font-family: Tahoma; font-size: 10px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 1px #000;
}

.xp-min, .xp-max {
    background: linear-gradient(to bottom, #3f8cf3 0%, #1a66e6 100%);
    border-color: #fff #003399 #003399 #fff;
}
.xp-min:active, .xp-max:active {
    background: #1a66e6; border-color: #003399 #fff #fff #003399;
}

/* Botão de Fechar Vermelho */
.xp-close {
    background: linear-gradient(to bottom, #ea7b70 0%, #e2493a 100%);
    border-color: #fff #8a1c13 #8a1c13 #fff;
    font-size: 12px;
}
.xp-close:hover {
    background: linear-gradient(to bottom, #f2978e 0%, #e85a4b 100%);
}
.xp-close:active {
    background: #d03527; border-color: #8a1c13 #fff #fff #8a1c13;
}

/* Menus */
.catscape-menubar { 
    display: flex; gap: 15px; padding: 2px 10px; font-size: 11px; 
    background-color: #ece9d8; border-bottom: 1px solid #c9c7ba;
}
.catscape-menubar span { cursor: pointer; padding: 2px 5px; }
.catscape-menubar span:hover { background-color: #316ac5; color: white; border-radius: 2px; }

/* Corpo Principal e Iframe */
.catscape-main { 
    flex-grow: 1; display: flex; flex-direction: column; padding: 2px; background: #ece9d8;
}

.catscape-content-area {
    flex-grow: 1; background: #000; 
    border: 1px solid #7f9db9; /* Borda interna fina do iframe */
    position: relative;
}

#catscape-iframe { width: 100%; height: 100%; background-color: #000; }

/* Barra de Status Inferior */
.catscape-statusbar { 
    display: flex; height: 20px; padding: 0 2px 2px 2px; gap: 2px; 
    background: #ece9d8; font-size: 11px; color: #000;
}
.status-panel {
    border: 1px solid; border-color: #aca899 #fff #fff #aca899;
    flex-grow: 1; display: flex; align-items: center; padding: 0 5px;
}
.resize-panel {
    flex-grow: 0; width: 15px; border: none; position: relative; padding: 0;
}
/* Recriando os pontinhos de puxar a janela usando um SVG embutido no CSS */
.resize-grip {
    position: absolute; bottom: 0; right: 0; width: 12px; height: 12px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M11 0 L12 0 L12 1 L11 1 Z M8 3 L9 3 L9 4 L8 4 Z M11 3 L12 3 L12 4 L11 4 Z M5 6 L6 6 L6 7 L5 7 Z M8 6 L9 6 L9 7 L8 7 Z M11 6 L12 6 L12 7 L11 7 Z M2 9 L3 9 L3 10 L2 10 Z M5 9 L6 9 L6 10 L5 10 Z M8 9 L9 9 L9 10 L8 10 Z M11 9 L12 9 L12 10 L11 10 Z" fill="%23aca899"/><path d="M10 -1 L11 -1 L11 0 L10 0 Z M7 2 L8 2 L8 3 L7 3 Z M10 2 L11 2 L11 3 L10 3 Z M4 5 L5 5 L5 6 L4 6 Z M7 5 L8 5 L8 6 L7 6 Z M10 5 L11 5 L11 6 L10 6 Z M1 8 L2 8 L2 9 L1 9 Z M4 8 L5 8 L5 9 L4 9 Z M7 8 L8 8 L8 9 L7 9 Z M10 8 L11 8 L11 9 L10 9 Z" fill="%23ffffff"/></svg>') no-repeat;
}

/* --- MÁGICA: BARRAS DE ROLAGEM ESTILO WINDOWS XP --- */
::-webkit-scrollbar { 
    width: 17px !important; 
    height: 17px !important; 
    background: #f0f0ea !important; 
    border-left: 1px solid #e1e0db !important; 
}
::-webkit-scrollbar-track { 
    background: #f0f0ea !important; 
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #c0d7f2 0%, #9cbef0 50%, #87aef0 51%, #a7cbf2 100%) !important;
    border: 1px solid #6385d0 !important; 
    border-radius: 4px !important; /* XP scrollbars eram arredondadas */
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #d4e6f9 0%, #b5cff4 50%, #a4c4f4 51%, #c0daf9 100%) !important;
}
/* Oculta os botões com as setas para focar na barra principal arredondada */
::-webkit-scrollbar-button { 
    display: none !important; 
}

/* --- ESTADO MAXIMIZADO DA JANELA --- */
.catscape-window.maximized {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important; /* Perde as bordas redondas no topo */
    border: none !important; /* Remove a borda azul para preencher 100% da tela */
    transform: translate3d(0, 0, 0) !important; /* Trava no centro ignorando o arrasto */
    transition: width 0.15s, height 0.15s; /* Um efeitinho rápido ao maximizar */
}