/* Use the existing 42px gap below the header without changing any layout boxes. */
.character-trigger { position: absolute; z-index: 80; top: -36px; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 132px; max-width: 100%; height: 30px; padding: 0 10px; border: 1px solid #d4dce7; border-radius: 9px; background: #fff; color: #58616d; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
#characterButtonLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-trigger svg { flex: 0 0 8px; width: 8px; height: 5px; }
.character-trigger.has-character { color: var(--brand); background: #f6f7ff; border-color: #c8d0ed; }
.character-trigger:hover { border-color: var(--brand); }
.character-trigger:focus-visible, .character-dialog button:focus-visible, .character-dialog input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.collection-companion { position: fixed; z-index: 70; display: block; width: 344px; aspect-ratio: 1159 / 1358; margin: 0; padding: 0; border: 0; border-radius: 22px; background: transparent; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.collection-companion[hidden] { display: none !important; }
.collection-companion:focus-visible { outline: 2px dashed #7c8bca; outline-offset: 5px; }
.companion-art { display: block; width: 100%; height: 100%; transform-origin: 50% 60%; animation: companion-float 6s ease-in-out infinite; filter: drop-shadow(0 9px 9px rgb(48 62 91 / 15%)); pointer-events: none; }
.companion-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.collection-companion.is-dragging { cursor: grabbing; }
.collection-companion.is-dragging .companion-art, .collection-companion.is-paused .companion-art { animation-play-state: paused; }
.collection-companion.is-dragging .companion-art { filter: drop-shadow(0 13px 12px rgb(48 62 91 / 22%)); }
@keyframes companion-float { 0%, 100% { transform: translateY(3px) rotate(-.35deg); } 50% { transform: translateY(-5px) rotate(.35deg); } }
.character-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow: hidden; border: 1px solid #dce3ed; border-radius: 20px; background: #fff; color: #344053; box-shadow: 0 22px 80px rgb(32 48 72 / 18%); }
.character-dialog[open] { display: flex; flex-direction: column; gap: 18px; }
.character-dialog::backdrop { background: rgb(28 40 63 / 28%); backdrop-filter: blur(3px); }
.character-heading { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }
.character-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f3f5f9; color: #7c8795; font-size: 22px; cursor: pointer; }
.character-search { flex: 0 0 auto; width: 100%; min-height: 36px; padding: 8px 11px; border: 1px solid #dce3ed; border-radius: 9px; background: #fafbfc; color: #4a5567; font: inherit; font-size: 12px; }
.character-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px; min-height: 0; max-height: min(360px, 46dvh); padding: 3px; margin: -3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.character-option { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 7px 12px; border: 1px solid #e3e7ee; border-radius: 13px; background: #fafbfc; color: #4a5567; font: inherit; cursor: pointer; }
.character-option[hidden], .character-search[hidden], .character-empty[hidden] { display: none !important; }
.character-option[aria-pressed="true"] { border-color: #899bde; background: #f3f5ff; box-shadow: inset 0 0 0 1px #899bde; }
.character-option strong { max-width: 100%; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.character-option small { max-width: 100%; color: #8690a0; font-size: 10px; overflow-wrap: anywhere; }
.character-preview, .character-none-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 94px; margin-bottom: 4px; }
.character-preview img { max-width: 100%; width: auto; height: 100%; object-fit: contain; }
.character-none-art { color: #bdc5d1; font-size: 34px; font-weight: 300; }
.character-empty { grid-column: 1 / -1; margin: 8px; color: #8690a0; font-size: 12px; text-align: center; }
@media (max-width: 380px) { .character-dialog { padding: 20px; } .character-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 450px) { .character-dialog { padding: 14px 20px; } .character-dialog[open] { gap: 10px; } }
/* Extremely short windows/onscreen keyboards need one reachable scroll surface. */
@media (max-height: 340px) {
  .character-dialog { overflow-y: auto; }
  .character-dialog[open] { display: block; }
  .character-heading, .character-search:not([hidden]) { margin-bottom: 12px; }
  .character-options { max-height: none; overflow: visible; margin-bottom: 12px; }
}
@media (max-width: 780px) {
  .character-trigger { top: -37px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .companion-art { animation: none !important; } }