/* WhatsApp Studio v1.20m - mobile pelo template real */

.wstudio-auto-link-v120m {
  color: #057a68 !important;
  font-weight: 700;
  text-decoration: underline;
  word-break: break-word;
}

.mobile-top-menu-v120m,
.mobile-back-to-queue-v120m {
  display: none;
}

#wstudio-install-app-btn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99999;
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  min-height: 44px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  background: #0b3f6f;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  display: none;
}

#wstudio-install-app-btn.is-visible {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

textarea,
.message-input textarea,
.chat-input textarea,
.reply-box textarea,
.composer textarea,
.message-composer textarea,
.chat-composer textarea {
  resize: none !important;
  min-height: 58px !important;
  height: 58px !important;
  max-height: 58px !important;
  overflow-y: auto !important;
  line-height: 1.35 !important;
}

@media (min-width: 821px) {
  footer,
  .footer,
  .system-footer,
  .app-footer,
  .system-credit {
    display: revert !important;
    visibility: visible !important;
  }
}

@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  * {
    box-sizing: border-box;
  }

  body {
    font-size: 15px;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  .app-shell {
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .topbar {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    overflow: visible !important;
    position: relative !important;
  }

  .brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 96px) !important;
  }

  .brand h1 {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .brand small {
    display: none !important;
  }

  .topbar > nav {
    display: none !important;
    visibility: hidden !important;
  }

  .mobile-top-menu-v120m {
    display: block !important;
    position: relative !important;
    margin-left: auto !important;
    z-index: 9999 !important;
  }

  .mobile-top-menu-v120m summary {
    list-style: none !important;
    width: 78px !important;
    height: 38px !important;
    min-width: 78px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(34, 197, 94, .35) !important;
    background: rgba(220, 252, 231, 1) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
    cursor: pointer !important;
  }

  .mobile-top-menu-v120m.has-error summary {
    border-color: rgba(239, 68, 68, .35) !important;
    background: rgba(254, 226, 226, 1) !important;
  }

  .mobile-top-menu-v120m summary::-webkit-details-marker {
    display: none !important;
  }

  .mobile-status-dot-v120m {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    border-radius: 999px !important;
    display: block !important;
    background: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15) !important;
  }

  .mobile-status-dot-v120m.connected {
    background: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .15) !important;
  }

  .mobile-top-menu-panel-v120m {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 255px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    display: none !important;
  }

  .mobile-top-menu-v120m[open] .mobile-top-menu-panel-v120m {
    display: block !important;
  }

  .mobile-top-menu-panel-v120m strong {
    display: block !important;
    margin: 8px 0 6px !important;
    color: #0f172a !important;
  }

  .mobile-top-menu-panel-v120m strong:first-child {
    margin-top: 0 !important;
  }

  .mobile-status-line-v120m,
  .mobile-menu-link-v120m {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 6px !important;
    border-radius: 8px !important;
    color: #057a68 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }

  .mobile-status-line-v120m {
    color: #0f172a !important;
    font-weight: 600 !important;
  }

  .mobile-menu-link-v120m:hover {
    background: #f1f5f9 !important;
  }

  .mobile-status-mini-dot-v120m {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
  }

  .mobile-status-mini-dot-v120m.connected {
    background: #22c55e !important;
  }

  .layout {
    display: block !important;
    height: calc(100vh - 64px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .layout-no-conversation .chat {
    display: none !important;
  }

  .layout-no-conversation .sidebar {
    display: flex !important;
    width: 100% !important;
    max-height: none !important;
    height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
  }

  .layout-has-conversation .sidebar {
    display: none !important;
  }

  .layout-has-conversation .chat {
    display: flex !important;
    width: 100% !important;
    height: calc(100vh - 64px) !important;
    overflow: hidden !important;
  }

  .new-conversation-box {
    display: none !important;
  }

  .conversation-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }

  .mobile-back-to-queue-v120m {
    display: block !important;
    padding: 10px 12px !important;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    text-decoration: none !important;
  }

  .chat-header {
    padding: 10px 12px !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .chat-header-meta {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .contact-save-inline {
    display: none !important;
  }

  .wstudio-delete-conversation-v117v,
  .wstudio-delete-conversation-v117u,
  .btn-delete-conversation-v117v,
  .btn-delete-conversation-v117u,
  button[aria-label*="Excluir"],
  button[title*="Excluir"],
  a[aria-label*="Excluir"],
  a[title*="Excluir"] {
    display: none !important;
    visibility: hidden !important;
  }

  .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .msg,
  .msg:has(.msg-media-image) {
    max-width: 92% !important;
  }

  .composer {
    flex: 0 0 auto !important;
    padding: 10px 10px 12px !important;
  }

  .composer-input-wrap {
    width: 100% !important;
  }

  .composer textarea {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
  }

  .composer-actions-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
    margin-top: 8px !important;
    flex-wrap: nowrap !important;
  }

  .composer-actions-row > .btn,
  .composer-actions-row .btn {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 4px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .composer-actions-row .close-form {
    display: contents !important;
  }

  .composer-actions-row .close-form .btn {
    width: 100% !important;
  }

  footer,
  .footer,
  .system-footer,
  .app-footer,
  .system-credit {
    display: none !important;
    visibility: hidden !important;
  }
}

@media all and (display-mode: standalone) {
  #wstudio-install-app-btn {
    display: none !important;
  }

  body {
    overscroll-behavior-y: contain;
  }
}