.messages-page-body{height:calc(100dvh - 150px);min-height:0;overflow:hidden}
.messages-page-body .messages-layout{display:grid;grid-template-columns:minmax(0,1fr);height:100%;min-height:0;position:relative;overflow:hidden}
.messages-page-body .conversation-panel,.messages-page-body .chat-panel{grid-column:1;grid-row:1;height:100%;min-height:0;min-width:0;transition:transform 720ms cubic-bezier(.22,1,.36,1),opacity 480ms ease}
.messages-page-body:not(.conversation-open) .conversation-panel{transform:translateX(0);opacity:1}
.messages-page-body:not(.conversation-open) .chat-panel{display:none}
.messages-page-body.conversation-open .conversation-panel{transform:translateX(-110%);opacity:0;pointer-events:none}
.messages-page-body.conversation-open .chat-panel{display:block;transform:translateX(0);opacity:1}
.messages-page-body .chat{height:100%;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.messages-page-body .message-header{grid-row:1;position:relative;z-index:3;background:var(--surface);border-bottom:1px solid var(--line);padding:4px 0 12px}
.messages-page-body .messages{grid-row:2;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:16px 8px}
.messages-page-body #composer{grid-row:3;position:relative;z-index:3;display:flex;align-items:center;gap:8px;min-height:66px;padding:12px 0 0;background:var(--surface);border-top:1px solid var(--line)}
.messages-page-body #composer>.input{flex:1;min-width:0}.messages-page-body #composer>.message-tools{order:2;flex:0 0 auto}.messages-page-body #composer>button:not(.message-tool){order:3;flex:0 0 auto}
.message-header{justify-content:initial!important;gap:12px!important;min-height:58px;flex:0 0 auto}
.message-header .message-peer{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.message-header .message-peer b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message-peer-info{display:grid;min-width:0}.message-peer-info small{font-size:12px;color:var(--muted)}
.message-header>#call{margin-left:auto}.message-back{margin-right:2px;flex:0 0 auto}
.messages-page-body .bubble{position:relative;max-width:58%;margin:3px 0}
.messages-page-body .bubble .message-time{position:absolute;top:50%;opacity:0;white-space:nowrap;color:var(--muted);font-size:11px;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease}
.messages-page-body .bubble:not(.mine) .message-time{left:calc(100% + 10px);transform:translate(-5px,-50%)}.messages-page-body .bubble.mine .message-time{right:calc(100% + 10px);transform:translate(5px,-50%)}
.messages-page-body .bubble:hover .message-time,.messages-page-body .bubble:focus-within .message-time{opacity:1;transform:translate(0,-50%)}
.messages-page-body .bubble.message-enter{animation:message-enter 300ms cubic-bezier(.22,1,.36,1) both}
.message-tools{display:flex;align-items:center;gap:7px}.message-tool{width:38px;height:38px;padding:0;border-radius:50%;background:var(--surface-soft);color:var(--accent-strong);display:grid;place-items:center;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease}.message-tool:hover{background:var(--accent);color:var(--accent-deep);transform:translateY(-1px)}
.attachment-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;font-weight:700}.attachment-link:hover{text-decoration:underline}.message-image{display:block;max-width:260px;max-height:260px;border-radius:12px;object-fit:cover}.voice-player{display:block;max-width:240px;height:36px}
.calls-page-list{display:grid;gap:10px}.calls-page-list .person{margin:0}.calls-page-list .person.call-missed{border-color:color-mix(in srgb,var(--danger) 60%,var(--line));box-shadow:inset 3px 0 0 var(--danger)}.calls-page-list .person.call-completed{border-color:color-mix(in srgb,#3c9b68 60%,var(--line));box-shadow:inset 3px 0 0 #3c9b68}
@keyframes message-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.messages-page-body{height:calc(100dvh - 120px)}.messages-page-body .bubble{max-width:70%}}
@media(prefers-reduced-motion:reduce){.messages-page-body .conversation-panel,.messages-page-body .chat-panel,.messages-page-body .bubble .message-time,.messages-page-body .bubble.message-enter{transition:none;animation:none}}