/* css/scenario-panel.css */

.scenario-playscreen {
    /* Wrapper div created by game.js for scenario content */
    display: flex;
    flex-direction: column;
    /* Stack h3 and output area */
    height: 100%;
    /* Padding applied by #main-content-area or .panel-content-wrapper */
}

.scenario-playscreen h3 {
    /* Overrides general .tab-panel h3 if needed */
    color: #c0c0c0;
    font-size: 1em;
    /* Smaller H3 for scenario title */
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #151515;
    flex-shrink: 0;
    /* Prevent h3 from shrinking */
}

.scenario-output-area {
    /* Div with ID scenario-output-SCENARIO_ID */
    flex-grow: 1;
    /* Takes up remaining space */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    background-color: #080808;
    /* Slightly different background for the log area */
    border-radius: 3px;
    border: 1px solid #000000;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    display: flex;
    /* For aligning log messages */
    flex-direction: column;
    gap: 6px;
    /* Space between log messages */
}

.scenario-output-area p {
    /* General paragraphs within the log */
    margin: 0;
    padding: 6px 10px;
    /* Padding inside each message bubble */
    border-radius: 5px;
    /* Rounded message bubbles */
    max-width: 85%;
    /* Messages don't take full width */
    word-wrap: break-word;
    line-height: 1.5;
    font-size: 0.9em;
    /* Slightly smaller log text */
}

.player-command-log {
    color: #87CEFA;
    /* Light Sky Blue */
    background-color: #1c2532;
    /* Darker blueish background */
    align-self: flex-end;
    text-align: right;
    /* margin-left: auto; /* This or align-self pushes to right */
}

.player-command-log::before {
    content: "";
}

.player-command-log::after {
    content: " <";
    font-style: normal;
}

.ai-response-log {
    color: #b0b0b0;
    background-color: #1e1e1e;
    /* Dark gray for AI responses */
    align-self: flex-start;
    text-align: left;
    /* margin-right: auto; */
}

.system-message {
    /* For loading, errors, etc. in scenario output */
    color: #ffcc00;
    /* Amber/yellow for system messages */
    font-style: italic;
    text-align: center;
    background-color: transparent;
    /* No bubble for system messages */
    width: 100%;
    align-self: center;
    padding: 8px 0;
    /* Just vertical padding */
}

/* Spinner styles are now in components.css */

/* In scenario-panel.css or components.css */
.scenario-output-area {
    height: calc(100% - 50px);
    /* Adjust based on scenario h3 actual height + margins */
    overflow-y: auto;
    padding: 10px;
    background-color: #080808;
    border-radius: 3px;
    border: 1px solid #000000;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.in-tab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Add some padding */
    height: 100%;
    text-align: center;
    color: #777;
}

.spinner {
    border: 3px solid #222;
    border-top: 3px solid #5a8ed6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ... (player-command-log, ai-response-log, system-message styles from before) ... */
.scenario-event-log-header {
    text-align: center;
    color: #555;
    font-style: italic;
    font-size: 0.8em;
    margin: 10px 0 5px 0;
    border-bottom: 1px dashed #333;
    padding-bottom: 5px;
}