/* MARNI FINISH V28 — stable chat + clean stickers + business mode */
:root{--marni-v28-vh:100dvh;--marni-v28-vtop:0px}

/* business behaves as a distinct workspace */
.businessHero{position:relative}
.businessBackV28{position:absolute;inset-inline-start:14px;top:14px;z-index:3;font-weight:800}
.marniBusinessModeV28 #tab-business{padding-top:2px}
.marniBusinessModeV28 #tab-business .businessHero{padding-top:58px}

/* Full, stable chat surface on mobile */
.marniChatModeV28{overflow:hidden!important;position:fixed!important;inset:0!important;width:100%!important;height:var(--marni-v28-vh)!important}
.marniChatModeV28 .brandHeader,.marniChatModeV28 .groupBar,.marniChatModeV28 .primaryTabs{display:none!important}
.marniChatModeV28 #app{display:block!important;height:var(--marni-v28-vh)!important;overflow:hidden!important}
.marniChatModeV28 #tab-groupchat,.marniChatModeV28 #tab-chats{position:fixed!important;left:0;right:0;top:var(--marni-v28-vtop);height:var(--marni-v28-vh)!important;z-index:90;background:var(--bg,#f6f6fb);padding:0!important;margin:0!important;overflow:hidden!important}
.marniChatModeV28 #tab-groupchat .chatCard,.marniChatModeV28 #chatRoom{height:100%!important;min-height:0!important;max-height:none!important;border-radius:0!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:var(--card,#fff)}

.chatHeaderV28{height:64px;flex:0 0 64px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:12}
.chatIdentityV28{appearance:none;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;color:inherit}
.chatIdentityV28 #chatAvatarV28,.chatIdentityV28 #chatAvatarV28 .avatar,.chatIdentityV28 #chatAvatarV28 img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.chatIdentityV28 span:last-child{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.chatIdentityV28 strong{max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.chatIdentityV28 small{font-size:10px;opacity:.55}

/* old crowded header and status are replaced by compact header */
.marniChatModeV28 #tab-groupchat>.chatCard>.titleRow,.marniChatModeV28 #tab-groupchat .groupStatusStrip,.marniChatModeV28 #tab-groupchat .chatTools,.marniChatModeV28 #tab-groupchat .marniAskPanel{display:none!important}
.marniChatModeV28 #chatRoom>.titleRow{flex:0 0 auto;position:sticky;top:0;z-index:12;background:rgba(255,255,255,.96);padding:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.marniChatModeV28 #chatRoom .chatTools,.marniChatModeV28 #chatRoom .marniAskPanel{display:none!important}

.marniChatModeV28 .typingLine,.marniChatModeV28 .replyPreview,.marniChatModeV28 .attachmentPreview,.marniChatModeV28 .stickerTray,.marniChatModeV28 .inlinePot{flex:0 0 auto;margin-inline:8px}
.marniChatModeV28 .messages{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding:10px 10px 14px!important;scrollbar-gutter:stable}
.marniChatModeV28 .composer{position:relative!important;bottom:auto!important;flex:0 0 auto!important;margin:0!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid rgba(0,0,0,.08);z-index:15;display:flex;align-items:flex-end;gap:5px}
.marniChatModeV28 .composer input{min-width:0!important;flex:1 1 auto!important;height:42px!important;font-size:16px!important;line-height:20px!important;margin:0!important;transform:none!important}
.marniChatModeV28 .composer button{flex:0 0 auto!important}
.marniChatModeV28 .smartSuggestions{position:absolute;bottom:58px;left:8px;right:8px;z-index:20;max-height:120px;overflow:auto}

/* reduce expensive motion while keyboard is open */
.marniChatModeV28 *{scroll-behavior:auto!important}
.marniChatModeV28 .card,.marniChatModeV28 .bubble,.marniChatModeV28 button{transition:none!important;animation:none!important}

/* iPhone keyboard sticker: image only, no message card/frame */
.iphoneStickerBubbleV28{background:transparent!important;border:0!important;box-shadow:none!important;padding:2px!important;max-width:190px!important}
.iphoneStickerBubbleV28 img{max-width:180px!important;max-height:180px!important;object-fit:contain!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.iphoneStickerBubbleV28 .mediaActionRow{display:none!important}
.iphoneStickerBubbleV28 .bubbleMeta{background:transparent!important;padding-inline:2px!important;margin-top:1px!important;font-size:10px!important;opacity:.65}
.marniPendingV28{opacity:.68}
.marniPendingV28.sendFailed{opacity:1}

.requestClosedV28{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center;background:#f2f0f7!important;border:1px solid rgba(0,0,0,.08)!important}
.requestClosedTitleV28{width:100%;font-size:14px}

@media(max-width:520px){
  .chatHeaderV28{height:60px;flex-basis:60px;padding:7px 8px}.chatHeaderV28 .mini{padding:7px 8px;font-size:11px}
  .marniChatModeV28 .composer .mediaIconBtn{width:34px!important;height:34px!important;padding:0!important;font-size:15px!important}
  .marniChatModeV28 .composer #sendGroupMessageBtn,.marniChatModeV28 .composer #sendDirectMessageBtn{padding:9px 10px!important;font-size:12px!important}
}