.conversation-browser { display: flex; flex-direction: column; padding: 24px; gap: 20px; overflow: hidden; }
.conversation-browser > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.conversation-browser-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid #e1e6ed; border-radius: 12px; overflow: hidden; background: #fff; }
.conversation-users { overflow: auto; padding: 16px; border-right: 1px solid #e1e6ed; }
.conversation-users label { margin-bottom: 14px; }
.conversation-user { display: grid; gap: 5px; width: 100%; text-align: left; padding: 12px; border: 1px solid transparent; border-bottom-color: #edf0f4; border-radius: 8px; background: #fff; color: #172033; }
.conversation-user:hover, .conversation-user.active { border-color: #c2d5f6; background: #edf4ff; }
.conversation-user small { color: #778196; }
.conversation-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.conversation-view { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.conversation-view > header { padding: 18px; border-bottom: 1px solid #e1e6ed; }
.conversation-view h3 { font-size: 18px; }
#conversations-channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#conversations-channels button { border: 1px solid #cdd8e9; border-radius: 8px; background: #fff; padding: 8px 12px; color: #245fca; }
#conversations-channels button.active { color: #fff; background: #276ef1; border-color: #276ef1; }
#conversations-channel-state { font-size: 12px; overflow-wrap: anywhere; }
.conversation-history { flex: 1; min-height: 0; overflow: auto; padding: 20px; background: #f6f8fb; }
#conversations-messages { display: flex; flex-direction: column; gap: 12px; }
#conversations-older { display: block; margin: 0 auto 18px; }
.conversation-message { align-self: flex-start; max-width: 90%; min-width: 180px; padding: 12px 15px; border: 1px solid #e1e6ed; border-radius: 12px; background: #fff; overflow-wrap: anywhere; }
.conversation-message.outgoing { align-self: flex-end; background: #eaf1ff; }
.conversation-message.failed { border-color: #d76a6a; }
.conversation-message header, .conversation-message footer { color: #69768a; font-size: 11px; }
.conversation-message header { margin-bottom: 8px; }
.conversation-message footer { margin-top: 8px; }
.conversation-message-text { white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
.conversation-options { display: grid; gap: 5px; margin-top: 10px; }
.conversation-keyboard-row { display: flex; gap: 5px; }
.conversation-keyboard-row span, .conversation-keyboard-row a { flex: 1; padding: 9px 12px; border: 1px solid #cdd8e9; border-radius: 7px; font-size: 13px; text-align: center; color: #245fca; background: #f7faff; }
.conversation-event { color: #536782; font-size: 13px; }
.conversation-debug { margin-top: 9px; color: #778196; font-size: 11px; }
.conversation-debug summary { cursor: pointer; }
.conversation-debug code { display: block; padding-top: 7px; overflow-wrap: anywhere; }
.conversation-contact { display: grid; gap: 5px; min-width: 190px; padding: 12px; border-left: 3px solid #6697dc; background: #f2f6fc; border-radius: 7px; }
.conversation-contact small { color: #69768a; font-size: 11px; }
.conversation-contact strong, .conversation-contact span { font-size: 14px; }
.conversation-composer { flex: none; display: grid; gap: 10px; padding: 14px 18px; border-top: 1px solid #e1e6ed; background: #fff; }
.conversation-composer textarea { min-height: 70px; max-height: 180px; }
.conversation-compose-actions { display: flex; align-items: center; gap: 10px; }
.conversation-compose-actions span { flex: 1; color: #778196; font-size: 12px; }
.conversation-photo-preview { display: flex; align-items: center; gap: 12px; }
.conversation-photo-preview img { max-width: 140px; max-height: 100px; border-radius: 8px; }
@media (max-width: 640px) { .conversation-compose-actions { flex-wrap: wrap; } .conversation-compose-actions span { flex-basis: 100%; order: 3; } .conversation-compose-actions .primary { margin-left: auto; } .conversation-browser-layout { grid-template-rows: 260px 780px; } }
.conversation-message img { display: block; max-width: 100%; max-height: 400px; margin-top: 8px; border-radius: 8px; }
.conversation-message button, .conversation-message a { display: inline-block; margin: 8px 8px 0 0; }
.conversation-message-text a { display: inline; margin: 0; color: #245fca; text-decoration: underline; }
.conversation-options a { display: block; margin: 0; text-decoration: none; }
#conversations-more-users { margin-top: 14px; width: 100%; }
@media (max-width: 900px) { .conversation-browser-layout { grid-template-columns: 240px minmax(0, 1fr); } .conversation-browser { padding: 14px; } }
@media (max-width: 640px) { .conversation-browser { overflow: auto; } .conversation-browser-layout { flex: none; min-height: 900px; grid-template-columns: 1fr; grid-template-rows: 300px 600px; } .conversation-users { border-right: 0; border-bottom: 1px solid #e1e6ed; } .conversation-browser > header { align-items: flex-start; } .conversation-message { max-width: 100%; } }