.app-chat { display: grid; grid-template-rows: minmax(20rem, 1fr) auto auto auto; height: min(42rem, 72vh); min-height: 32rem; overflow: hidden; border: 1px solid #3a3e49; border-radius: .5rem; background: #1f222b; color: #f3f4f6; box-shadow: 0 5px 18px rgb(0 0 0 / 22%); }
.app-chat-messages { display: flex; flex-direction: column; gap: .85rem; min-height: 0; padding: 1rem; overflow-y: auto; scrollbar-color: #565c69 #20232c; }
.app-chat-message { display: flex; align-items: flex-end; gap: .55rem; max-width: 88%; }
.app-chat-message.is-own { align-self: flex-end; flex-direction: row-reverse; }
.app-chat-avatar { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #3a7380; color: #fff; font-size: .7rem; font-weight: 700; }
.app-chat-message.is-own .app-chat-avatar { background: #9d742d; }
.app-chat-bubble { min-width: 0; padding: .6rem .75rem; border: 1px solid #444a57; border-radius: .8rem .8rem .8rem .18rem; background: #2b303b; box-shadow: 0 2px 5px rgb(0 0 0 / 18%); }
.app-chat-message.is-own .app-chat-bubble { border-color: #795c2c; border-radius: .8rem .8rem .18rem .8rem; background: #59451f; }
.app-chat-message.is-error .app-chat-bubble { border-color: #a94752; background: #592b31; }
.app-chat-bubble header { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .2rem; }
.app-chat-bubble strong { font-size: .76rem; }
.app-chat-bubble time { color: #adb1ba; font-size: .65rem; white-space: nowrap; }
.app-chat-bubble p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.app-chat-typing { display: flex; align-items: center; gap: .25rem; padding: .35rem 1rem; color: #b8bcc5; font-size: .75rem; }
.app-chat-typing[hidden] { display: none; }
.app-chat-typing i { width: .35rem; height: .35rem; border-radius: 50%; background: #6db0bf; animation: app-chat-pulse 1s infinite ease-in-out; }
.app-chat-typing i:nth-child(2) { animation-delay: .15s; }
.app-chat-typing i:nth-child(3) { animation-delay: .3s; }
.app-chat-typing span { margin-left: .25rem; }
.app-chat-suggestions { display: flex; gap: .4rem; padding: .55rem .7rem; overflow-x: auto; border-top: 1px solid #343945; }
.app-chat-suggestions:empty { display: none; }
.app-chat-suggestion { flex: 0 0 auto; padding: .35rem .58rem; border: 1px solid #59606d; border-radius: 999px; background: #292e39; color: #e8e9ec; font-size: .73rem; cursor: pointer; }
.app-chat-suggestion:hover,
.app-chat-suggestion:focus-visible { border-color: #78bac9; background: #354652; outline: none; }
.app-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; align-items: end; padding: .7rem; border-top: 1px solid #3a3e49; background: #292d38; }
.app-chat-composer textarea { max-height: 7.5rem; resize: none; border-color: #505663; background: #1d2028; color: #f3f4f6; }
.app-chat-composer textarea::placeholder { color: #8f949e; }
.app-chat-composer button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; }
@keyframes app-chat-pulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 520px) { .app-chat { height: 70vh; } .app-chat-message { max-width: 96%; } .app-chat-composer button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }