.sidebar .profile-button {
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.sidebar .profile-button > span:nth-child(2) {
  min-width: 0;
  flex: 1 1 0;
}
.sidebar .profile-button > svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  color: var(--muted);
}
.sidebar .profile-button strong {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.sidebar .profile-display-name {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.sidebar .profile-button small.profile-account-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}
.sidebar .profile-account-meta .plus-badge {
  margin-left: 0;
  padding: 3px 6px;
  font-size: 9px;
}
.plus-badge.admin-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #0b1029;
  border: 1px solid #929cdd40;
  box-shadow: inset 0 1px 0 #ffffff12;
  padding: 4px 7px;
  gap: 0;
  line-height: 1;
}
/* A small, decorative adaptation of the layered Voice glow:
   https://libraries.dev/voice — no microphone, audio graph or React runtime. */
.plus-badge.admin-badge::before,
.plus-badge.admin-badge::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition:
    opacity 450ms ease,
    filter 450ms ease;
}
.plus-badge.admin-badge::before {
  inset: -35% -48% -70%;
  background:
    radial-gradient(ellipse at 12% 88%, #35e9d6 0%, #35e9d600 39%),
    radial-gradient(ellipse at 38% 100%, #5496ff 0%, #5496ff00 43%),
    radial-gradient(ellipse at 62% 83%, #a674ff 0%, #a674ff00 42%),
    radial-gradient(ellipse at 88% 98%, #ff57b8 0%, #ff57b800 40%);
  filter: blur(3px);
  opacity: 0.78;
  transform-origin: 50% 90%;
  animation: admin-voice-flow 8.5s ease-in-out infinite alternate;
}
.plus-badge.admin-badge::after {
  inset: auto -12% -32%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 25%,
    #e2daffcc 0%,
    #8bd8ff88 20%,
    #ed6ee566 42%,
    #ed6ee500 72%
  );
  filter: blur(1px);
  opacity: 0.7;
  animation: admin-voice-ridge 6.5s ease-in-out infinite alternate;
}
@keyframes admin-voice-flow {
  0% {
    transform: translate3d(-7%, 5%, 0) scale(0.95, 0.93);
  }
  48% {
    transform: translate3d(2%, -3%, 0) scale(1.05, 1.04);
  }
  100% {
    transform: translate3d(7%, 2%, 0) scale(0.98, 1.08);
  }
}
@keyframes admin-voice-ridge {
  0% {
    transform: translate3d(-10%, 9%, 0) scaleX(0.86);
    opacity: 0.55;
  }
  100% {
    transform: translate3d(10%, -4%, 0) scaleX(1.08);
    opacity: 0.86;
  }
}
.admin-badge:hover::before,
.profile-button:hover .admin-badge::before,
.account-launch:hover .admin-badge::before {
  opacity: 1;
  filter: blur(3px) brightness(1.22);
}
.admin-badge .admin-wordmark {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px #080b25b3);
}
:root[data-theme='dark'] .plus-badge.admin-badge {
  color: #fff;
}
.portal-account-title .admin-badge .admin-wordmark {
  width: 54px;
}
.portal-account-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.account-offer > header {
  padding-bottom: 0;
  border-bottom: 0;
}
.account-offer-details {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.account-offer-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 0;
  list-style: none;
  color: var(--blue);
  font-size: 13px;
  cursor: pointer;
}
.account-offer-details > summary::-webkit-details-marker {
  display: none;
}
.account-offer-details > summary svg {
  width: 14px;
  height: 14px;
}
.account-offer-details[open] > summary {
  padding-bottom: 12px;
}
.portal-account-title .portal-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.portal-account-title .max-badge {
  color: #f1f5ff;
  background: #17213a;
  border: 1px solid #25314b;
  box-shadow: inset 0 1px 0 #ffffff14;
}
.support-panel > header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.support-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--blue-bg);
  color: var(--blue);
}
.support-panel header h2 {
  margin: 0 0 6px;
  font-size: 21px;
  letter-spacing: -0.03em;
}
.support-panel header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}
.conversation-new-form {
  display: grid;
  gap: 20px;
}
.conversation-panel label,
.support-ticket label {
  display: grid;
  gap: 8px;
  font-weight: 550;
  font-size: 14px;
}
.conversation-panel textarea,
.support-ticket textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 17px;
  resize: vertical;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}
.conversation-panel textarea:focus,
.support-ticket textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
  outline-offset: 2px;
  border-color: var(--blue);
}
.conversation-phone input {
  width: min(100%, 360px);
  box-sizing: border-box;
}
.conversation-phone small,
.support-send small {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
}
.support-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.support-kinds label {
  position: relative;
  cursor: pointer;
}
.support-kinds input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.support-kinds span {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition:
    background 0.2s,
    color 0.2s;
}
.support-kinds input:checked + span {
  background: var(--blue-bg);
  border-color: transparent;
  color: var(--blue);
}
.support-kinds input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.support-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.support-send .button,
.conversation-composer .button {
  padding: 12px 20px;
  min-height: 44px;
  flex-shrink: 0;
}
.conversation-thread {
  border: 1px solid var(--line);
  border-radius: 22px;
  margin-top: 14px;
  overflow: hidden;
}
.conversation-thread > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}
.conversation-thread > summary::-webkit-details-marker,
.conversation-new > summary::-webkit-details-marker {
  display: none;
}
.conversation-thread > summary > span:first-child:not(.avatar),
.support-ticket > summary > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.conversation-thread > summary strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.conversation-thread > summary small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 12px;
}
.conversation-thread > summary > svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.conversation-thread[open] > summary > svg {
  transform: rotate(180deg);
}
.conversation-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
}
.conversation-state i,
.conversation-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.conversation-state.is-waiting {
  color: #88600d;
  background: color-mix(in srgb, #ffce50 17%, var(--surface));
}
.conversation-state.is-answered {
  color: var(--blue);
  background: var(--blue-bg);
}
.conversation-state.is-closed {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 7%, var(--surface));
}
.conversation-thread-body {
  padding: 0 22px 20px;
}
.conversation-context {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 0 17px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.conversation-context svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--blue);
}
.conversation-context p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.conversation-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0 22px;
  max-height: 440px;
  overflow: auto;
  overscroll-behavior: contain;
}
.conversation-message {
  align-self: flex-start;
  width: fit-content;
  max-width: 85%;
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 5px;
  background: var(--surface);
  box-shadow: 0 2px 7px #18234204;
}
.conversation-message.is-own {
  align-self: flex-end;
  background: var(--blue-bg);
  border-color: transparent;
  border-radius: 18px 18px 5px 18px;
}
.conversation-message > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.conversation-message strong {
  font-size: 12px;
  font-weight: 600;
}
.conversation-message time {
  color: var(--muted);
  font-size: 11px;
}
.conversation-message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
.conversation-composer {
  display: grid;
  gap: 10px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.conversation-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.conversation-composer-actions small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  max-width: 42ch;
}
.conversation-composer [role='status']:empty,
.conversation-new-form [role='status']:empty {
  display: none;
}
.conversation-new {
  margin-top: 20px;
}
.conversation-new > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 550;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 0;
}
.conversation-new > summary svg {
  width: 17px;
}
.conversation-new form {
  margin-top: 14px;
}
.conversation-live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 11px;
}
.conversation-live i {
  color: #159b72;
}
.support-inbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.support-inbox-heading h2 {
  margin: 0 0 6px;
}
.support-inbox-heading p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.support-ticket .avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 12px;
}
.conversation-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 4px 0 18px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.conversation-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
}
.conversation-contact a svg {
  width: 14px;
}
.conversation-contact .button {
  padding: 8px 10px;
  min-height: 36px;
  margin-left: auto;
  font-size: 12px;
}
.conversation-close {
  margin-top: 14px;
  padding: 9px 12px;
  min-height: 38px;
  font-size: 12px;
  color: var(--muted);
}
.conversation-closed-note {
  font-size: 13px;
  color: var(--muted);
}
.conversation-composer label.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .portal-account-title {
    gap: 9px;
  }
  .portal-account-title .portal-tier {
    font-size: 12px;
    padding: 5px 9px;
  }
  .support-panel > header {
    gap: 12px;
  }
  .support-panel header h2 {
    font-size: 19px;
  }
  .support-symbol {
    width: 37px;
    height: 37px;
    border-radius: 12px;
  }
  .conversation-thread > summary {
    gap: 9px;
    flex-wrap: wrap;
    padding: 16px;
  }
  .conversation-state {
    font-size: 11px;
    white-space: normal;
  }
  .conversation-thread-body {
    padding: 0 14px 16px;
  }
  .conversation-message {
    max-width: 94%;
    padding: 12px 14px;
  }
  .conversation-message p {
    font-size: 14px;
  }
  .conversation-composer-actions {
    align-items: flex-end;
  }
  .conversation-composer-actions .button {
    padding: 11px 14px;
  }
  .support-send {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .support-ticket > summary > .avatar {
    display: none;
  }
}
.portal-documents-link {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.portal-documents-link:hover,
.portal-documents-link:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 5px 20px rgb(0 80 180 / 7%);
}
.portal-documents-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--blue);
  background: rgb(0 112 255 / 7%);
}
.portal-documents-link strong { display: block; font-size: 16px; font-weight: 600; }
.portal-documents-link small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.portal-documents-arrow { margin-left: auto; color: var(--muted); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .portal-documents-link { transition: none; }
  .plus-badge.admin-badge::before,
  .plus-badge.admin-badge::after {
    animation: none;
    transition: none;
    transform: none;
  }
  .support-kinds span,
  .conversation-thread > summary > svg {
    transition: none;
  }
}