/* Reversible message layout layer. Remove this stylesheet link to restore the previous message layout. */
.message-redesign{height:calc(100dvh - 150px)!important;min-height:0!important;overflow:hidden!important}
.message-redesign .messages-layout{height:100%!important;min-height:0!important;display:grid!important;overflow:hidden!important}
.message-redesign .chat-panel{height:100%!important;min-height:0!important;overflow:hidden!important}
.message-redesign .chat-panel .chat{height:100%!important;min-height:0!important;overflow:hidden!important;display:grid!important;grid-template-rows:60px minmax(0,1fr) 82px!important;padding:0 22px 18px!important}
.message-redesign .chat-panel .message-header{grid-row:1!important;height:60px!important;min-height:60px!important;margin:0 -22px!important;padding:0 22px!important;border-bottom:1px solid var(--line)!important;background:var(--surface)!important;display:flex!important;align-items:center!important;position:relative!important;z-index:4!important}
.message-redesign .chat-panel .message-header .message-peer{display:flex!important;align-items:center!important;gap:11px!important}
.message-redesign .chat-panel .message-header .message-peer .avatar{width:42px!important;height:42px!important;border-radius:50%!important}
.message-redesign .chat-panel .message-header .message-peer-info{display:grid!important;line-height:1.25!important}
.message-redesign .chat-panel .message-header .message-peer-info b{font-size:18px!important;font-weight:800!important}
.message-redesign .chat-panel .message-header .message-peer-info small{font-size:12px!important;color:var(--muted)!important}
.message-redesign .chat-panel .message-header #call{margin-left:auto!important}
.message-redesign .chat-panel #typing{display:none!important}
.message-redesign .chat-panel .messages{grid-row:2!important;height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;padding:22px 8px!important;display:flex!important;flex-direction:column!important;gap:10px!important;scrollbar-width:thin!important}
.message-redesign .chat-panel #composer{grid-row:3!important;height:70px!important;min-height:70px!important;margin:0 -10px!important;padding:10px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:var(--bg)!important;display:flex!important;align-items:center!important;gap:8px!important;box-shadow:0 -5px 18px color-mix(in srgb,var(--accent-deep) 7%,transparent)!important;position:relative!important;z-index:5!important}
.message-redesign .chat-panel #composer>.input{height:46px!important;flex:1 1 auto!important;min-width:0!important;background:var(--surface)!important;border-color:transparent!important}
.message-redesign .chat-panel #composer>.message-tools{display:flex!important;align-items:center!important;gap:6px!important;order:2!important;flex:0 0 auto!important}
.message-redesign .chat-panel #composer>.message-tools .message-tool{width:38px!important;height:38px!important}
.message-redesign .chat-panel #composer>button:not(.message-tool){height:42px!important;padding:0 16px!important;order:3!important;flex:0 0 auto!important}
.message-redesign .chat-panel .bubble{flex:0 0 auto!important}
.message-redesign .chat-panel .bubble:has(.voice-player){background:transparent!important;color:var(--ink)!important;padding:0!important}
@media(max-width:800px){.message-redesign{height:calc(100dvh - 120px)!important}.message-redesign .chat-panel .chat{padding:0 12px 12px!important;grid-template-rows:56px minmax(0,1fr) 76px!important}.message-redesign .chat-panel .message-header{height:56px!important;min-height:56px!important;margin:0 -12px!important;padding:0 12px!important}.message-redesign .chat-panel #composer{height:64px!important;min-height:64px!important;margin:0!important;padding:8px!important}.message-redesign .chat-panel #composer>button:not(.message-tool){font-size:0;width:42px;padding:0}.message-redesign .chat-panel #composer>button:not(.message-tool)::after{content:'↑';font-size:18px}}
@media(prefers-reduced-motion:reduce){.message-redesign *{scroll-behavior:auto!important}}

/* Header / chat / footer are three physically separate regions. */
.message-redesign .chat-panel .chat{display:flex!important;flex-direction:column!important;justify-content:stretch!important;grid-template-rows:none!important;height:100%!important;min-height:0!important;overflow:hidden!important}
.message-redesign .chat-panel .message-header{order:1!important;flex:0 0 60px!important;height:60px!important;min-height:60px!important}
.message-redesign .chat-panel .messages{order:2!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important}
.message-redesign .chat-panel #composer{order:3!important;flex:0 0 70px!important;height:70px!important;min-height:70px!important;margin:0 -10px!important;border-radius:16px 16px 0 0!important;border:1px solid var(--line)!important;border-bottom:0!important;background:var(--surface)!important;box-shadow:0 -6px 20px color-mix(in srgb,var(--accent-deep) 8%,transparent)!important}
.message-redesign .chat-panel #typing{display:none!important;position:absolute!important}

/* Final separation: header and footer are outside the scrolling chat viewport. */
.message-redesign .chat-panel .chat{position:relative!important;display:block!important;height:100%!important;min-height:0!important;padding:0!important;overflow:hidden!important}
.message-redesign .chat-panel .message-header{position:absolute!important;top:0!important;left:0!important;right:0!important;width:auto!important;height:60px!important;min-height:60px!important;margin:0!important;padding:0 22px!important}
.message-redesign .chat-panel .messages{position:absolute!important;top:60px!important;right:0!important;bottom:82px!important;left:0!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;padding:22px 30px!important}
.message-redesign .chat-panel #composer{position:absolute!important;right:12px!important;bottom:14px!important;left:12px!important;width:auto!important;height:70px!important;min-height:70px!important;margin:0!important;padding:10px!important;border:1px solid var(--line)!important;border-radius:18px!important;background:var(--surface)!important;box-shadow:0 10px 28px color-mix(in srgb,var(--accent-deep) 14%,transparent)!important}
.message-redesign .chat-panel #composer{height:58px!important;min-height:58px!important;padding:7px 10px!important;border-radius:16px!important}.message-redesign .chat-panel #composer>.input{height:40px!important}.message-redesign .chat-panel #composer>.message-tools .message-tool{width:34px!important;height:34px!important}.message-redesign .chat-panel #composer>button:not(.message-tool){height:38px!important;padding:0 14px!important}
@media(max-width:800px){.message-redesign .chat-panel .message-header{height:56px!important;min-height:56px!important;padding:0 12px!important}.message-redesign .chat-panel .messages{top:56px!important;bottom:90px!important;padding:16px 14px!important}.message-redesign .chat-panel #composer{height:64px!important;min-height:64px!important;right:8px!important;left:8px!important;bottom:8px!important;padding:8px!important}}
@media(max-width:800px){.message-redesign .chat-panel .messages{bottom:76px!important}.message-redesign .chat-panel #composer{height:54px!important;min-height:54px!important;padding:6px 8px!important}}
@media(max-width:700px){.messages-page-body{height:calc(100dvh - 190px)!important;min-height:0!important;overflow:hidden!important;display:block!important}.messages-page-body .messages-layout{display:block!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}.messages-page-body .conversation-panel,.messages-page-body .chat-panel{display:block!important;width:100%!important;height:100%!important;min-height:0!important;transform:none!important}.messages-page-body.conversation-open .conversation-panel{display:none!important}.messages-page-body:not(.conversation-open) .chat-panel{display:none!important}.message-redesign .chat-panel .chat{width:100%!important;height:100%!important;min-height:0!important}}

/* Keep the messages page itself fixed; only the chat history is scrollable. */
html:has(.messages-page-body),body:has(.messages-page-body){height:100dvh!important;min-height:0!important;overflow:hidden!important}
.shell:has(.messages-page-body){height:100dvh!important;min-height:0!important;overflow:hidden!important}
.shell:has(.messages-page-body)>.sidebar{height:100dvh!important;min-height:0!important;overflow:hidden!important}
.shell:has(.messages-page-body)>.main{height:100dvh!important;min-height:0!important;overflow:hidden!important;padding-bottom:24px!important}
.message-redesign .messages-layout,.message-redesign .conversation-panel,.message-redesign .chat-panel{min-height:0!important;overflow:hidden!important}
@media(max-width:800px){.shell:has(.messages-page-body)>.main{padding-bottom:12px!important}}

/* Keep scrolling available without showing browser scrollbar chrome. */
*,*::before,*::after{scrollbar-width:none!important}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
.message-redesign .chat-panel .message-header .message-peer-info{min-width:0;display:flex!important;align-items:center!important}
.message-redesign .chat-panel .message-header .message-peer-info b{display:block!important;max-width:min(52vw,360px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)!important;font-size:18px!important;font-weight:800!important}
.message-redesign .chat-panel .message-tool{color:#ffc5d3!important;background:var(--surface-soft)!important}
.message-redesign .chat-panel .message-tool img{width:19px;height:19px;display:block;object-fit:contain}
.message-redesign .chat-panel #composer{overflow:visible!important}
.message-redesign .chat-panel .composer-attachment-preview{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;flex-wrap:wrap;align-items:center;gap:7px;max-width:min(520px,82%);max-height:150px;overflow:auto;padding:7px 9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 10px 24px color-mix(in srgb,var(--accent-deep) 14%,transparent);z-index:8;animation:message-preview-in 180ms ease both}
.message-redesign .chat-panel .composer-attachment-item{position:relative;display:flex;align-items:center;gap:5px;min-width:0}
.message-redesign .chat-panel .composer-attachment-preview img{width:48px;height:48px;border-radius:9px;object-fit:cover}.message-redesign .chat-panel .composer-attachment-preview audio{width:210px;height:34px}.message-redesign .chat-panel .composer-attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}.message-redesign .chat-panel .composer-attachment-remove{width:26px;height:26px;border-radius:50%;background:var(--accent-wash);color:var(--accent-deep);font-size:20px;line-height:1;display:grid;place-items:center}.message-redesign .chat-panel .composer-attachment-remove:hover{background:var(--accent)}
.message-redesign .chat-panel .bubble.has-attachment{padding-bottom:22px}.message-redesign .chat-panel .bubble.has-attachment .message-time{top:auto!important;bottom:4px!important;right:9px!important;left:auto!important;transform:translateY(5px)!important}.message-redesign .chat-panel .bubble.has-attachment:hover .message-time,.message-redesign .chat-panel .bubble.has-attachment:focus-within .message-time{transform:translateY(0)!important}
.message-redesign .chat-panel .attachment-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:min(460px,82%);align-self:flex-end}.message-redesign .chat-panel .attachment-group-item{position:relative;min-width:0;border-radius:12px;overflow:hidden;background:var(--surface-soft)}.message-redesign .chat-panel .attachment-group-item .message-image{width:100%;height:88px;max-width:none;max-height:none;border-radius:0;object-fit:cover}.message-redesign .chat-panel .attachment-group-item .message-time{position:absolute;right:5px;bottom:4px;opacity:0;color:#fff;text-shadow:0 1px 3px #000;transform:translateY(5px);transition:opacity 180ms ease,transform 180ms ease}.message-redesign .chat-panel .attachment-group-item:hover .message-time{opacity:1;transform:none}
@keyframes message-preview-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.home-sections>section:nth-child(2)>.person{margin-top:10px}.home-sections>section:nth-child(2)>.person:first-of-type{margin-top:0}
.message-image-viewer{position:fixed;inset:0;z-index:100;background:rgba(20,12,16,.78);display:grid;place-items:center;padding:28px;cursor:zoom-out;animation:message-preview-in 180ms ease both}.message-image-viewer img{max-width:92vw;max-height:88vh;border-radius:14px;object-fit:contain;touch-action:none;user-select:none;transition:transform 220ms cubic-bezier(.22,1,.36,1);cursor:zoom-in}.message-image-viewer img.is-zoomed{max-width:none;max-height:none;cursor:grab}.message-image-viewer img.is-zoomed:active{cursor:grabbing}