/* public/assets/css/style.css */
body { height: 100vh; overflow: hidden; background-color: #d1d7db; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.main-container { display: flex; height: 100vh; max-width: 1600px; margin: 0 auto; background: white; box-shadow: 0 0 20px rgba(0,0,0,0.1); }

/* Sidebar */
.sidebar { width: 30%; border-left: 1px solid #e9edef; display: flex; flex-direction: column; background: white; }
.sidebar-header { padding: 10px 16px; background: #f0f2f5; border-bottom: 1px solid #e9edef; display: flex; justify-content: space-between; align-items: center; height: 60px; }
.search-box { padding: 8px 12px; background: white; border-bottom: 1px solid #e9edef; }
.search-input { background: #f0f2f5; border: none; border-radius: 8px; padding: 7px 30px 7px 12px; font-size: 14px; width: 100%; }
.conversation-list { flex: 1; overflow-y: auto; }
.conversation-item { padding: 10px 15px; border-bottom: 1px solid #f0f2f5; cursor: pointer; display: flex; align-items: center; transition: background-color 0.2s; }
.conversation-item:hover { background-color: #f5f6f6; }
.conversation-item.active { background-color: #f0f2f5; }
.avatar { width: 45px; height: 45px; border-radius: 50%; background: #dfe3e5; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; flex-shrink: 0; }
.conv-info { margin-right: 15px; flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.conv-name { font-weight: 500; font-size: 16px; color: #111b21; }
.conv-time { font-size: 12px; color: #667781; }
.conv-bottom { display: flex; justify-content: space-between; align-items: center; }
.conv-msg { font-size: 13px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.badge-unread { background: #25d366; color: white; font-size: 10px; padding: 3px 6px; border-radius: 10px; font-weight: bold; }

/* Chat Area */
.chat-area { flex: 1; display: flex; flex-direction: column; background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); background-repeat: repeat; position: relative; }
.chat-area::before { content: ""; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(229, 221, 213, 0.9); z-index: 0; }
.chat-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

.chat-header { padding: 10px 16px; background: #f0f2f5; border-bottom: 1px solid #e9edef; display: flex; justify-content: space-between; align-items: center; height: 60px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px 50px; display: flex; flex-direction: column; gap: 8px; }

.message-row { display: flex; margin-bottom: 2px; }
.message-row.sent { justify-content: flex-end; }
.message-row.received { justify-content: flex-start; }

.message-bubble { max-width: 65%; padding: 6px 7px 8px 9px; border-radius: 7.5px; position: relative; font-size: 14.2px; line-height: 19px; color: #111b21; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); }
.message-row.sent .message-bubble { background-color: #d9fdd3; border-top-left-radius: 7.5px; }
.message-row.received .message-bubble { background-color: #ffffff; border-top-right-radius: 7.5px; }

/* صور المحادثة: حجم ثابت في الشات + النقر يكبرها */
.message-media-wrap { overflow: hidden; border-radius: 6px; }
.message-media-wrap[data-type="image"] { cursor: pointer; }
.message-media-wrap[data-type="image"] img { max-width: 100%; max-height: 280px; width: auto; height: auto; object-fit: contain; display: block; cursor: pointer; border-radius: 4px; }

.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: -2px; }
.msg-time { font-size: 11px; color: #667781; margin-top: 4px; float: left; margin-right: 5px; } 
.msg-status { font-size: 11px; }

.chat-footer { padding: 10px 16px; background: #f0f2f5; border-top: 1px solid #e9edef; display: flex; align-items: center; gap: 10px; }
#btn-record.recording { color: #dc3545 !important; }
.input-box { flex: 1; border-radius: 8px; border: 1px solid #fff; padding: 9px 12px; outline: none; resize: none; overflow-y: auto; max-height: 100px; }

/* Notes Panel */
.notes-panel { width: 25%; border-right: 1px solid #e9edef; background: white; display: none; flex-direction: column; }
.notes-header { padding: 15px; border-bottom: 1px solid #e9edef; font-weight: bold; background: #f0f2f5; }
.notes-list { flex: 1; overflow-y: auto; padding: 15px; }
.note-item { background: #fff8c4; padding: 10px; margin-bottom: 10px; border-radius: 5px; font-size: 13px; border-left: 3px solid #ffcc00; }
.note-meta { font-size: 10px; color: #666; margin-top: 5px; display: flex; justify-content: space-between; }

/* Helpers */
.no-chat-selected { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #667781; background: #f0f2f5; border-bottom: 6px solid #25d366; }
.d-none { display: none !important; }