/* style.css */
body {
    background-color: #000814; /* Deep midnight blue */
    color: #f0f0f0;
    font-family: 'Courier New', monospace;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#caller-status-bar {
    background: #111;
    border-bottom: 3px double #444;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 100;
}

#caller-display {
    color: #ffcc00; /* Gold for the Referee */
    font-weight: bold;
    text-align: center;
    flex: 2;
}

#main-interface {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
}

#duel-log {
    flex: 1;
    background: #050505;
    border: 1px solid #333;
    overflow-y: auto;
    padding: 15px;
    margin-bottom: 10px;
}

#input-sector {
    background: #222;
    padding: 15px;
    border-radius: 5px;
}

.input-group {
    margin-bottom: 10px;
}

.highlight {
    border-top: 1px solid #444;
    padding-top: 10px;
}

input {
    background: #111;
    color: #00ff00;
    border: 1px solid #555;
    padding: 8px;
    width: 250px;
}

button {
    cursor: pointer;
    background: #444;
    color: white;
    border: none;
    padding: 8px 15px;
}

button:hover { background: #666; }

#dev-sidebar {
    position: fixed;
    right: 0;
    top: 60px; /* Below your Caller bar */
    width: 250px;
    height: calc(100vh - 60px);
    background: #1a1a1a;
    border-left: 2px solid #444;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}

.sidebar-header {
    color: gold;
    font-size: 0.8rem;
    letter-spacing: 2px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.note-container {
    display: flex;
    flex-direction: column;
}

.note-container label {
    font-size: 0.65rem;
    color: #888;
    margin-bottom: 5px;
}

.note-container textarea {
    background: #000;
    color: #00ff00; /* Old school terminal green */
    border: 1px solid #444;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    height: 120px;
    padding: 5px;
    resize: vertical;
}

.note-container button {
    margin-top: 5px;
    font-size: 0.7rem;
    background: #333;
    color: #ccc;
    border: 1px solid #555;
    padding: 4px;
    cursor: pointer;
}

.note-container button:hover {
    background: #444;
    color: white;
}
/* Add this to your existing #dev-sidebar */
#dev-sidebar {
    transition: transform 0.3s ease; /* Smooth sliding effect */
}

/* Class to hide the sidebar */
.sidebar-hidden {
    transform: translateX(100%); /* Slides it off the right edge */
}

/* Adjust your main container (the chat/game area) */
#main-container {
    transition: margin-right 0.3s ease;
    margin-right: 250px; /* Gap for the open sidebar */
}

/* When the sidebar is hidden, use the full screen */
.full-width {
    margin-right: 0 !important;
}

/* Style for the 'Open' button that stays on screen */
#open-sidebar-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1001; /* Stay above everything */
    padding: 10px;
    background: gold;
    border: 2px solid black;
    cursor: pointer;
}

/* Mobile Optimization */
@media screen and (max-width: 768px) {
/* Fix the Body to prevent the whole page from bouncing */
body {
    height: 100vh;
    overflow: hidden; /* Only the log should scroll */
}

/* 1. ANCHOR THE TOP */
#caller-status-bar {
    position: sticky;
    top: 0;
    height: 60px; /* Consistent height */
    z-index: 1000;
}

/* 2. THE SCROLLABLE CENTER */
#main-interface {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px); /* Leave room for top/bottom */
    overflow: hidden;
}

#duel-log {
    flex: 1;
    overflow-y: scroll; /* Forces scroll inside this box only */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for iPhones */
}

/* 3. ANCHOR THE BOTTOM */
#input-sector {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: #222;
    padding-bottom: env(safe-area-inset-bottom); /* Handles iPhone notch/home bar */
}

/* --- MOBILE SPECIFIC FIXES --- */
@media screen and (max-width: 768px) {
    /* Make the score wing text bigger for quick glances */
    .score-wing {
        font-size: 1.2rem;
        font-weight: bold;
    }

    #caller-display {
        font-size: 0.8rem; /* Keeps long move names on one line */
    }

    /* BIGGER BUTTONS & INPUTS */
    input, select, button {
        width: 100% !important; /* Stack them vertically */
        margin: 4px 0;
        min-height: 48px; /* Apple's recommended touch target size */
        font-size: 18px !important; /* Forces zoom-free typing */
    }

    .input-group {
        display: flex;
        flex-direction: column;
    }
}
@media screen and (max-width: 768px) {
    #dev-sidebar {
        width: 100% !important; /* Take up the whole width */
        height: 100% !important; /* Take up the whole height */
        top: 0 !important; /* Cover the Caller bar */
        left: 0;
        z-index: 2000; /* Sit on top of everything */
        border-left: none;
        padding: 20px;
        box-sizing: border-box;
    }

    /* Make the textareas even larger for easier copying/pasting on touch */
    .note-container textarea {
        height: 200px; 
        font-size: 16px; /* Prevents iOS from zooming in when you tap it */
    }

    /* Make the CLOSE button prominent at the top */
    #toggle-sidebar-btn {
        width: 100%;
        height: 50px;
        background: #440000;
        font-weight: bold;
        margin-bottom: 20px;
    }
}
/* Make the Header Reset look like a small, clean utility button */
#header-reset-btn {
    background: #440000;
    color: #ffaaaa;
    font-size: 0.6rem;
    padding: 2px 8px;
    border: 1px solid #660000;
    display: block;
    margin: 5px auto 0;
}

/* HIGH VISIBILITY for the API Key in the Sidebar */
.api-key-button {
    display: block;
    background: #00ffff !important; /* Bright Neon Cyan */
    color: #000 !important; /* Black text for contrast */
    text-align: center;
    padding: 15px !important;
    text-decoration: none;
    border-radius: 8px;
    margin: 10px 0;
    font-weight: bold;
    font-size: 1rem !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

/* Ensure the Sidebar Tools are clickable */
@media screen and (max-width: 768px) {
    #dev-sidebar {
        padding-top: 80px; /* Leave room for the big Close button */
    }
}
/* REMOVE the position: fixed from this block */
#open-sidebar-btn {
    position: static; /* Let it sit in the group */
    background: #444; /* Match other buttons */
    color: gold;
    border: 1px solid gold;
    flex: 1; /* Makes it share space evenly */
}

/* Ensure the input group doesn't overlap */
.input-group.highlight {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to a second line if the screen is tiny */
    gap: 5px;
    justify-content: center;
}

/* Specific button widths for mobile */
@media screen and (max-width: 768px) {
    #duel-btn {
        flex: 2; /* Make Execute the biggest button */
        background: #004400;
        font-weight: bold;
    }
    
    #open-sidebar-btn {
        flex: 1; /* Tools button sits nicely to the right */
    }
}