diff --git a/conversations.php b/conversations.php index c0a547e..4797f6d 100644 --- a/conversations.php +++ b/conversations.php @@ -18,29 +18,36 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; - background: #e5ddd5; + background: linear-gradient(135deg, #f0f4f7 0%, #e5ddd5 100%); margin: 0; - height: 100vh; + min-height: 100vh; overflow: hidden; + color: #222; + font-size: 14px; } .chat-container { display: flex; height: 100vh; - background: white; + background: transparent; + gap: 12px; + padding: 12px; } .chat-sidebar { - width: 350px; + width: 360px; background: var(--sidebar-bg); - border-right: 1px solid #e1e5e9; + border-radius: 8px; + border: 1px solid #e9eef2; display: flex; flex-direction: column; + box-shadow: 0 4px 14px rgba(16,24,40,0.04); + overflow: hidden; } .sidebar-header { - padding: 20px; - background: var(--whatsapp-dark); + padding: 14px 16px; + background: linear-gradient(180deg, var(--whatsapp-dark) 0%, #054f45 100%); color: white; display: flex; align-items: center; @@ -48,45 +55,47 @@ } .sidebar-search { - padding: 10px 20px; + padding: 10px 12px; background: white; - border-bottom: 1px solid #e1e5e9; + border-bottom: 1px solid #eef2f5; } .conversation-list { flex: 1; overflow-y: auto; + padding: 6px; } .conversation-item { - padding: 15px 20px; - border-bottom: 1px solid #f1f1f1; + padding: 12px 14px; + border-bottom: 1px solid #f1f5f8; cursor: pointer; - transition: background-color 0.2s; + transition: background-color 0.12s, transform 0.08s; display: flex; align-items: center; } .conversation-item:hover { - background: #f5f5f5; + background: #f6fbff; + transform: translateY(-1px); } .conversation-item.active { - background: #e3f2fd; + background: #e9fbf1; border-right: 3px solid var(--whatsapp-green); } .conversation-avatar { - width: 50px; - height: 50px; + width: 46px; + height: 46px; border-radius: 50%; background: var(--whatsapp-green); display: flex; align-items: center; justify-content: center; color: white; - font-weight: bold; - margin-right: 15px; + font-weight: 700; + margin-right: 12px; flex-shrink: 0; } @@ -96,22 +105,22 @@ } .conversation-name { - font-weight: 600; - font-size: 16px; - color: #333; - margin-bottom: 5px; + font-weight: 700; + font-size: 15px; + color: #262626; + margin-bottom: 4px; } .conversation-preview { - color: #666; - font-size: 14px; + color: #6b7280; + font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversation-time { - color: #999; + color: #9aa4af; font-size: 12px; text-align: right; flex-shrink: 0; @@ -122,51 +131,52 @@ flex: 1; display: flex; flex-direction: column; - background: #e5ddd5; + background: transparent; } .chat-header { - padding: 15px 20px; - background: var(--whatsapp-dark); + padding: 12px 18px; + background: linear-gradient(180deg, var(--whatsapp-dark) 0%, #0a5347 100%); color: white; - border-bottom: 1px solid #ddd; + border-radius: 8px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; display: flex; align-items: center; + gap: 12px; + box-shadow: 0 2px 6px rgba(15,23,42,0.06); } .chat-header-avatar { - width: 40px; - height: 40px; + width: 44px; + height: 44px; border-radius: 50%; background: var(--whatsapp-green); display: flex; align-items: center; justify-content: center; color: white; - font-weight: bold; - margin-right: 15px; + font-weight: 700; + margin-right: 12px; } - .chat-header-info h6 { - margin: 0; - font-size: 16px; - } - - .chat-header-info small { - color: #ccc; - } + .chat-header-info h6 { margin: 0; font-size: 15px; } + .chat-header-info small { color: rgba(255,255,255,0.85); } .chat-conversations { flex: 1; overflow-y: auto; - padding: 20px; - background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxwYXR0ZXJuIGlkPSJ3aGF0c2FwcC1iZyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPgo8cG9seWdvbiBmaWxsPSJyZ2JhKDIyOSwyMjEsMjEzLDAuMSkiIHBvaW50cz0iMCwwIDEwMCwwIDEwMCwxMDAgMCwxMDAiLz4KPGV+'; + padding: 12px 16px; + background: #f8f9fb; + border: 1px solid #eef2f5; + border-radius: 0 0 8px 8px; } .message { - max-width: 70%; - margin-bottom: 10px; + width: 100%; + margin-bottom: 8px; display: flex; + align-items: flex-end; } .message.outgoing { @@ -182,32 +192,50 @@ border-radius: 18px; position: relative; word-wrap: break-word; - box-shadow: 0 1px 1px rgba(0,0,0,0.1); + box-shadow: 0 3px 10px rgba(2,6,23,0.06); + max-width: 72%; + line-height: 1.35; + transition: transform 0.08s ease, box-shadow 0.12s ease; } .message.outgoing .message-bubble { background: var(--whatsapp-light); - color: #333; - border-bottom-right-radius: 4px; + color: #222; + border-bottom-right-radius: 6px; } .message.incoming .message-bubble { background: white; - color: #333; - border-bottom-left-radius: 4px; + color: #222; + border-bottom-left-radius: 6px; } - .message-time { - font-size: 11px; - color: #999; - text-align: right; - margin-top: 5px; + /* Cola tipo WhatsApp */ + .message.outgoing .message-bubble::after { + content: ''; + position: absolute; + right: -6px; + bottom: 6px; + width: 12px; + height: 12px; + background: var(--whatsapp-light); + transform: rotate(45deg); + z-index: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.04); + } + .message.incoming .message-bubble::after { + content: ''; + position: absolute; + left: -6px; + bottom: 6px; + width: 12px; + height: 12px; + background: white; + transform: rotate(45deg); + z-index: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.04); } - /* Diseño estilo ventana: timestamp oculto hasta hover */ - .message-bubble { - position: relative; - } .message-bubble .message-time { position: absolute; right: 8px; @@ -218,6 +246,10 @@ transition: opacity 0.12s ease-in-out; white-space: nowrap; } + .message-bubble:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(2,6,23,0.06); + } .message-bubble:hover .message-time, .message-bubble:focus-within .message-time { opacity: 1;