:root {
    --bg-color: #1a1a1d;
    --panel-color: #212124;
    --text-color: #e0e0e0;
    --border-color: #333;
    --positive-mood-color: #86c232; /* Greenish */
    --negative-mood-color: #d64045; /* Reddish */
    --neutral-mood-color: #6b6e70; /* Gray */
}

body {
    margin: 0;
    font-family: 'Menlo', 'Courier New', monospace;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
}

#main-interface {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr auto;
    height: 100vh;
    width: 100vw;
}

#conversation-stream {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column-reverse;
}

#serah-panel {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    background: var(--panel-color);
    padding: 20px;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#serah-avatar-container { text-align: center; }

#serah-avatar {
    width: 100px;
    height: 100px;
    background-color: #555;
    border-radius: 50%;
    margin: 0 auto 10px;
    transition: all 0.5s ease;
    border: 3px solid var(--neutral-mood-color);
}

#serah-name { font-size: 1.2em; font-weight: bold; }

#state-monitoring-container, #thought-trail-container {
    background: var(--bg-color);
    border-radius: 5px;
    padding: 15px;
    font-size: 0.9em;
}

.state-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95em;
}

#thought-trail {
    font-style: italic;
    color: #aaa;
    font-size: 0.9em;
    max-height: 250px;
    overflow-y: auto;
    word-break: break-all;
}

.processing-log {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    padding: 2px 0;
}

@keyframes fadeIn { to { opacity: 0.8; } }

#user-input-area {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    padding: 10px;
    background: var(--panel-color);
    border-top: 1px solid var(--border-color);
}

#user-input {
    flex-grow: 1;
    background: #333;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 15px;
    color: var(--text-color);
    resize: none;
    font-family: inherit;
    font-size: 1em;
}

#send-button {
    background: var(--neutral-mood-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0 25px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.message-cell {
    padding: 12px 18px;
    margin-bottom: 10px;
    border-radius: 10px;
    max-width: 75%;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

.serah-message {
    background: #3a3a3c;
    align-self: flex-start;
    position: relative;
}

.user-message {
    background: #262628;
    align-self: flex-end;
}

.message-content {
    margin: 0;
}

.dislike-button {
    position: absolute;
    right: -10px;
    bottom: -10px;
    background: #444;
    border: 1px solid #555;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity 0.3s;
}

.serah-message:hover .dislike-button {
    opacity: 1;
}