/**
 * DeskGoWeb - Desktop CSS
 * Complete styling for web desktop environment
 */

/* Base font variables - can be overridden by settings */
:root {
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 12px;
    --font-size-large: 20px;
    --font-size-heading: 24px;
}

/* Apply font variables to body */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

/* Default Dark Theme - Clean and Professional */
:root[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2e2e2e;
    --bg-tertiary: #424242;
    --text-primary: #e0e0e0;
    --text-secondary: #999999;
    --border-color: #333333;
    --accent-color: #4a9d5f;
    --accent-hover: #5eb370;
    --shadow: rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] {
    --bg-primary: #e8e8e8;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #ffffff;
    --text-primary: #212121;
    --text-secondary: #757575;
    --border-color: #d0d0d0;
    --accent-color: #4a9d5f;
    --accent-hover: #5eb370;
    --shadow: rgba(0, 0, 0, 0.2);
}

/* Solid Color Themes - Higher contrast tiers */
:root[data-theme="red"] {
    --bg-primary: #7a5555;
    --bg-secondary: #9d7070;
    --bg-tertiary: #c09090;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #9d7070;
    --accent-color: #e5b0b0;
    --accent-hover: #f0c0c0;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="orange"] {
    --bg-primary: #7a6855;
    --bg-secondary: #9d8570;
    --bg-tertiary: #c0a890;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #9d8570;
    --accent-color: #e5cab0;
    --accent-hover: #f0d8c0;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="purple"] {
    --bg-primary: #6b557a;
    --bg-secondary: #88709d;
    --bg-tertiary: #aa90c0;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #88709d;
    --accent-color: #cab0e5;
    --accent-hover: #d8c0f0;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="green"] {
    --bg-primary: #557a68;
    --bg-secondary: #709d85;
    --bg-tertiary: #90c0a8;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #709d85;
    --accent-color: #b0e5ca;
    --accent-hover: #c0f0d8;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="teal"] {
    --bg-primary: #557a7a;
    --bg-secondary: #709d9d;
    --bg-tertiary: #90c0c0;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #709d9d;
    --accent-color: #b0e5e5;
    --accent-hover: #c0f0f0;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="blue"] {
    --bg-primary: #55687a;
    --bg-secondary: #70859d;
    --bg-tertiary: #90a8c0;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #70859d;
    --accent-color: #b0cae5;
    --accent-hover: #c0d8f0;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="pink"] {
    --bg-primary: #7a557a;
    --bg-secondary: #9d709d;
    --bg-tertiary: #c090c0;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #9d709d;
    --accent-color: #e5b0e5;
    --accent-hover: #f0c0f0;
    --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="gray"] {
    --bg-primary: #5a5a5a;
    --bg-secondary: #7a7a7a;
    --bg-tertiary: #9e9e9e;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #7a7a7a;
    --accent-color: #d0d0d0;
    --accent-hover: #e0e0e0;
    --shadow: rgba(0, 0, 0, 0.25);
}

/* Gradient Themes - Higher contrast combinations */
:root[data-theme="red-orange"] {
    --bg-primary: #7a5f55;
    --bg-secondary: #9d7d70;
    --bg-tertiary: #c09d90;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #9d7d70;
    --accent-color: #e5c0b0;
    --accent-hover: #f0d0c0;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #7a5555 0%, #7a6855 100%);
}

:root[data-theme="orange-yellow"] {
    --bg-primary: #8b8070;
    --bg-secondary: #9d9282;
    --bg-tertiary: #afa494;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #9d9282;
    --accent-color: #d9d0a5;
    --accent-hover: #e5dcb7;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #8b7b6b 0%, #8b8b6b 100%);
}

:root[data-theme="purple-pink"] {
    --bg-primary: #826b8b;
    --bg-secondary: #947d9d;
    --bg-tertiary: #a68faf;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #947d9d;
    --accent-color: #d5a5d9;
    --accent-hover: #e1b7e5;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #7d6b8b 0%, #8b6b8b 100%);
}

:root[data-theme="green-yellow"] {
    --bg-primary: #788b70;
    --bg-secondary: #8a9d82;
    --bg-tertiary: #9caf94;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #8a9d82;
    --accent-color: #b5d9a5;
    --accent-hover: #c7e5b7;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #6b8b7b 0%, #7b8b6b 100%);
}

:root[data-theme="teal-cyan"] {
    --bg-primary: #708b8b;
    --bg-secondary: #829d9d;
    --bg-tertiary: #94afaf;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #829d9d;
    --accent-color: #a5d9d9;
    --accent-hover: #b7e5e5;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #6b8b8b 0%, #6b8b8b 100%);
}

:root[data-theme="blue-cyan"] {
    --bg-primary: #70808b;
    --bg-secondary: #82929d;
    --bg-tertiary: #94a4af;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #82929d;
    --accent-color: #a5cbd9;
    --accent-hover: #b7d7e5;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #6b7b8b 0%, #6b8b8b 100%);
}

:root[data-theme="pink-rose"] {
    --bg-primary: #8b6b7b;
    --bg-secondary: #9d7d8d;
    --bg-tertiary: #af8f9f;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #9d7d8d;
    --accent-color: #d9a5c5;
    --accent-hover: #e5b7d1;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #8b6b8b 0%, #8b6b7b 100%);
}

:root[data-theme="gray-light"] {
    --bg-primary: #7a7a7a;
    --bg-secondary: #8c8c8c;
    --bg-tertiary: #9e9e9e;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --border-color: #8c8c8c;
    --accent-color: #c5c5c5;
    --accent-hover: #d5d5d5;
    --shadow: rgba(0, 0, 0, 0.25);
    --desktop-gradient: linear-gradient(135deg, #7a7a7a 0%, #8a8a8a 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Login Screen */
.login-screen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}

.login-box {
    background: var(--bg-secondary);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow);
    width: 400px;
}

.login-box h1 {
    margin-bottom: 30px;
    text-align: center;
    color: var(--text-primary);
}

.login-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.error-message {
    color: #f44336;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(244, 67, 54, 0.1);
    border-radius: 4px;
    font-size: var(--font-size-base);
}

/* Desktop */
.desktop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    background: var(--desktop-gradient, var(--bg-primary));
    overflow: hidden;
}

/* Desklets Layer - behind all windows */
.desklets-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.desklet {
    position: absolute;
    pointer-events: auto;
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    overflow: hidden;
    padding: 10px;
}

.desklet-title {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 5px;
}

/* Taskbar */
.taskbar {
    position: absolute;
    height: 50px;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 10px;
    z-index: 10000;
}

.taskbar.bottom {
    bottom: 0;
}

.taskbar.top {
    top: 0;
    border-top: none;
    border-bottom: 1px solid var(--border-color);
}

.start-button {
    padding: 8px 20px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 15px;
    font-size: var(--font-size-base);
}

.start-button:hover {
    background: var(--accent-hover);
}

.taskbar-apps {
    display: flex;
    gap: 5px;
    flex: 1;
    overflow-x: auto;
}

.taskbar-item {
    padding: 5px 15px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s;
}

.taskbar-item:hover {
    background: var(--accent-color);
}

.taskbar-item.running {
    border-bottom: 2px solid var(--accent-color);
}

.taskbar-icon {
    width: 20px;
    height: 20px;
}

.taskbar-tray {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-left: 15px;
}

.clock, .user-info {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Start Menu */
.start-menu {
    position: absolute;
    bottom: 60px;
    left: 10px;
    width: 600px;
    height: 500px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow);
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

.start-menu-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 440px;
    overflow: hidden;
}

.start-menu-header {
    padding: 15px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
}

.start-menu-items {
    padding: 10px;
}

.start-categories {
    background: var(--bg-tertiary);
    padding: 10px 0;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}

.start-category-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-primary);
}

.start-category-item:hover {
    background: var(--bg-primary);
}

.start-category-item.active {
    background: var(--bg-primary);
    border-left: 3px solid var(--accent-color);
    padding-left: 12px;
}

.start-category-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
}

.start-category-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.start-category-name {
    flex: 1;
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-apps-list {
    padding: 10px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 5px;
    align-content: start;
}

.start-app-item {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    text-align: center;
}

.start-app-item:hover {
    background: var(--bg-tertiary);
}

.start-app-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-app-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.start-app-icon-emoji {
    font-size: var(--font-size-heading);
    line-height: 1;
}

.start-app-name {
    font-size: var(--font-size-small);
    color: var(--text-primary);
    word-wrap: break-word;
    max-width: 100%;
}

.start-menu-footer {
    padding: 10px;
    border-top: 1px solid var(--border-color);
}

.start-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.start-item:hover {
    background: var(--bg-tertiary);
}

.start-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-large);
}

.start-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-separator {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.start-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* Windows */
.window {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow);
    display: flex;
    flex-direction: column;
    min-width: 200px;
    min-height: 150px;
}

.window.minimized {
    display: none;
}

.window.rolled-up {
    height: auto !important;
    min-height: auto !important;
}

.window.rolled-up .content-area {
    display: none !important;
    height: 0 !important;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    z-index: 10;
}

.resize-n {
    top: 0;
    left: 8px;
    right: 8px;
    height: 8px;
    cursor: n-resize;
}

.resize-s {
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 8px;
    cursor: s-resize;
}

.resize-e {
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 8px;
    cursor: e-resize;
}

.resize-w {
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 8px;
    cursor: w-resize;
}

.resize-ne {
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    cursor: ne-resize;
}

.resize-nw {
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    cursor: nw-resize;
}

.resize-se {
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    cursor: se-resize;
}

.resize-sw {
    bottom: 0;
    left: 0;
    width: 8px;
    height: 8px;
    cursor: sw-resize;
}

.title-bar {
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    font-size: var(--font-size-large);
    text-align: left;
}

.window-title {
    font-weight: bold;
    font-size: var(--font-size-base);
}

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

.window-controls button {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.window-controls button:hover {
    background: var(--accent-color);
}

.close-btn:hover {
    background: #f44336 !important;
}

.content-area {
    flex: 1;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
}

.content-area iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.toast-body {
    padding: 12px 15px;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-large);
}

.toast-success {
    border-left: 4px solid #4caf50;
}

.toast-error {
    border-left: 4px solid #f44336;
}

.toast-warning {
    border-left: 4px solid #ff9800;
}

.toast-info {
    border-left: 4px solid #2196f3;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15000;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-overlay.show {
    opacity: 1;
}

.modal {
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 30px var(--shadow);
    min-width: 400px;
    max-width: 600px;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.modal-overlay.show .modal {
    transform: scale(1);
}

.modal-header {
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    cursor: move;
    user-select: none;
    font-size: var(--font-size-large);
    text-align: left;
}

.modal-header .modal-title {
    flex: 1;
    font-weight: bold;
}

.modal-header .modal-close {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.modal-header .modal-close:hover {
    background: #f44336;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-heading);
    color: var(--text-secondary);
}

.modal-content {
    padding: 20px;
}

.modal-buttons {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    min-width: 200px;
    z-index: 20000;
    padding: 5px;
}

.context-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.context-item:hover {
    background: var(--bg-tertiary);
}

.context-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-separator {
    height: 1px;
    background: var(--border-color);
    margin: 5px 0;
}

.context-shortcut {
    margin-left: auto;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
    padding: 10px 20px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    padding: 10px 20px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.btn-secondary:hover {
    background: var(--bg-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* ========================================
   Utility Classes for App Development
   ======================================== */

/* Background Colors */
.bg-primary {
    background-color: var(--bg-primary);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

/* Text Colors */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-accent {
    color: var(--accent-color);
}

/* Borders */
.border {
    border: 1px solid var(--border-color);
}

.border-accent {
    border-color: var(--accent-color);
}

/* Buttons */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all 0.2s;
}

.btn-primary {
    background: var(--accent-color);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* ====================================
   Reload Confirmation Popup
   ==================================== */

.reload-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    animation: fadeIn 0.2s ease-in;
}

.reload-popup-overlay.active {
    display: flex;
}

.reload-popup {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--shadow);
    min-width: 400px;
    max-width: 500px;
    animation: slideIn 0.3s ease-out;
}

.reload-popup-header {
    background: var(--bg-primary);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
}

.reload-popup-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.reload-popup-body {
    padding: 24px 20px;
    color: var(--text-primary);
}

.reload-popup-message {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.reload-popup-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.reload-popup-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.reload-popup-btn {
    padding: 10px 24px;
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reload-popup-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.reload-popup-btn-cancel:hover {
    background: var(--bg-primary);
}

.reload-popup-btn-confirm {
    background: var(--accent-color);
    color: #ffffff;
}

.reload-popup-btn-confirm:hover {
    background: var(--accent-hover);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ====================================
   Desktop Notifications (Toast)
   ==================================== */

#desktop-notifications {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999998;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    pointer-events: none;
}

.desktop-notification {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 4px 16px var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    pointer-events: all;
    cursor: pointer;
    animation: slideInRight 0.3s ease-out;
    transition: all 0.2s ease;
}

.desktop-notification:hover {
    transform: translateX(-4px);
    box-shadow: 0 6px 20px var(--shadow);
}

.desktop-notification.hiding {
    animation: slideOutRight 0.3s ease-in forwards;
}

.desktop-notification-icon {
    font-size: var(--font-size-heading);
    flex-shrink: 0;
}

.desktop-notification-content {
    flex: 1;
    min-width: 0;
}

.desktop-notification-message {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
}

.desktop-notification-app {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    margin: 4px 0 0 0;
}

.desktop-notification-close {
    color: var(--text-secondary);
    font-size: var(--font-size-large);
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.desktop-notification:hover .desktop-notification-close {
    opacity: 1;
}

/* Notification types */
.desktop-notification.info {
    border-left: 4px solid #4a9d5f;
}

.desktop-notification.info .desktop-notification-icon {
    color: #4a9d5f;
}

.desktop-notification.success {
    border-left: 4px solid #5eb370;
}

.desktop-notification.success .desktop-notification-icon {
    color: #5eb370;
}

.desktop-notification.error {
    border-left: 4px solid #e74c3c;
}

.desktop-notification.error .desktop-notification-icon {
    color: #e74c3c;
}

.desktop-notification.warning {
    border-left: 4px solid #f39c12;
}

.desktop-notification.warning .desktop-notification-icon {
    color: #f39c12;
}

@keyframes slideInRight {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}