.chat-page{display:flex;height:100vh;background:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chat-sidebar{width:320px;background:#fff;border-right:1px solid #e1e4e8;display:flex;flex-direction:column}.chat-sidebar__header{padding:1rem;border-bottom:1px solid #e1e4e8;display:flex;align-items:center;justify-content:space-between}.chat-sidebar__header h2{margin:0;font-size:1.25rem;font-weight:600}.btn-icon{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:.5rem;border-radius:4px;transition:background .2s}.btn-icon:hover{background:#f5f7fa}.chat-list{flex:1;overflow-y:auto}.chat-item{width:100%;padding:1rem;border:none;background:#fff;border-bottom:1px solid #f5f7fa;cursor:pointer;display:flex;align-items:center;gap:.75rem;text-align:left;transition:background .2s}.chat-item:hover{background:#f5f7fa}.chat-item--active{background:#e8f0fe}.chat-item__avatar{width:48px;height:48px;border-radius:50%;background:#e1e4e8;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}.chat-item__info{flex:1;min-width:0}.chat-item__name{font-weight:600;font-size:.9375rem;margin-bottom:.25rem}.chat-item__preview{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item__badge{background:#0084ff;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:12px;min-width:20px;text-align:center}.chat-main{flex:1;display:flex;flex-direction:column;background:#fff}.chat-placeholder,.chat-error{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6b7280;padding:2rem;text-align:center}.chat-placeholder h3,.chat-error h2{margin:0 0 .5rem;color:#111827}.chat-placeholder p,.chat-error p{margin:0}.chat-header{padding:1rem 1.5rem;border-bottom:1px solid #e1e4e8;background:#fff}.chat-header__info h3{margin:0 0 .25rem;font-size:1.125rem;font-weight:600}.chat-header__subtitle{margin:0;font-size:.875rem;color:#6b7280}.chat-messages{flex:1;overflow-y:auto;padding:1.5rem;background:#f5f7fa}.message{display:flex;margin-bottom:1rem}.message--sent{justify-content:flex-end}.message--received{justify-content:flex-start}.message__content{max-width:70%;padding:.75rem 1rem;border-radius:18px;background:#fff;box-shadow:0 1px 2px #0000000d}.message--sent .message__content{background:#0084ff;color:#fff}.message__sender{font-size:.75rem;font-weight:600;margin-bottom:.25rem;color:#6b7280}.message--sent .message__sender{color:#fffc}.message__text{font-size:.9375rem;line-height:1.4;word-wrap:break-word}.message__timestamp{font-size:.6875rem;margin-top:.25rem;opacity:.7}.chat-input{padding:1rem 1.5rem;border-top:1px solid #e1e4e8;background:#fff;display:flex;gap:.75rem}.chat-error-banner{position:absolute;top:-3rem;left:0;right:0;padding:.75rem;background:#fef2f2;color:#dc2626;font-size:.875rem;text-align:center;border-radius:8px 8px 0 0}.chat-input__field{flex:1;padding:.75rem 1rem;border:1px solid #e1e4e8;border-radius:24px;font-size:.9375rem;outline:none;transition:border-color .2s}.chat-input__field:focus{border-color:#0084ff}.chat-input__send{padding:.75rem 1.5rem;background:#0084ff;color:#fff;border:none;border-radius:24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .2s}.chat-input__send:hover:not(:disabled){background:#0073e6}.chat-input__send:disabled{opacity:.5;cursor:not-allowed}.chat-loading,.chat-empty{padding:2rem;text-align:center;color:#6b7280}@media (max-width: 768px){.chat-sidebar{width:100%;border-right:none}.chat-main,.chat-page.show-messages .chat-sidebar{display:none}.chat-page.show-messages .chat-main{display:flex}.message__content{max-width:85%}}.chat-list::-webkit-scrollbar,.chat-messages::-webkit-scrollbar{width:6px}.chat-list::-webkit-scrollbar-track,.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-list::-webkit-scrollbar-thumb,.chat-messages::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.chat-list::-webkit-scrollbar-thumb:hover,.chat-messages::-webkit-scrollbar-thumb:hover{background:#9ca3af}