/* =================================================================== */
/* VDM - FINAL STYLE SHEET                                           */
/* =================================================================== */

/* --- 1. Root Variables & Theming --- */
:root {
    --font-sans: 'Inter', sans-serif;
    --error-red: #f04747;
    --link-blue: #7289da;
    --success-green: #43b581;

    /* Light Theme */
    --bg-light: #f4f5f7;
    --surface-light: #ffffff;
    --text-primary-light: #172b4d;
    --text-secondary-light: #5e6c84;
    --border-light: #dfe1e6;
    --accent-light: #0052cc;
    --accent-hover-light: #0065ff;
    --gm-msg-bg-light: #e6faff;
    --ooc-text-light: #42526e;
    --system-msg-bg-light: #f0f0f0;

    /* Dark Theme (Default) */
    --bg-dark: #1e2124;
    --surface-dark: #282b30;
    --text-primary-dark: #e1e1e1;
    --text-secondary-dark: #9a9a9a;
    --border-dark: #424549;
    --accent-dark: #7289da;
    --accent-hover-dark: #8a9ff0;
    --gm-msg-bg-dark: #2f354d;
    --ooc-text-dark: #a0a0a0;
    --system-msg-bg-dark: #303338;
}

/* --- 2. Global Resets & Body Styles --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--bg-dark); color: var(--text-primary-dark); transition: background-color 0.3s, color 0.3s; }
body.light-theme { background-color: var(--bg-light); color: var(--text-primary-light); }

/* --- 3. Main Layout Containers --- */
header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; background-color: var(--surface-dark); border-bottom: 1px solid var(--border-dark); flex-shrink: 0; }
body.light-theme header { background-color: var(--surface-light); border-bottom-color: var(--border-light); }
main { display: flex; flex-grow: 1; overflow: hidden; }
main.auth-mode { justify-content: center; align-items: flex-start; padding-top: 10vh; }
main.auth-mode > .auth-form-container { width: 380px; max-width: 90%; background-color: var(--surface-dark); padding: 2rem; border-radius: 8px; border: 1px solid var(--border-dark); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
body.light-theme main.auth-mode > .auth-form-container { background-color: var(--surface-light); border-color: var(--border-light); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
main.app-mode > #main-app-view { display: flex; width: 100%; }
.sidebar { width: 280px; flex-shrink: 0; background-color: var(--surface-dark); padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; overflow-y: auto; border-right: 1px solid var(--border-dark); }
body.light-theme .sidebar { background-color: var(--surface-light); border-right-color: var(--border-light); }
.chat-area { display: flex; flex-direction: column; flex-grow: 1; }

/* --- 4. Sidebar Components (Auth, Connection, Room Info) --- */
.sidebar-section { display: flex; flex-direction: column; gap: 1rem; }
.sidebar-section h3, .sidebar-section h4 { color: var(--text-primary-dark); border-bottom: 1px solid var(--border-dark); padding-bottom: 0.5rem; font-size: 1.1rem; }
body.light-theme .sidebar-section h3, body.light-theme .sidebar-section h4 { color: var(--text-primary-light); border-bottom-color: var(--border-light); }
.auth-form-container h3 { text-align: center; }
.auth-form-container .link-button { background: none; border: none; color: var(--link-blue); text-decoration: underline; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.85rem; }
body.light-theme .auth-form-container .link-button { color: var(--accent-light); }
.auth-form-container .link-button:hover { text-decoration: none; }
.avatar-preview-container { display: flex; align-items: center; gap: 0.75rem; background-color: var(--bg-dark); padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border-dark); margin-bottom: 0.5rem;}
body.light-theme .avatar-preview-container { background-color: var(--bg-light); border-color: var(--border-light); }
#register-avatar-preview { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border-dark); }
body.light-theme #register-avatar-preview { border-color: var(--border-light); }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 0.5rem; }
.avatar-option { cursor: pointer; border-radius: 8px; padding: 0.25rem; border: 2px solid transparent; transition: border-color 0.2s; }
.avatar-option:hover { border-color: var(--border-dark); }
.avatar-option.selected { border-color: var(--accent-dark); }
body.light-theme .avatar-option:hover { border-color: var(--border-light); }
body.light-theme .avatar-option.selected { border-color: var(--accent-light); }
.player-card { display: flex; align-items: center; gap: 1rem; background-color: var(--bg-dark); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-dark); margin-bottom: 0.5rem;}
body.light-theme .player-card { background-color: var(--bg-light); border-color: var(--border-light); }
#player-card-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border-dark); }
body.light-theme #player-card-avatar { border-color: var(--border-light); }
#player-card-name { font-weight: 700; font-size: 1.1rem; }
#player-list-container { max-height: 200px; overflow-y: auto; background-color: var(--bg-dark); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-dark); }
body.light-theme #player-list-container { background-color: var(--bg-light); border-color: var(--border-light); }
#player-list { list-style-type: none; display: flex; flex-direction: column; gap: 0.75rem; }
#player-list li { display: flex; align-items: center; gap: 0.75rem; color: var(--text-secondary-dark); font-size: 0.9rem; transition: color 0.2s; }
body.light-theme #player-list li { color: var(--text-secondary-light); }
#player-list .player-inactive { opacity: 0.5; font-style: italic; }
.player-list-avatar { width: 28px; height: 28px; border-radius: 50%; background-color: var(--border-dark); }
body.light-theme .player-list-avatar { background-color: var(--border-light); }
.player-name { flex-grow: 1; }
#host-controls-container { display: flex; flex-direction: column; gap: 1rem; }

/* --- 5. Generic Form & Button Styling --- */
button { padding: 0.65rem 1rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
#theme-toggle { background: none; border: none; font-size: 1.5rem; padding: 0.25rem; margin-left: auto; width: auto; }
.sidebar button, .auth-form-container button { background-color: var(--accent-dark); color: white; }
.sidebar button:not(:disabled):hover, .auth-form-container button:not(:disabled):hover { background-color: var(--accent-hover-dark); }
body.light-theme .sidebar button, body.light-theme .auth-form-container button { background-color: var(--accent-light); }
body.light-theme .sidebar button:not(:disabled):hover, body.light-theme .auth-form-container button:not(:disabled):hover { background-color: var(--accent-hover-light); }
#leave-button, #logout-button { background-color: var(--bg-dark); color: var(--text-primary-dark); border: 1px solid var(--border-dark); }
#leave-button:hover, #logout-button:hover { background-color: var(--surface-dark); }
body.light-theme #leave-button, body.light-theme #logout-button { background-color: var(--bg-light); color: var(--text-primary-light); border-color: var(--border-light); }
body.light-theme #leave-button:hover, body.light-theme #logout-button:hover { background-color: var(--surface-light); }
.chat-input-area button { background-color: var(--accent-dark); color: white; width: auto; }
.chat-input-area button:not(:disabled):hover { background-color: var(--accent-hover-dark); }
body.light-theme .chat-input-area button { background-color: var(--accent-light); }
body.light-theme .chat-input-area button:not(:disabled):hover { background-color: var(--accent-hover-light); }
#mic-button.listening { color: var(--error-red); }
input[type="text"], input[type="password"], textarea { width: 100%; padding: 0.65rem 1rem; border-radius: 5px; border: 1px solid var(--border-dark); background-color: var(--bg-dark); color: var(--text-primary-dark); font-family: var(--font-sans); font-size: 0.9rem; margin-bottom: 0.5rem; }
body.light-theme input[type="text"], body.light-theme input[type="password"], body.light-theme textarea { border-color: var(--border-light); background-color: var(--bg-light); color: var(--text-primary-light); }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.3); }
body.light-theme input[type="text"]:focus, body.light-theme input[type="password"]:focus, body.light-theme textarea:focus { border-color: var(--accent-light); box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.3); }

/* --- 6. Chat Area Components --- */
#chat-log { flex-grow: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.chat-input-area { position: relative; flex-shrink: 0; padding: 1rem 1.5rem; display: flex; gap: 0.75rem; background-color: var(--surface-dark); border-top: 1px solid var(--border-dark); align-items: flex-end;}
body.light-theme .chat-input-area { background-color: var(--surface-light); border-top-color: var(--border-light); }
#message-input { flex-grow: 1; resize: none; overflow-y: hidden; min-height: 42px; margin-bottom: 0; }

/* --- 7. Chat Messages --- */
.msg { max-width: 90%; display: flex; gap: 1rem; align-items: flex-start; }
.msg.gm { align-self: flex-start; }
.msg.player { align-self: flex-start; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; background-color: var(--border-dark); }
body.light-theme .msg-avatar { background-color: var(--border-light); }
.msg-content { display: flex; flex-direction: column; background-color: var(--surface-dark); padding: 0.75rem 1rem; border-radius: 8px; }
body.light-theme .msg-content { background-color: var(--surface-light); }
.msg.gm .msg-content { background-color: var(--gm-msg-bg-dark); }
body.light-theme .msg.gm .msg-content { background-color: var(--gm-msg-bg-light); }
.msg .author { font-weight: 700; margin-bottom: 0.25rem; color: var(--text-primary-dark); }
body.light-theme .msg .author { color: var(--text-primary-light); }
.msg.gm .author { color: var(--accent-dark); }
body.light-theme .msg.gm .author { color: var(--accent-light); }
.msg.ooc { font-style: italic; opacity: 0.8; }
.msg.ooc .msg-content { background-color: transparent; }
.msg.system { align-self: center; background-color: var(--system-msg-bg-dark); color: var(--text-secondary-dark); padding: 0.5rem 1rem; border-radius: 1rem; font-size: 0.85rem; text-align: center; max-width: 70%; }
body.light-theme .msg.system { background-color: var(--system-msg-bg-light); color: var(--text-secondary-light); }
.msg code { background-color: var(--bg-dark); padding: 0.1rem 0.3rem; border-radius: 4px; font-family: monospace; }
body.light-theme .msg code { background-color: var(--bg-light); }
.msg strong { font-weight: 700; }

/* --- 8. Special UI States & Elements --- */
#gm-thinking-indicator { display: none; position: absolute; bottom: calc(64px + 1rem); left: 50%; transform: translateX(-50%); background-color: var(--surface-dark); padding: 0.5rem 1rem; border-radius: 1rem; align-items: center; gap: 0.5rem; color: var(--text-secondary-dark); border: 1px solid var(--border-dark); font-size: 0.9rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
body.light-theme #gm-thinking-indicator { background-color: var(--surface-light); color: var(--text-secondary-light); border-color: var(--border-light); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 9. Command Preview --- */
#command-preview { display: none; position: absolute; bottom: 100%; left: 1.5rem; right: 1.5rem; background-color: var(--bg-dark); border: 1px solid var(--border-dark); border-bottom: none; border-radius: 8px 8px 0 0; padding: 1rem; max-height: 200px; overflow-y: auto; box-shadow: 0 -4px 12px rgba(0,0,0,0.2); }
body.light-theme #command-preview { background-color: var(--bg-light); border-color: var(--border-light); }
#command-preview h4 { margin-top: 0; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-secondary-dark); text-transform: uppercase; }
body.light-theme #command-preview h4 { color: var(--text-secondary-light); }
#command-preview ul { list-style-type: none; padding: 0; margin: 0; }
#command-preview li { padding: 0.5rem 0; font-size: 0.9rem; color: var(--text-secondary-dark); }
body.light-theme #command-preview li { color: var(--text-secondary-light); }
#command-preview li strong { color: var(--text-primary-dark); margin-right: 0.5rem; }
body.light-theme #command-preview li strong { color: var(--text-primary-light); }

/* --- 10. Player List Turn Indicator --- */
.turn-indicator {
    margin-left: auto; /* Pushes the indicator to the far right */
    font-size: 1rem;
    color: var(--success-green);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
}

#player-list li.action-submitted .turn-indicator {
    opacity: 1; /* Revealed when action is submitted */
}

#player-list li.action-submitted .player-name {
    color: var(--text-primary-dark); /* Make the name more prominent */
}

body.light-theme #player-list li.action-submitted .player-name {
    color: var(--text-primary-light);
}