/*
    This style.css file provides the visual styling for the interactive solar system overview. It ensures the canvas
    fills the entire viewport without margins or scrollbars, making it full-screen and responsive. It also styles the
    overlaid legend divs for the top-left ship name (fixed position, semi-transparent background) and top-right planet
    info (similar styling, updates dynamically). Fonts are clean and modern, with subtle shadows for readability over
    the canvas. No animations or complex selectors are used to keep it lightweight and compatible with vanilla JS.
    */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: black;
    /* Fallback for canvas edges */
    font-family: 'Arial', sans-serif;
}

#canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    cursor: crosshair;
    /* Indicates clickable area */
}

.legend {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border: 1px solid #00ff00;
    border-radius: 5px;
    z-index: 10;
}

.universe-inline {
    font-size: 12px;
    margin: 0;
    padding: 5px 0;
    white-space: nowrap;
    line-height: 1.2;
}

.legend.bottom-left {
    max-width: none;
}

.top-left {
    top: 10px;
    left: 10px;
}

.top-right {
    top: 10px;
    right: 10px;
}

.bottom-left {
    bottom: 10px;
    left: 10px;
    width: calc(100vw - 290px);
    max-height: 120px;
    overflow: hidden;
    padding: 5px;
}

.auth-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: black;
}

.auth-box input {
    display: block;
    margin: 10px auto;
    padding: 10px;
    width: 200px;
}

.auth-box button {
    padding: 10px 20px;
    background: #00ff00;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.minimap {
    position: fixed;
    bottom: 10px;
    right: 10px;
    border: 1px solid #00ff00;
    border-radius: 5px;
    z-index: 10;
}

.universe-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 5px;
    margin-top: 5px;
}

.planet-card {
    background: rgba(0, 100, 0, 0.5);
    border: 1px solid #00ff00;
    border-radius: 3px;
    padding: 5px;
    font-size: 10px;
    text-align: center;
    min-height: 20px;
}

.auth-box {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #00ff00;
    padding: 20px;
    border-radius: 10px;
    color: white;
    text-align: center;
    min-width: 300px;
}

.auth-box input {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #00ff00;
    color: white;
    border-radius: 5px;
}

.auth-box button {
    width: 100%;
    padding: 10px;
    background: rgba(0, 255, 0, 0.5);
    border: 1px solid #00ff00;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.minimap {
    position: fixed;
    bottom: 10px;
    right: 10px;
    border: 2px solid #00ff00;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.inventory-table {
    border-collapse: collapse;
    width: 100%;
    color: white;
}

.inventory-table th,
.inventory-table td {
    border: 1px solid #4169E1;
    padding: 5px;
    text-align: left;
}

.inventory-table th {
    background: rgba(0, 100, 0, 0.5);
}

.inventory-table tr:nth-child(even) {
    background: rgba(0, 50, 100, 0.3);
}

/* Planet Dialog Styles */
.planet-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.planet-dialog-box {
    background: linear-gradient(135deg, var(--planet-color)40, rgba(0, 0, 0, 0.8));
    border: 3px solid var(--planet-color);
    padding: 0;
    border-radius: 20px;
    width: 90vw;
    max-width: 800px;
    height: 80vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px var(--planet-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.planet-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: 2px solid var(--planet-color);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 18px;
    cursor: pointer;
    color: var(--planet-color);
    z-index: 101;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.planet-close-btn:hover {
    background: var(--planet-color);
    color: white;
    transform: scale(1.1);
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: white;
    border: 1px solid var(--planet-color)50;
    scrollbar-width: thin;
    scrollbar-color: var(--planet-color) rgba(0, 0, 0, 0.2);
}

.chat-container::-webkit-scrollbar {
    width: 6px;
}

.chat-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.chat-container::-webkit-scrollbar-thumb {
    background: var(--planet-color);
    border-radius: 3px;
}

.chat-message {
    margin-bottom: 15px;
    padding: 12px 16px;
    border-radius: 18px;
    max-width: 80%;
    word-wrap: break-word;
    animation: slideIn 0.3s ease-out;
    color: #333;
    text-shadow: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.planet {
    background: rgba(255, 255, 255, 0.8);
    border-left: 4px solid var(--planet-color);
    margin-left: 0;
    margin-right: auto;
    border-bottom-left-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-message.user {
    background: rgba(255, 255, 255, 0.8);
    border-right: 4px solid var(--planet-color);
    margin-left: auto;
    margin-right: 0;
    border-bottom-right-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-message strong {
    display: block;
    font-size: 0.9em;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.input-area {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: white;
    border-top: 1px solid var(--planet-color)80;
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--planet-color)60;
    border-radius: 25px;
    background: white;
    color: #333;
    font-size: 16px;
    outline: none;
    transition: all 0.2s ease;
}

.chat-input:focus {
    border-color: var(--planet-color);
    box-shadow: 0 0 0 3px var(--planet-color)20;
}

.send-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--planet-color), var(--planet-color)80);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px var(--planet-color)40;
}

.send-btn:active {
    transform: translateY(0);
}

.loading-indicator {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin: 10px 0;
}

.error-message {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid #ff6b6b;
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .planet-dialog-box {
        width: 95vw;
        height: 90vh;
        border-radius: 15px;
    }

    .chat-container {
        padding: 15px;
    }

    .input-area {
        padding: 10px 15px;
    }

    .chat-message {
        max-width: 90%;
    }
}