:root { font-family: system-ui, sans-serif; color: #17202a; background: #eef2f3; }
body { margin: 0; }
.chat { width: min(900px, calc(100% - 32px)); margin: 32px auto; }
h1 { font-size: 1.4rem; }
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.card { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid #d9e0e3; border-radius: 8px; background: white; }
.card summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 600; list-style: none; }
.card summary::-webkit-details-marker { display: none; }
.toggle-hint { color: #1769aa; font-size: .85rem; font-weight: 400; }
.card label { display: grid; gap: 4px; font-size: .9rem; }
.card input { width: 100%; box-sizing: border-box; }
.messages { min-height: 60vh; max-height: 65vh; overflow: auto; padding: 16px; background: white; border: 1px solid #d9e0e3; border-radius: 8px; }
.message { width: fit-content; max-width: 80%; margin: 8px 0; padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; }
.message.in { background: #e5f3ff; }
.message.out { margin-left: auto; background: #d9fdd3; }
.composer { display: flex; gap: 8px; margin-top: 12px; }
input { flex: 1; padding: 10px; border: 1px solid #c4ced3; border-radius: 6px; }
button { padding: 10px 16px; border: 0; border-radius: 6px; color: white; background: #1769aa; cursor: pointer; }
.status { min-height: 1.2em; color: #5f6b72; }
@media (max-width: 640px) { .settings { grid-template-columns: 1fr; } }