/* Contato mobile: cada controle ocupa uma linha real, sem coordenadas da foto.
   As faixas laterais pertencem à Agenda (36px) e ao DIAL (64px). */
@media (max-width: 900px) {
  #contato:is(.contact-mode-message, .contact-mode-audio) {
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-stage {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-artboard {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(330px, 1fr) auto auto !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 64px 8px 36px !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-block: 12px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-art--mobile {
    max-height: calc(100% - 105px) !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-mobile-intro {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-mobile-logo {
    width: 86px !important;
    height: 40px !important;
    opacity: 1 !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-mobile-intro p {
    font: 800 clamp(10px, 2.8vw, 13px)/1.2 Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-mode-switcher {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-mode-button {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 5px 3px !important;
    font: 700 clamp(8px, 2.2vw, 10px)/1.2 Arial, sans-serif !important;
    letter-spacing: 0 !important;
    gap: 4px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-mode-button > span {
    font-size: 11px !important;
  }
  #contato.contact-mode-message .telegram-form {
    position: relative !important;
    inset: auto !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 24px 48px 48px minmax(100px, 1fr) 38px auto !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 330px !important;
    padding: 11px !important;
    border: 5px solid #b94b36 !important;
    border-image: repeating-linear-gradient(135deg, #ad4938 0 10px, #f4e0bb 10px 20px, #496578 20px 30px, #f4e0bb 30px 40px) 5 !important;
    background: linear-gradient(100deg, #efcf99, #fae6c3 48%, #e8c48e) !important;
    color: #322419 !important;
    box-shadow: 0 4px 16px #0008 !important;
    pointer-events: auto !important;
  }
  #contato.contact-mode-message .telegram-heading {
    display: block !important;
    position: static !important;
    font: 700 19px/24px Georgia, serif !important;
    letter-spacing: .05em !important;
  }
  #contato.contact-mode-message .telegram-field {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-rows: 14px minmax(0, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #contato.contact-mode-message .telegram-field > span {
    position: static !important;
    font: 700 11px/14px Arial, sans-serif !important;
  }
  #contato.contact-mode-message .telegram-field input,
  #contato.contact-mode-message .telegram-field textarea {
    box-sizing: border-box !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid #9f7c51 !important;
    border-radius: 3px !important;
    background: #fff8e777 !important;
    font: 400 16px/1.35 Arial, sans-serif !important;
    resize: none !important;
  }
  #contato.contact-mode-message .telegram-submit {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    font: 700 11px/1.2 Arial, sans-serif !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .telegram-status {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    font: 400 11px/1.35 Arial, sans-serif !important;
    overflow-wrap: anywhere !important;
    pointer-events: auto !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .telegram-status:empty {
    display: none !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-socials {
    position: relative !important;
    inset: auto !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 34px !important;
    gap: 6px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .contact-socials .social-stamp {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px !important;
    gap: 5px !important;
    font: 700 10px/1 Arial, sans-serif !important;
    transform: none !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .social-stamp__mark {
    width: 20px !important;
    height: 20px !important;
    font-size: 18px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .site-credit {
    position: relative !important;
    inset: auto !important;
    grid-row: 4 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 39px !important;
    padding: 5px 0 !important;
    translate: none !important;
    transform: none !important;
    gap: 3px !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .site-credit span {
    position: static !important;
    font-size: 10px !important;
    white-space: normal !important;
  }
  #contato:is(.contact-mode-message, .contact-mode-audio) .site-credit strong {
    position: static !important;
    font-size: 12px !important;
  }
  /* O telefone continua no cenário; os controles não dependem de sua escala. */
  #contato.contact-mode-audio .contact-artboard {
    grid-template-rows: auto auto 44px minmax(180px, 1fr) auto auto auto !important;
    gap: 7px !important;
  }
  #contato.contact-mode-audio .voice-help {
    position: relative !important;
    inset: auto !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    font: 400 11px/1.35 Arial, sans-serif !important;
  }
  #contato.contact-mode-audio .phone-start-zone {
    position: relative !important;
    inset: auto !important;
    grid-row: 3 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    transform: none !important;
  }
  #contato.contact-mode-audio .phone-start-zone__label {
    margin: 0 !important;
    font-size: 11px !important;
  }
  #contato.contact-mode-audio .voice-panel {
    position: relative !important;
    inset: auto !important;
    grid-row: 4 !important;
    align-self: start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 180px !important;
    padding: 8px !important;
    grid-template-rows: 28px auto !important;
    background: linear-gradient(#302018eb, #18110de8) !important;
  }
  #contato.contact-mode-audio .voice-live-display {
    display: flex !important;
    height: auto !important;
    gap: 6px !important;
    padding: 0 0 6px !important;
  }
  #contato.contact-mode-audio .voice-live-display strong {
    font-size: 12px !important;
  }
  #contato.contact-mode-audio .voice-live-display small {
    margin-left: auto !important;
    font-size: 8px !important;
  }
  #contato.contact-mode-audio .voice-actions {
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, 40px) !important;
    padding: 6px 0 0 !important;
    gap: 5px !important;
  }
  #contato.contact-mode-audio .voice-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px !important;
    gap: 5px !important;
  }
  #contato.contact-mode-audio .voice-action--send { grid-column: 1 / -1 !important; }
  #contato.contact-mode-audio .voice-action__icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 13px !important;
  }
  #contato.contact-mode-audio .voice-action > span:last-child {
    position: static !important;
    font: 700 9px/1.2 Arial, sans-serif !important;
  }
  #contato.contact-mode-audio .telegram-form { display: contents !important; }
  #contato.contact-mode-audio .telegram-form > :not(.telegram-status) { display: none !important; }
  #contato.contact-mode-audio .telegram-status { grid-row: 5 !important; }
  #contato.contact-mode-audio .contact-socials { grid-row: 6 !important; }
  #contato.contact-mode-audio .site-credit { grid-row: 7 !important; }
}

/* Composição aprovada: telegrama da fotografia e controles junto ao telefone. */
@media(max-width:900px){
 #contato:is(.contact-mode-message,.contact-mode-audio) .contact-artboard{display:block!important;overflow:hidden!important;padding:0!important}
 #contato:is(.contact-mode-message,.contact-mode-audio) .contact-mobile-intro{position:absolute!important;left:36px!important;right:64px!important;top:10px!important;width:auto!important;background:#1b0e0b!important;box-shadow:0 0 0 12px #1b0e0b!important}
 #contato.contact-mode-message .contact-art--mobile{left:var(--s05-approved-photo-left)!important;top:var(--s05-approved-photo-top)!important;width:var(--s05-approved-photo-width)!important;height:var(--s05-approved-photo-height)!important;max-height:none!important;filter:brightness(.97) saturate(.95)!important;mask-image:none!important;-webkit-mask-image:none!important}
 #contato.contact-mode-message .telegram-form{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;pointer-events:none!important}
 #contato.contact-mode-message .telegram-heading{display:none!important}
 #contato.contact-mode-message .telegram-field{position:absolute!important;left:var(--s05-approved-field-left)!important;width:var(--s05-approved-field-width)!important;height:var(--s05-approved-line-height)!important;display:block!important;pointer-events:auto!important}
 #contato.contact-mode-message .telegram-field--name{top:var(--s05-approved-name-top)!important}
 #contato.contact-mode-message .telegram-field--email{top:var(--s05-approved-email-top)!important}
 #contato.contact-mode-message .telegram-field--message{top:var(--s05-approved-message-top)!important;height:var(--s05-approved-message-height)!important}
 #contato.contact-mode-message .telegram-field>span{position:absolute!important;left:5px!important;top:3px!important;font-size:10px!important;z-index:2!important}
 #contato.contact-mode-message .telegram-field input,#contato.contact-mode-message .telegram-field textarea{position:absolute!important;inset:0!important;padding:16px 5px 3px!important;background:rgba(255,250,232,.12)!important;border:0!important;border-radius:0!important}
 #contato.contact-mode-message .telegram-field input:focus,#contato.contact-mode-message .telegram-field textarea:focus{background:rgba(255,250,232,.32)!important;outline:1px solid #9b4f32!important}
 #contato.contact-mode-message .telegram-submit{position:absolute!important;left:var(--s05-approved-field-left)!important;top:var(--s05-approved-submit-top)!important;width:var(--s05-approved-field-width)!important;height:34px!important;min-height:34px!important;font-size:10px!important;pointer-events:auto!important}
 #contato:is(.contact-mode-message,.contact-mode-audio) .telegram-status{position:absolute!important;left:40px!important;right:68px!important;top:auto!important;bottom:91px!important;width:auto!important}
 #contato:is(.contact-mode-message,.contact-mode-audio) .contact-socials{position:absolute!important;left:36px!important;right:64px!important;bottom:52px!important;width:auto!important;height:32px!important}
 #contato:is(.contact-mode-message,.contact-mode-audio) .social-stamp{height:32px!important;min-height:32px!important}
 #contato:is(.contact-mode-message,.contact-mode-audio) .site-credit{position:absolute!important;left:36px!important;right:64px!important;bottom:8px!important;width:auto!important;height:36px!important}
 #contato.contact-mode-audio .contact-art--mobile{left:var(--s05-approved-audio-left)!important;top:170px!important;width:var(--s05-approved-audio-width)!important;height:var(--s05-approved-audio-height)!important;max-height:none!important;filter:brightness(.97) saturate(.96)!important}
 #contato.contact-mode-audio .voice-help{position:absolute!important;left:40px!important;right:68px!important;top:130px!important;width:auto!important;background:rgba(22,14,11,.85)!important;border:0!important;padding:0!important;font:400 11px/1.35 Arial,sans-serif!important;box-shadow:none!important}
 #contato.contact-mode-audio .phone-start-zone{position:absolute!important;left:40px!important;top:174px!important;width:var(--s05-approved-controls-width)!important;height:36px!important;min-height:36px!important;padding:3px!important;gap:5px!important}
 #contato.contact-mode-audio .phone-start-zone__play{width:17px!important;height:13px!important}
 #contato.contact-mode-audio .phone-start-zone__label{font-size:9px!important}
 #contato.contact-mode-audio .voice-panel{position:absolute!important;left:40px!important;top:218px!important;width:var(--s05-approved-controls-width)!important;height:auto!important;min-height:0!important;padding:6px!important;grid-template-rows:35px auto!important;background:rgba(36,24,18,.92)!important}
 #contato.contact-mode-audio .voice-live-display{display:grid!important;grid-template-columns:7px 1fr!important;grid-template-rows:15px 13px!important;gap:2px 3px!important;padding:0 0 5px!important}
 #contato.contact-mode-audio .voice-live-display strong{font-size:9px!important;white-space:nowrap!important}
 #contato.contact-mode-audio .voice-live-display small{font-size:7px!important;margin:0!important;grid-column:2!important}
 #contato.contact-mode-audio .voice-actions{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(5,36px)!important;gap:5px!important}
 #contato.contact-mode-audio .voice-action{height:36px!important;min-height:36px!important;justify-content:flex-start!important;padding:3px!important;gap:4px!important}
 #contato.contact-mode-audio .voice-action>span:last-child{font-size:9px!important;text-transform:none!important}
 #contato.contact-mode-audio .voice-action__icon{width:18px!important;height:18px!important;flex-basis:18px!important;font-size:12px!important}
}

@media(max-width:900px){
 #contato:is(.contact-mode-message,.contact-mode-audio) .contact-stage{overflow-y:auto!important;overflow-x:hidden!important}
 #contato:is(.contact-mode-message,.contact-mode-audio) .contact-artboard{min-height:640px!important}
}
