/* Mobile layout v1.50. Legacy layout assets remain available for rollback. */
.mobile-top-menu-v120m, .mobile-back-to-queue-v120m { display: none; }
.chat-account-label { font-size: 13px; font-weight: 700; color: #075e54; margin-top: 3px; }
.composer-more-actions { position: relative; }
.composer-more-actions > summary { cursor: pointer; padding: 10px 12px; border: 1px solid #667781; border-radius: 8px; color: #34454f; background: #fff; }
.composer-more-actions-panel { position: absolute; bottom: calc(100% + 8px); right: 0; padding: 8px; z-index: 10000; background: #fff; border: 1px solid #d1d7db; border-radius: 8px; box-shadow: 0 5px 16px #0002; white-space: nowrap; }
.composer-more-actions-panel .close-form { margin: 0; }
html body .composer .composer-icon-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; list-style: none; }
.composer-icon-button::-webkit-details-marker { display: none; }
.composer-icon-button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
html body .composer-more-actions-panel .composer-delete-secondary { margin: 8px 0 0 !important; display: block !important; }
html body .composer-more-actions-panel .btn-delete-conversation-v117v { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 8px 12px !important; border-radius: 6px !important; font-size: 13px !important; }
.wstudio-network-status { background: #fff3cd; color: #573c00; padding: 8px 12px; font-size: 13px; flex: 0 0 auto; }
.wstudio-network-status[hidden] { display: none; }
#wstudio-install-app-btn { position: fixed; right: 14px; bottom: 14px; z-index: 99999; border: 0; border-radius: 24px; padding: 11px 16px; min-height: 44px; background: #0b3f6f; color: #fff; font-weight: 700; display: none; }
#wstudio-install-app-btn.is-visible { display: inline-flex; align-items: center; gap: 8px; }
.wstudio-send-status-v150 { font-size: 13px; padding: 6px 0; color: #34454f; }
.wstudio-send-status-v150[hidden] { display: none !important; }
@media (max-width: 1024px) {
    html { width: 100%; -webkit-text-size-adjust: 100%; }
    html body { width: 100%; margin: 0; overflow-x: hidden; background: #fff; }
    html body input, html body select, html body textarea { font-size: 16px; }
    html body .app-shell { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; min-height: 100dvh; overflow: visible !important; }
    html body .topbar { height: auto !important; min-height: 60px !important; flex: 0 0 auto !important; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px !important; gap: 8px !important; position: relative !important; overflow: visible !important; z-index: 10001; }
    html body .brand { min-width: 0 !important; flex: 1 1 auto !important; max-width: none !important; }
    html body .brand h1 { font-size: 18px !important; line-height: 1.2 !important; margin: 0 !important; white-space: normal !important; }
    html body .brand small, html body .topbar > nav { display: none !important; }
    html body .mobile-top-menu-v120m { display: block !important; position: relative; flex: 0 0 auto; }
    html body .mobile-top-menu-v120m > summary { list-style: none; min-width: 96px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px 8px; border: 1px solid #667781; border-radius: 8px; background: #fff; color: #243b48; cursor: pointer; }
    .mobile-top-menu-v120m > summary::-webkit-details-marker { display: none; }
    .mobile-menu-label { font-size: 15px; font-weight: 700; }
    .mobile-status-summary { font-size: 11px; line-height: 1.35; }
    html body .mobile-top-menu-v120m > summary .mobile-status-dot-v120m { display: none; }
    html body .mobile-top-menu-panel-v120m { position: absolute; top: calc(100% + 6px); right: 0; width: min(330px, calc(100vw - 24px)); max-height: calc(var(--wstudio-visible-height, 100dvh) - 78px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #d1d7db; border-radius: 12px; padding: 10px; box-shadow: 0 10px 28px #0003; }
    .mobile-top-menu-panel-v120m strong { display: block; padding: 8px 10px; color: #34454f; font-size: 13px; }
    .mobile-top-menu-panel-v120m a { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 10px; font-size: 14px; border-radius: 6px; }
    .mobile-top-menu-panel-v120m a:hover { background: #f0f2f5; }
    .mobile-status-mini-dot-v120m { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: #b42318; }
    .mobile-status-mini-dot-v120m.connected { background: #008069; }
    [data-wa-status-stale="1"] .mobile-status-mini-dot-v120m { background: #8a5d00; }
    html body .layout { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 0 !important; height: auto !important; flex: 1 1 auto !important; padding: 0 !important; gap: 0 !important; }
    html body .sidebar { width: 100% !important; min-width: 0 !important; border: 0 !important; overflow: visible !important; height: auto !important; max-height: none !important; }
    html body.wstudio-mobile-list .chat, html body .layout-no-conversation > .chat { display: none !important; }
    html body .conversation-list { height: auto !important; max-height: none !important; overflow: visible !important; }
    html body .conversation-item { padding: 12px !important; gap: 10px !important; min-height: 92px; }
    html body .conversation-item .avatar, html body .conversation-item .avatar-fallback { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; }
    html body .conv-main { flex: 1 1 auto !important; min-width: 0 !important; }
    html body .conv-row { display: flex !important; gap: 8px !important; align-items: baseline !important; }
    html body .conv-title { flex: 1 1 auto !important; min-width: 0 !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 600; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
    html body .conv-time { font-size: 12px !important; flex: 0 0 auto !important; white-space: nowrap; color: #52616b; }
    html body .conv-meta { font-size: 12px !important; line-height: 1.45 !important; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
    html body .conv-meta .sector-mini-badge { font-size: 11px !important; margin-right: 4px; }
    html body.wstudio-mobile-detail { overflow: hidden !important; }
    html body.wstudio-mobile-detail .app-shell { position: fixed; inset: auto 0 0; top: var(--wstudio-visible-top, 0px); height: var(--wstudio-visible-height, 100dvh) !important; min-height: 0 !important; overflow: hidden !important; }
    html body.wstudio-mobile-detail .layout { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
    html body.wstudio-mobile-detail .sidebar { display: none !important; }
    html body.wstudio-mobile-detail .chat { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; width: 100% !important; flex: 1 1 auto !important; overflow: hidden !important; padding: 0 !important; }
    html body.wstudio-mobile-detail .mobile-back-to-queue-v120m { display: flex !important; align-items: center; min-height: 44px; flex: 0 0 auto; padding: 4px 12px; font-size: 13px; font-weight: 600; color: #075e54; background: #f0f2f5; }
    html body.wstudio-mobile-detail .chat-header { flex: 0 0 auto !important; display: flex !important; padding: 8px 12px !important; gap: 10px !important; min-height: 0 !important; align-items: center !important; flex-wrap: wrap; }
    html body.wstudio-mobile-detail .chat-header .avatar, html body.wstudio-mobile-detail .chat-header .avatar-fallback { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px; }
    html body.wstudio-mobile-detail .chat-header-main { flex: 1 1 calc(100% - 60px); min-width: 0 !important; }
    html body.wstudio-mobile-detail .chat-header-title { font-size: 16px !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
    html body.wstudio-mobile-detail .chat-account-label { font-size: 12px; line-height: 1.35; }
    html body.wstudio-mobile-detail .chat-header-meta { font-size: 12px !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: anywhere; margin-top: 3px; }
    html body.wstudio-mobile-detail .contact-save-inline { display: block !important; margin: 0; font-size: 12px; }
    html body.wstudio-mobile-detail .contact-save-inline summary { min-height: 44px; padding: 6px 0; display: flex; align-items: center; }
    html body.wstudio-mobile-detail .btn-delete-conversation-v117v { min-width: 44px !important; min-height: 44px !important; }
    html body.wstudio-mobile-detail .chat-header-actions { font-size: 11px; margin: 0 !important; padding: 0 !important; }
    html body.wstudio-mobile-detail .chat-header-actions .auto-claim-note { font-size: 11px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
    html body.wstudio-mobile-detail #messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding: 12px !important; }
    html body.wstudio-mobile-detail #messages .msg { max-width: 92% !important; overflow-wrap: anywhere; flex: 0 0 auto; }
    html body.wstudio-mobile-detail #messages .msg > .msg-inner { max-width: 100% !important; min-width: 0 !important; }
    html body.wstudio-mobile-detail #messages img, html body.wstudio-mobile-detail #messages video { max-width: 100% !important; }
    html body.wstudio-mobile-detail .composer { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important; background: #f0f2f5 !important; }
    html body.wstudio-mobile-detail .composer .send-form { order: 1 !important; display: block !important; width: 100% !important; }
    html body.wstudio-mobile-detail .composer .composer-input-wrap { display: flex !important; align-items: center !important; gap: 4px !important; padding: 4px !important; min-height: 54px !important; background: #fff !important; border: 1px solid #89979e !important; border-radius: 12px !important; }
    html body.wstudio-mobile-detail .composer .composer-input-wrap textarea[name="body"] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 46px !important; height: 54px !important; max-height: 100px !important; padding: 6px 4px !important; font-size: 16px !important; line-height: 1.35 !important; margin: 0 !important; border: 0 !important; background: #fff !important; resize: none; overflow-y: auto; }
    html body.wstudio-mobile-detail .composer button.composer-emoji-trigger[data-emoji-trigger] { position: static !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-height: 44px !important; min-width: 44px !important; padding: 0 !important; margin: 0 !important; order: 1 !important; }
    html body.wstudio-mobile-detail .composer .wstudio-send-button { order: 3 !important; flex: 0 0 44px !important; width: 44px !important; min-height: 44px !important; padding: 0 !important; background: #008069 !important; color: #fff !important; }
    html body.wstudio-mobile-detail .composer .composer-actions-row { order: 2 !important; margin: 0 !important; display: flex !important; flex-direction: row !important; gap: 6px !important; flex-wrap: nowrap !important; }
    html body.wstudio-mobile-detail .composer .composer-actions-row > .btn, html body.wstudio-mobile-detail .composer-more-actions { flex: 0 0 44px !important; min-width: 44px !important; width: 44px !important; }
    html body.wstudio-mobile-detail .composer .btn.secondary, html body.wstudio-mobile-detail .composer-more-actions > summary { min-height: 44px !important; font-size: 12px !important; padding: 8px 4px !important; color: #fff !important; background: #52616b !important; border: 0 !important; text-align: center; display: flex; align-items: center; justify-content: center; }
    html body.wstudio-mobile-detail .composer-more-actions .btn.danger { min-height: 44px !important; font-size: 13px !important; background: #b42318 !important; }
    html body.wstudio-mobile-detail .composer-more-actions .close-form { width: auto !important; }
    html body.wstudio-mobile-detail .attachment-preview, html body.wstudio-mobile-detail .reply-preview { margin-bottom: 6px; }
    html body.wstudio-mobile-detail .system-credit, html body.wstudio-mobile-list .system-credit { display: none !important; }
    html body.wstudio-mobile-detail #wstudio-install-app-btn { display: none !important; }
    html body.login-body { min-height: 100dvh; height: auto; padding: 24px 16px; overflow-y: auto; }
    html body.login-body .login-card { width: 100%; max-width: 420px; margin: auto; }
    html body.login-body .login-card button { min-height: 44px; }
    html body .wstudio-swipe-row-v142a.is-open-v142a .wstudio-swipe-action-v142a { pointer-events: auto !important; }
    html body .wstudio-swipe-action-button-v150 { border: 0; cursor: pointer; min-height: 44px; }
    html body .wstudio-swipe-action-button-v150:disabled { pointer-events: none; }
    .mobile-status-mini-dot-v120m.unknown { background: #667781; }
}
@media (max-width: 1024px) and (max-height: 500px) {
    html body.wstudio-mobile-detail .topbar { min-height: 50px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
    html body.wstudio-mobile-detail .chat-header { padding: 4px 12px !important; }
    html body.wstudio-mobile-detail .contact-save-inline, html body.wstudio-mobile-detail .chat-header-actions .auto-claim-note { display: none !important; }
    html body.wstudio-mobile-detail .chat-header-meta { display: none !important; }
    html body.wstudio-mobile-detail .composer .composer-input-wrap textarea[name="body"] { height: 46px !important; }
}
