/* Mentala Support-Chat — single-page layout (Issue #25, Phase 1)
 * Modeled after svenk/www-svenk.org/src/chat/, simplified to match
 * Mentala's existing base.css typography (DM Sans + DM Serif Display).
 */

.chat-page {
    max-width: 720px;
    margin: 40px auto;
    padding: 0 16px;
}

.chat-page h1 {
    margin-bottom: 8px;
}

.chat-page .lede {
    color: var(--text-muted, #555);
    margin-bottom: 24px;
}

.chat-page .availability {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.chat-page .availability.available {
    background: #e6f4ea;
    color: #1e5631;
}

.chat-page .availability.disabled {
    background: #f5e6e6;
    color: #8a1f1f;
}

section.chat {
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    background: var(--surface, #fff);
    padding: 16px;
}

section.chat .output {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
}

section.chat .output li {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f7f7f7;
    max-width: 85%;
}

section.chat .output li.sent {
    background: #e8f0fe;
    margin-left: auto;
    text-align: right;
}

section.chat .output li.recv {
    background: #f7f7f7;
}

section.chat .output li.agent {
    background: #fff8e1;
    border-left: 3px solid #d4a017;
}

section.chat .output li .nickname {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #555);
}

section.chat .output li .time {
    font-size: 0.72rem;
    color: var(--text-muted, #999);
    float: right;
}

section.chat form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: start;
}

section.chat form textarea {
    grid-column: 1 / -1;
    min-height: 70px;
    resize: vertical;
    padding: 8px;
    font: inherit;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
}

section.chat form input[name="nickname"] {
    padding: 8px;
    font: inherit;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
}

section.chat form button {
    padding: 8px 16px;
    cursor: pointer;
}

section.chat form textarea:disabled,
section.chat form input:disabled,
section.chat form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .chat-page { margin: 24px auto; }
    section.chat .output li { max-width: 95%; }
    section.chat form { grid-template-columns: 1fr; }
}