/* Inbox shortcut lives beside the profile, including compact phone headers. */
@media (min-width: 681px) {
  .topbar {
    display: grid;
    grid-template-columns: clamp(140px, 14vw, 200px) minmax(0, 1fr) auto;
    column-gap: clamp(12px, 1.5vw, 24px);
    padding-inline: clamp(16px, 2.5vw, 40px);
  }
  .topbar .brand { width: 100%; min-width: 0; height: 64px; }
  .topbar .brand .brand-logo { width: 100%; transform: none; }
  .topbar .main-nav { min-width: 0; justify-content: center; gap: clamp(8px, 1vw, 16px); }
  .topbar .nav-link { min-width: 0; gap: 6px; white-space: nowrap; }
  .topbar .top-actions { min-width: 0; gap: 6px; margin-left: 0; }
  .topbar #profileBtn { justify-content: center; width: 42px; height: 42px; min-height: 42px; padding: 5px; gap: 0; }
  .topbar #profileBtn > span:not(.avatar) { display: none; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 46px 34px; height: auto; min-height: 88px; gap: 0 12px; padding: 4px 16px; }
  .topbar .brand { grid-column: 1; grid-row: 1; width: 140px; height: 46px; }
  .topbar .top-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .topbar .main-nav { grid-column: 1/-1; grid-row: 2; width: 100%; height: 34px; justify-content: space-around; }
  .topbar .nav-link { justify-content: center; min-height: 34px; }
}
@media (min-width: 1101px) and (max-width: 1250px), (min-width: 681px) and (max-width: 820px) {
  .topbar .nav-title { display: none; }
}
.topbar #chatBtn.header-chat-trigger {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid #bc8bcc59;
  border-radius: 12px;
  background: linear-gradient(145deg, #42304e, #221b2c);
  box-shadow: inset 0 1px 0 #ffffff24, 0 3px 0 #100c18, 0 4px 12px #0003;
  color: #f6f1ff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.header-chat-trigger .chat-pixel-icon {
  display: block;
  width: 29px;
  height: 29px;
  flex: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 #100c1866);
}
.topbar #chatBtn.header-chat-trigger:hover {
  border-color: #f18cdd;
  background: #4d315a;
  transform: translateY(-1px);
}
.topbar #chatBtn.header-chat-trigger:active { transform: translateY(1px); }
.topbar #chatBtn.header-chat-trigger:focus-visible {
  outline: 3px solid #95e8dc;
  outline-offset: 3px;
}
.topbar #chatBtn.header-chat-trigger[aria-expanded="true"] { border-color: #95e8dc; }

@media (max-width: 680px) {
  .topbar .top-actions { flex-wrap: nowrap; justify-self: end; }
  .topbar .brand .brand-logo { transform: none; }
  .topbar #chatBtn.header-chat-trigger {
    flex-basis: 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 10px;
  }
  .header-chat-trigger .chat-pixel-icon { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
  .topbar .brand, .topbar .brand .brand-logo { width: 64px !important; flex-basis: 64px !important; }
  .topbar .top-actions { gap: 2px; }
  .topbar .top-actions #myTicketsBtn { flex-basis: 34px; }
  .topbar #chatBtn.header-chat-trigger { flex-basis: 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
}

/* Follow the visible phone viewport when its keyboard opens. */
@media (max-width: 720px) {
  #chatPanel.chat-panel {
    inset: var(--chat-viewport-top, 0px) auto auto var(--chat-viewport-left, 0px);
    width: var(--chat-viewport-width, 100%);
    height: var(--chat-viewport-height, 100dvh);
    grid-template-rows: calc(74px + env(safe-area-inset-top, 0px)) 106px minmax(0, 1fr);
    overscroll-behavior: contain;
  }
  #chatPanel .chat-head { gap: 10px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  #chatPanel .chat-page-title { min-width: 0; }
  #chatPanel #chatClose { flex: none; white-space: nowrap; }
  #chatPanel #peopleSearch, #chatPanel #chatText { font-size: 16px; }
  #chatPanel .chat-thread-messages, #chatPanel #conversationList { overscroll-behavior: contain; }
}