/* The header sizes to its content. Only the conversation/roster scroll. */
html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) {
  display: block;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 8px 12px;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-header-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: 6px 12px;
  min-height: 0;
  overflow: visible;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-header-left {
  flex: 1 1 240px;
  width: auto;
  margin: 0;
  padding: 4px;
  gap: 6px;
  min-height: 0;
  overflow: visible;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-chat-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  max-width: 100%;
  gap: 4px;
  margin: 0;
  padding: 4px;
  overflow: visible;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-chat-action-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: none;
  padding: 0;
  justify-content: center;
}

/* These controls already have independent, target-specific aria-label/title.
   The selected contact is displayed alongside them, so no duplicate name row. */
html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-chat-call-label {
  display: none;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-call-toolbar-status {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-call-toolbar-status-text {
  flex: 1 1 120px;
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-call-toolbar-check {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  margin: 0;
}

@media (max-width: 768px), (max-height: 600px) {
  html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-chat-contact {
    padding: 4px 6px;
    min-height: 44px;
    gap: 6px;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-header:not(.empty) .phonafrend-contact-name {
    font-size: 0.875rem !important;
    line-height: 1.2;
  }
}

html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-header::before,
html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-actions::before,
html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-header-left::before,
html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-header-left::after {
  content: none;
}

/* Short windows use a compact identity label and compose dock. The full name
   remains in the text node and the call control's independent accessible name. */
@media (max-height: 600px) {
  html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-header .phonafrend-contact-name {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-surface {
    padding: 4px 8px;
  }

  html[data-simphoni-browser-footer] .phonafrend-page .dm-panel-page .chat-compose-dock {
    padding: 4px;
    gap: 4px;
    margin-block: 0;
    min-height: 0;
  }

  html[data-simphoni-browser-footer] .phonafrend-page .dm-panel-page .compose-input-shell {
    padding: 4px;
    gap: 4px;
    min-height: 44px;
  }

  html[data-simphoni-browser-footer] .phonafrend-page .dm-panel-page .compose-input-shell .chat-input-row textarea {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 72px !important;
    padding: 8px !important;
  }

  html[data-simphoni-browser-footer] .phonafrend-page .dm-panel-page .compose-send-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Expanded diagnostics is the scrolling region; header controls stay in place. */
html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-scroll > .phonafrend-call-check {
  box-sizing: border-box;
  flex: 0 1 240px;
  min-height: 46px;
  max-height: 35%;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 4px 8px 0;
  padding: 0 6px;
}
html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-scroll:has(> .phonafrend-call-check) > .phonafrend-chat-surface {
  min-height: 160px;
}
html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-call-check button {
  min-height: 44px;
  flex-shrink: 0;
}
@media (max-height: 600px) {
  html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-scroll:has(> .phonafrend-call-check) > .phonafrend-chat-surface {
    min-height: 87px;
  }
  html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-scroll:has(> .phonafrend-call-check) .phonafrend-chat-header:not(.empty) {
    padding: 0 8px;
  }
  html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-scroll:has(> .phonafrend-call-check) .phonafrend-chat-header:not(.empty) :is(.phonafrend-header-left, .phonafrend-chat-actions, .phonafrend-call-toolbar-status) {
    padding: 0;
  }
  html[data-simphoni-browser-footer] .phonafrend-page:not(.phonafrend-placeholder-state) :is(.phonafrend-shell, .phonafrend-shell.mobile-view) .phonafrend-chat-scroll:has(> .phonafrend-call-check) .phonafrend-chat-header:not(.empty) .phonafrend-header-content {
    gap: 0 8px;
  }
  html[data-simphoni-browser-footer] .phonafrend-page .phonafrend-chat-scroll:has(> .phonafrend-call-check) .phonafrend-mobile-nav-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}