/* Final, narrowly scoped control alignment. The phone shell already reserves
   status/home regions in mobile-chrome.css; these footers add no second inset. */
#messageForm {
  border-top: 0;
  box-shadow: none;
}
#messageForm > p { display: none; }
#messageForm #sendButton {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #181818;
  color: #ffffff;
  line-height: 1;
  transform: none;
  transition: background-color .18s;
}
#messageForm #sendButton:not(:disabled):hover { background: #333333; }
#messageForm #sendButton > .ui-icon {
  position: relative;
  top: 1px;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  fill: currentColor;
  transform: none;
}

/* Main footer actions only. Composer sends, floating map controls, list
   buttons and the profile's small inline actions keep their own dimensions. */
#personaConfirm,
.route-guide .guide-bottom > .guide-primary,
.route-guide .guide-subpage-actions > .guide-primary,
.route-guide .guide-page-actions > .guide-primary,
.pe-footer > .pe-submit,
.pc-photo-editor .pc-primary.pc-wide,
.modal form > .modal-action[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid #181818;
  border-radius: 999px;
  background: #181818;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}
#personaConfirm:not(:disabled):hover,
.route-guide .guide-bottom > .guide-primary:not(:disabled):hover,
.route-guide .guide-subpage-actions > .guide-primary:not(:disabled):hover,
.route-guide .guide-page-actions > .guide-primary:not(:disabled):hover,
.pe-footer > .pe-submit:not(:disabled):hover,
.pc-photo-editor .pc-primary.pc-wide:not(:disabled):hover,
.modal form > .modal-action[type="submit"]:not(:disabled):hover {
  border-color: #333333;
  background: #333333;
}
.route-guide .guide-subpage-actions > .guide-secondary,
.route-guide .guide-page-actions > .guide-secondary {
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

@media (max-width: 680px) {
  #messageForm { padding: 12px 20px; }

  /* Persona-page already supplies the shared20px horizontal gutter. Notes
     precede the last action so every main footer ends12px above its pane. */
  .persona-overlay .persona-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 12px 0;
  }
  .persona-overlay .persona-footer > small {
    order: -1;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }
  .route-guide .guide-bottom {
    min-height: 0;
    padding: 12px 20px;
  }
  .route-guide .guide-bottom > p { order: -1; }
  .route-guide .guide-subpage-actions,
  .route-guide .guide-page-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 12px 20px;
  }
  .route-guide .guide-subpage-actions > button,
  .route-guide .guide-page-actions > button { flex: none; width: 100%; max-width: none; min-width: 0; }
  .route-guide .guide-subpage-actions > .guide-primary,
  .route-guide .guide-page-actions > .guide-primary { order: 1; }

  /* Keep the profile editor scrollable on short screens. On a taller pane,
     its existing form can place the final save at the same bottom baseline. */
  #profileContent:has(> .pe-editor) { padding-bottom: 0; }
  .pe-editor { display: flex; flex-direction: column; min-height: 100%; }
  .pe-editor > .pe-form { display: flex; flex-direction: column; flex: 1; }
  .pe-editor .pe-footer { margin-top: auto; padding: 24px 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #messageForm #sendButton { transition: none; }
}