.app{display:flex;flex-direction:row;height:95vh;width:95vw;overflow:hidden;position:relative}.menu-button{display:none;position:absolute;top:2px;left:10px;padding:10px 15px;background-color:#075e54;color:#fff;border:none;cursor:pointer;font-size:16px;z-index:1}.sidebar{width:35%;min-width:250px;background-color:#f0f0f0;border-right:1px solid #ccc;display:flex;flex-direction:column;transform:translate(0);transition:transform .3s ease}.sidebar-header{padding:20px;background-color:#075e54;color:#fff;display:flex;justify-content:space-between;align-items:center}.close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer}#chat-input-id{padding:10px;margin:10px;border:1px solid #ccc;border-radius:5px;width:80%;font-size:16px}.chat-list{flex:1;overflow-y:auto;padding:10px}@media (max-width: 768px){.sidebar{position:fixed;left:0;top:0;height:100vh;width:80vw;max-width:300px;transform:translate(-100%);z-index:5}.sidebar.open{transform:translate(0)}.menu-button{display:block}.chat-window{width:100vw}}@media (min-width: 769px){.sidebar{width:35%}.chat-window{width:65%}}.chat-window{display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;width:65%}.chat-header{display:flex;align-items:center;padding:10px;background-color:#f0f0f0;border-bottom:1px solid #ccc}.input-box{display:flex;padding:10px;border-top:1px solid #ccc}input[type=text]{flex:1;padding:10px;border:none;outline:none}button{padding:10px;background-color:#075e54;color:#fff;border:none;cursor:pointer}.chat-container{display:flex;align-items:center;justify-content:space-between;padding:8px;background-color:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;transition:background-color .3s,filter .3s}.chat-container:hover{filter:brightness(.9)}.chat-info{flex-grow:1;text-align:left}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-left:10px}.message{max-width:60%;margin-bottom:10px;padding:10px;border-radius:10px;font-size:18px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}.emisor{align-self:flex-end;background-color:#d1f7c4;text-align:right}.receptor{align-self:flex-start;background-color:#e3e3e3;text-align:left}.contenido{text-align:left;margin-top:0;margin-bottom:0;font-size:16px;flex-grow:1}.fecha{font-size:12px;color:gray;margin:0;flex-grow:1;text-align:right}.nick{color:#191970;text-align:left;font-size:13px;font-weight:700;margin-top:0;margin-bottom:0}.messages{font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;gap:10px;padding:10px;overflow-y:auto}