.header{height:32px;line-height:32px;background:#2b2b2b;color:#fff;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:14px}
.app{display:-ms-flexbox;display:flex;height:calc(100vh - 32px);font-family:Arial,Helvetica,sans-serif}
.sidebar{width:180px;border-right:1px solid #c0c0c0;padding:6px;box-sizing:border-box;background:#f3f3f3}
.caption{font-weight:bold;font-size:12px;margin:0 0 6px 0}
#chats{list-style:none;margin:0;padding:0;max-height:100%;overflow:auto}
#chats li{padding:6px 6px;border-radius:2px;cursor:pointer;border:1px solid transparent;font-size:12px}
#chats li.active{background:#dfe7ff;border-color:#a8b8ff}
.content{flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
.messages{flex:1;padding:6px;overflow:auto;background:#ffffff}
.message{padding:4px 6px;margin:4px 0;border-radius:2px;max-width:90%;border:1px solid #e0e0e0;font-size:12px}
.message.bot{background:#e9f6ea;border-color:#c6e7cb;align-self:flex-end}
.message.user{background:#fafafa;border-color:#e0e0e0}
.composer{display:-ms-flexbox;display:flex;gap:4px;padding:6px;border-top:1px solid #c0c0c0;background:#f8f8f8}
.composer input{flex:1;padding:6px 6px;border:1px solid #b0b0b0;border-radius:2px;font-size:12px}
.composer button{padding:6px 8px;border:1px solid #2b6cb0;border-radius:2px;background:#2b6cb0;color:#fff;font-size:12px}
.composer button:active{background:#245b94}

/* low-res 320x240 tweaks */
@media (max-width: 360px){
	.sidebar{width:120px}
	.header{font-size:12px}
	.message{font-size:11px}
	.composer input{font-size:11px}
	.composer button{font-size:11px}
}

/* high-contrast fallback for old devices */
body{background:#e6e6e6}
.app,.messages{background:#fff}

/* reduce motion but keep subtle transitions */
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}