/* V35.11 — MOBILE WHATSAPP COMPOSER TARGETED ONLY
 * Scope: mobile chat composer + attachment/emoji surfaces.
 * PC/tablet and mobile navigation/menu are intentionally untouched.
 */
@media (max-width:767px){
  .chat-main.mobile-active .chat-input-zone,
  #chatMainContainer.mobile-active .chat-input-zone,
  body.mobile-chat-focus .chat-input-zone{
    background:var(--bg-main,#111b21) !important;
    border-top:0 !important;
    padding:0 0 env(safe-area-inset-bottom,0px) !important;
  }

  .mobile-wa-composer-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border:0 !important;
    background:transparent !important;
    color:#d7dde0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }
  .mobile-wa-composer-icon:active{background:rgba(255,255,255,.10) !important;transform:scale(.96);}
  .mobile-wa-composer-icon svg{width:24px !important;height:24px !important;display:block !important;fill:none !important;stroke:currentColor !important;stroke-width:1.9 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
  .mobile-wa-composer-icon.is-active{color:#25D366 !important;background:rgba(37,211,102,.10) !important;}

  .mobile-wa-plus{flex:0 0 38px !important;}
  .mobile-wa-emoji{width:34px !important;min-width:34px !important;height:34px !important;min-height:34px !important;position:absolute !important;right:4px !important;top:50% !important;transform:translateY(-50%) !important;z-index:4 !important;}
  .mobile-wa-emoji:active{transform:translateY(-50%) scale(.96) !important;}
  .mobile-wa-right{display:flex !important;align-items:center !important;gap:0 !important;flex:0 0 auto !important;}
  .mobile-wa-camera,.mobile-wa-mic{width:36px !important;min-width:36px !important;height:38px !important;}

  .zalo-input-area.mobile-wa-input-area{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
    padding:6px 6px 7px 4px !important;
    background:var(--bg-main,#111b21) !important;
    box-sizing:border-box !important;
  }
  .zalo-input-area.mobile-wa-input-area .zalo-input-box{
    position:relative !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    min-height:42px !important;
    height:auto !important;
    padding:3px 42px 3px 14px !important;
    border-radius:22px !important;
    background:#202c33 !important;
    border:1px solid rgba(255,255,255,.04) !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
  }
  .zalo-input-area.mobile-wa-input-area .chat-input{
    width:100% !important;
    min-height:32px !important;
    max-height:100px !important;
    margin:0 !important;
    padding:6px 0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#e9edef !important;
    -webkit-text-fill-color:#e9edef !important;
    resize:none !important;
    line-height:20px !important;
    font-size:15px !important;
  }
  .zalo-input-area.mobile-wa-input-area .chat-input::placeholder{color:#8696a0 !important;opacity:1 !important;}
  .zalo-input-area.mobile-wa-input-area .send-submit-btn{display:none !important;}
  .zalo-toolbar{display:none !important;}

  /* V35.13: the mobile composer is a vertical stack only while one auxiliary
     surface is open. The existing input row always stays visible ABOVE the
     attachment/emoji surface. No chat/menu geometry is changed. */
  .chat-input-zone.v3513-attachment-open,
  .chat-input-zone.v3513-emoji-open{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-end !important;
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }
  .chat-input-zone.v3513-attachment-open .zalo-input-area,
  .chat-input-zone.v3513-emoji-open .zalo-input-area{
    order:1 !important;
    flex:0 0 auto !important;
    position:relative !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  :root[data-theme="light"] .zalo-input-area.mobile-wa-input-area,
  body[data-theme="light"] .zalo-input-area.mobile-wa-input-area{background:var(--bg-main,#f0f2f5) !important;}
  :root[data-theme="light"] .zalo-input-area.mobile-wa-input-area .zalo-input-box,
  body[data-theme="light"] .zalo-input-area.mobile-wa-input-area .zalo-input-box{background:#fff !important;border-color:rgba(0,0,0,.08) !important;}
  :root[data-theme="light"] .zalo-input-area.mobile-wa-input-area .chat-input,
  body[data-theme="light"] .zalo-input-area.mobile-wa-input-area .chat-input{color:#111b21 !important;-webkit-text-fill-color:#111b21 !important;}
  :root[data-theme="light"] .zalo-input-area.mobile-wa-input-area .chat-input::placeholder,
  body[data-theme="light"] .zalo-input-area.mobile-wa-input-area .chat-input::placeholder{color:#667781 !important;}
  :root[data-theme="light"] .mobile-wa-composer-icon,
  body[data-theme="light"] .mobile-wa-composer-icon{color:#54656f !important;}

  .mobile-wa-attachment-panel{
    display:none;
    width:calc(100% - 20px) !important;
    margin:6px 10px 0 !important;
    padding:16px 10px 14px !important;
    border-radius:22px !important;
    background:#202c33 !important;
    border:1px solid rgba(255,255,255,.055) !important;
    box-shadow:0 -6px 24px rgba(0,0,0,.18) !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }
  .mobile-wa-attachment-panel.show{
    display:grid !important;
    position:static !important;
    order:2 !important;
    flex:0 0 auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .chat-input-zone.v3513-attachment-open .mobile-wa-attachment-panel{
    position:static !important;
    margin:0 10px 0 !important;
  }
  .mobile-wa-attachment-item{
    min-width:0 !important;
    min-height:106px !important;
    border:0 !important;
    background:transparent !important;
    color:#e9edef !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    border-radius:16px !important;
    padding:8px 4px !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .mobile-wa-attachment-item:active{background:rgba(255,255,255,.07) !important;transform:scale(.98);}
  .mobile-wa-attachment-icon{
    width:52px !important;height:52px !important;border-radius:50% !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    background:#2a3942 !important;color:#53bdeb !important;
  }
  .mobile-wa-attachment-icon svg{width:28px !important;height:28px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
  .mobile-wa-attachment-item strong{font-size:13px !important;font-weight:500 !important;color:#e9edef !important;}
  :root[data-theme="light"] .mobile-wa-attachment-panel,
  body[data-theme="light"] .mobile-wa-attachment-panel{background:#fff !important;border-color:rgba(0,0,0,.08) !important;box-shadow:0 -6px 24px rgba(15,23,42,.12) !important;}
  :root[data-theme="light"] .mobile-wa-attachment-item,
  body[data-theme="light"] .mobile-wa-attachment-item{color:#111b21 !important;}
  :root[data-theme="light"] .mobile-wa-attachment-item strong,
  body[data-theme="light"] .mobile-wa-attachment-item strong{color:#111b21 !important;}

  /* Emoji/sticker panel lives INSIDE the existing composer, directly BELOW
     the message-input row. This keeps the mobile chat/menu/layout untouched
     and prevents the picker from jumping to the top of the screen. */
  .chat-input-zone.v3513-emoji-open > .emoji-panel.v6-emoji-open{
    position:static !important;
    order:2 !important;
    flex:0 0 min(46dvh,350px) !important;
    width:100% !important;
    max-width:100% !important;
    height:min(46dvh,350px) !important;
    max-height:min(46dvh,350px) !important;
    margin:0 !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:40 !important;
  }

  body .emoji-panel.v6-emoji-open{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    height:min(46dvh,350px) !important;
    max-height:min(46dvh,350px) !important;
    margin:6px 0 0 !important;
    border:0 !important;
    border-radius:18px 18px 0 0 !important;
    background:#111b21 !important;
    box-shadow:0 -8px 30px rgba(0,0,0,.28) !important;
    overflow:hidden !important;
    z-index:40 !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
  }
  body .emoji-panel.v6-emoji-open .zalo-popup-tabs{height:44px !important;min-height:44px !important;padding:4px 12px !important;background:#202c33 !important;border-bottom:1px solid rgba(255,255,255,.06) !important;}
  body .emoji-panel.v6-emoji-open .zp-tab{font-size:11px !important;letter-spacing:.4px !important;border-radius:12px !important;}
  body .emoji-panel.v6-emoji-open .zp-tab.active{color:#25D366 !important;background:rgba(37,211,102,.10) !important;}
  body .emoji-panel.v6-emoji-open .emoji-content-tab{min-height:0 !important;flex:1 1 auto !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;visibility:visible !important;opacity:1 !important;}
  body .emoji-panel.v6-emoji-open #tabEmoji{display:block !important;}
  body .emoji-panel.v6-emoji-open .emoji-grid{visibility:visible !important;opacity:1 !important;}
  body .emoji-panel.v6-emoji-open .emoji-grid{grid-template-columns:repeat(8,1fr) !important;gap:1px !important;padding:8px 8px 10px !important;max-height:none !important;overflow:visible !important;}
  body .emoji-panel.v6-emoji-open .emoji-cell{font-size:27px !important;line-height:42px !important;height:42px !important;border-radius:10px !important;display:flex !important;align-items:center !important;justify-content:center !important;}
  body .emoji-panel.v6-emoji-open .emoji-cell:active{background:rgba(255,255,255,.08) !important;transform:scale(.92);} 
  body .emoji-panel.v6-emoji-open .sticker-grid{grid-template-columns:repeat(5,1fr) !important;gap:10px !important;padding:10px !important;overflow:auto !important;}
  body .emoji-panel.v6-emoji-open .v16-sticker-item{width:52px !important;height:52px !important;object-fit:contain !important;justify-self:center !important;}
  body .emoji-panel.v6-emoji-open .zalo-popup-footer{height:42px !important;min-height:42px !important;padding:5px 14px !important;background:#202c33 !important;border-top:1px solid rgba(255,255,255,.05) !important;}
  :root[data-theme="light"] body .emoji-panel.v6-emoji-open,
  body[data-theme="light"] .emoji-panel.v6-emoji-open{background:#f0f2f5 !important;}
  :root[data-theme="light"] body .emoji-panel.v6-emoji-open .zalo-popup-tabs,
  :root[data-theme="light"] body .emoji-panel.v6-emoji-open .zalo-popup-footer,
  body[data-theme="light"] .emoji-panel.v6-emoji-open .zalo-popup-tabs,
  body[data-theme="light"] .emoji-panel.v6-emoji-open .zalo-popup-footer{background:#fff !important;border-color:rgba(0,0,0,.08) !important;}

  .mobile-wa-composer-hidden{display:none !important;}
}

@media (min-width: 768px) {
  #mobileAttachmentPanel,
  .mobile-wa-attachment-panel {
    display: none !important;
  }
}