/* Support — one thread where Gliim P.A. and the Gliimu team take turns.
   The page fills the view-container directly; no card wrapper. */

/* When support is embedded inside the Ping chat window */
.support-in-ping {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
.support-in-ping .support-page-layout {
  min-height: 100%;
  margin: 0;
  height: 100%;
}

/* The chat header is sticky at the viewport top, so it owns the status-bar
   inset itself; the margin cancels the container padding, which --pad-top/--pad-x
   measure so the two stay in step. */
.support-page-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
  margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x));
  padding: 0;
}

.support-page-layout .ping-chat-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: var(--safe-top);
  flex-shrink: 0;
}

.support-page-layout .ping-messages {
  flex: 1;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sup-bottom {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.sup-modes {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 0;
  background: var(--surface);
  flex-shrink: 0;
}
.sup-mode {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sup-mode:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.sup-mode.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.sup-mode:disabled { opacity: 0.45; cursor: not-allowed; }

.sup-hold {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  background: var(--brand-primary-light);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.sup-note {
  align-self: center;
  max-width: 460px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  margin: 4px 0;
}

.sup-fb-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-right: 4px; }

@media (max-width: 768px) {
  .support-page-layout {
    min-height: calc(100dvh - 64px);
    margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x));
  }
  .support-page-layout .ping-messages { padding: 16px; }
  .sup-modes { padding: 10px 16px 0; flex-wrap: wrap; }
  .sup-hold { margin-left: 0; order: 3; width: 100%; justify-content: center; }
  .sup-bottom .ping-input-area {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}