:root{--primary-color: #3369F3;--secondary-color: #2c3e50;--background-color: #FFF;--text-color: #1E1E1E;--error-color: #FF2F2F}body{padding:0;margin:0;color:#1e1e1e;color:var(--text-color);font-family:Arial,sans-serif;line-height:1.6;box-sizing:border-box}.login-page{width:340px;padding:30px;margin:10vh auto;border-radius:12px;box-shadow:0 0 10px #0000001a}.login-page input,.login-page button{width:100%}.login-page__title{font-size:20px;text-align:center}.input-wrapper{position:relative;margin-bottom:16px}.input,.select,.button{padding:10px;margin:0 0 10px;border:none;border-bottom:1px solid #3369F3;border-bottom:1px solid var(--primary-color);box-sizing:border-box;outline:none;transition:border-color .2s ease}.input:focus-visible,.select:focus-visible,.button:focus-visible{outline:none}.input--error{margin-bottom:0;border-bottom-color:#ff2f2f;border-bottom-color:var(--error-color)}.input-error{z-index:10;display:none;padding:0;margin-top:4px;color:#ff2f2f;color:var(--error-color);font-size:12px}.button{border:none;border-radius:8px;background-color:#3369f3;background-color:var(--primary-color);color:#fff;cursor:pointer;transition:background-color .3s ease}.button:hover{background-color:#2954c2}@supports (color: color-mix(in lch,red,blue)){.button:hover{background-color:color-mix(in srgb,var(--primary-color) 80%,black)}}.button:disabled{background-color:#bdc3c7;cursor:not-allowed}.button.secondary{background-color:transparent;color:#3369f3;color:var(--primary-color)}.not-found-page,.server-error-page{margin-top:20%;text-align:center}.messenger{display:flex;height:100vh;background:#fff}.sidebar{display:flex;width:25vw;border-right:1px solid #dcdcdc;background-color:#f5f5f5;flex-direction:column}.header{padding:16px 20px;background:#e0e0e0;text-align:right}.profile-link{color:#888;font-size:14px;cursor:pointer}.search{width:100%;padding:8px 12px;margin:12px 16px;border:none;border-radius:8px;background:#eaeaea;outline:none}.chat-list{padding:0;margin:0;list-style:none;overflow-y:auto;flex-grow:1}.chat-item{position:relative;display:flex;align-items:center;padding:12px 16px;border-top:1px solid #ececec;transition:background .2s;cursor:pointer}.chat-item:hover{background:#f0f4ff}.chat-item.selected{background:#dce6f9}.avatar{width:40px;height:40px;margin-right:12px;border-radius:50%;background:#ccc;flex-shrink:0}.chat-info{overflow:hidden;padding-right:15px}.chat-title{font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-preview{color:#666;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-time{position:absolute;top:12px;right:16px;color:#999;font-size:12px}.unread-count{position:absolute;right:16px;bottom:12px;height:18px;padding:0 5px;margin-left:10px;border-radius:50%;background:#1976d2;color:#fff;font-size:11px}.chat-window{display:flex;padding:16px 20px 0;background:#fff;flex-grow:1;flex-direction:column;align-items:center;justify-content:center}.placeholder{color:#aaa;font-size:14px}.chat-header{display:flex;width:100%;padding:0 20px 16px;border-bottom:1px solid #eee;justify-content:space-between;align-items:center}.chat-user{display:flex;align-items:center}.chat-user .avatar.small{width:36px;height:36px;margin-right:12px;border-radius:50%;background:#ccc}.username{font-size:15px;font-weight:600}.chat-menu{color:#666;font-size:20px;cursor:pointer}.chat-body{display:flex;width:100%;padding:16px 20px;flex:1;overflow-y:auto;flex-direction:column;gap:12px}.chat-date{margin-bottom:8px;color:#999;font-size:12px;align-self:center}.message{position:relative;max-width:65%}.message.incoming{align-self:flex-start}.message.outgoing{align-self:flex-end}.bubble{padding:10px 14px;border-radius:16px;background:#f2f2f2;font-size:14px}.message.outgoing .bubble{background:#e4edff}.meta{margin-top:4px;color:#888;font-size:11px;text-align:right}.message-image{display:block;width:100%;max-width:260px;border-radius:12px}.chat-input{display:flex;width:100%;padding:12px 16px;border-top:1px solid #eee;align-items:center;gap:10px}.chat-input input[type=text]{padding:10px 14px;border:none;border-radius:24px;background:#f1f1f1;font-size:14px;flex:1;outline:none}.file-button,.send-button{border:none;background:none;font-size:18px;cursor:pointer}.send-button{display:flex;width:36px;height:36px;border-radius:50%;background:#2563eb;color:#fff;align-items:center;justify-content:center}.profile-page{display:flex;height:100vh;background-color:#f1f1f1}.profile-page .sidebar{display:flex;width:60px;background-color:transparent;align-items:center;justify-content:center}.profile-page .back-button{width:40px;height:40px;border:none;border-radius:50%;background:#2f64ff;color:#fff;font-size:24px;cursor:pointer}.profile-page .profile-container{display:flex;padding:40px;background:#fff;flex-grow:1;flex-direction:column;align-items:center}.profile-page .profile-input{padding:6px 10px;margin:0}.profile-page .avatar.large{width:120px;height:120px;margin-bottom:12px;border-radius:50%}.profile-page .profile-name{margin-bottom:32px;font-size:18px;font-weight:600}.profile-page .profile-info{width:100%;max-width:600px;font-size:14px}.profile-page .row{display:flex;justify-content:space-between;padding:10px 0;align-items:center;border-bottom:1px solid #eee}.profile-page .label{color:#222}.profile-page .value{color:#666}.profile-page .profile-actions{display:flex;margin-top:32px;flex-direction:column;gap:12px}.profile-page .edit-link{margin:0;color:#2f64ff;-webkit-text-decoration:none;text-decoration:none}.profile-page .logout-link{margin:0;color:red;-webkit-text-decoration:none;text-decoration:none}