/* V6 mobile emoji + profile UX fix. Keep this file last in the cascade. */ @media (max-width: 767px) { /* The panel is positioned by JS against the actual toolbar button. */ #emojiPanel.v6-emoji-open { position: fixed !important; z-index: 2500 !important; display: flex !important; max-height: min(58dvh, 430px) !important; overflow: hidden !important; } #emojiPanel.v6-emoji-open .emoji-grid, #emojiPanel.v6-emoji-open .sticker-grid { overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #emojiPanel.v6-emoji-open .emoji-cell { min-width: 40px !important; min-height: 40px !important; font-size: 27px !important; } .z-tool-icon[title="Emoji"] { position: relative; z-index: 2501; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } } /* Desktop/tablet: show the user's full name on hover without affecting clicks. */ @media (min-width: 768px) { .room-item[data-fullname] { position: relative; } .room-item[data-fullname]::after { content: attr(data-fullname); position: absolute; left: 64px; top: calc(100% - 2px); z-index: 4000; max-width: min(360px, calc(100vw - 100px)); padding: 7px 10px; border-radius: 8px; background: rgba(15,23,42,.96); color: #fff; font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .room-item[data-fullname]:hover::after { opacity: 1; visibility: visible; transform: translateY(0); } } /* Account profile: avatar is preview-only until the explicit Change photo action. */ .account-avatar-wrap { position: relative; width: 88px; flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; gap: 7px; } .account-profile-meta { min-width: 0; } .account-avatar-change { border: 1px solid color-mix(in srgb, var(--primary) .35, transparent); background: color-mix(in srgb, var(--primary) .10, transparent); color: var(--primary, #f59e0b); border-radius: 9px; padding: 5px 9px; font-size: 11px; font-weight: 700; cursor: pointer; } .account-avatar-change:hover, .account-avatar-change:focus-visible { background: color-mix(in srgb, var(--primary) .18, transparent); outline: none; } @media (max-width: 560px) { .account-avatar-wrap { width: 78px; flex-basis: 78px; } .account-avatar-change { padding: 6px 8px; } } /* ===== V6.1 FINAL MOBILE EMOJI VIEWPORT FIX ===== The picker is moved under on mobile and positioned by JS. Do NOT use bottom:100% here: it is relative to the wrong container on several iOS Safari / Android WebView layouts. */ @media (max-width: 767px) { #emojiPanel.v6-emoji-open { position: fixed !important; display: flex !important; z-index: 2500 !important; margin: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; overflow: hidden !important; box-sizing: border-box !important; } #emojiPanel.v6-emoji-open .emoji-grid, #emojiPanel.v6-emoji-open .sticker-grid { min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } #emojiPanel.v6-emoji-open .emoji-cell { min-width: 40px !important; min-height: 40px !important; font-size: 27px !important; touch-action: manipulation !important; } } /* ===== V7.6 MOBILE REACTION PICKER VIEWPORT FIX ===== Mobile only. The reaction bar is fixed by JS against the visual viewport. Keep it compact, fully visible and above the mobile composer/navigation. */ @media (max-width: 767px) { .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 { position: fixed !important; z-index: 2600 !important; max-width: calc(100vw - 16px) !important; min-height: 42px !important; padding: 5px 7px !important; border-radius: 22px !important; white-space: nowrap !important; overflow: visible !important; transform: none !important; pointer-events: auto !important; } .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-choice { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 22px !important; line-height: 1 !important; touch-action: manipulation !important; } .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-picker-close { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 22px !important; line-height: 1 !important; touch-action: manipulation !important; } }