/* Allow the introduction to use its existing grid column's available space. */
body.api-refresh .xixi-lede { max-width: none; text-wrap: pretty; }

/* Match mobile search filters to the approved white fields and light green controls. */
.search-panel .mobile-select-button {
  min-height: 44px; padding: 0 12px; border: 1px solid #dce5de; border-radius: 11px;
  background: #fff; color: #426052; font-size: 14px; font-weight: 500;
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.search-panel .mobile-select-button::after {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px; margin: -3px 3px 0 12px;
  border-right: 1.5px solid #738e7d; border-bottom: 1.5px solid #738e7d; transform: rotate(45deg);
}
.search-panel .mobile-select-button:is(:focus-visible, [aria-expanded="true"]) {
  outline: none; border-color: #5a9c7d; box-shadow: 0 3px 9px #43745724;
}
.mobile-select-sheet { border: 1px solid #dce4d6; border-radius: 20px; background: #f5f7ef; box-shadow: 0 16px 48px #314e3d24; }
.mobile-select-header { padding: 16px; border-bottom: 1px solid #e0e7dc; }
.mobile-select-header strong { color: #426052; font-size: 15px; font-weight: 600; }
.mobile-select-header button {
  min-height: 40px; padding: 8px 14px; border: 1px solid #caddd0; border-radius: 12px;
  background: linear-gradient(155deg, #f5fcf7ed, #d8eddfed); color: #42684f;
  box-shadow: inset 0 1px 0 #ffffffde, 0 3px 9px #43745712; font-size: 13px; font-weight: 600;
}
.mobile-select-options { gap: 6px; padding: 10px; max-height: calc(min(72vh, 560px) - 74px); }
.mobile-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px;
  border: 1px solid transparent; border-radius: 12px; padding: 11px 13px;
  color: #526b5b; background: transparent; font-size: 14px; font-weight: 500; line-height: 1.5;
}
.mobile-select-option.is-selected {
  border-color: #caddd0; color: #42684f; background: linear-gradient(155deg, #f5fcf7ed, #d8eddfed);
  box-shadow: inset 0 1px 0 #ffffffde, 0 3px 9px #43745712; font-weight: 600;
}
.mobile-select-option.is-selected::after { content: "✓"; flex: 0 0 auto; color: #5a9377; }
.mobile-select-option:not(.is-selected):hover { background: #eaf2e9; }
.mobile-select-option:focus-visible, .mobile-select-header button:focus-visible {
  outline: none; border-color: #5a9c7d; box-shadow: 0 3px 9px #43745724;
}
@media (prefers-reduced-motion: reduce) { .search-panel .mobile-select-button { transition: none; } }

.mobile-profile-link .mobile-user-avatar { display: none; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mobile-profile-link.has-avatar { overflow: hidden; background: #e4efe6; border-color: #caddd0; box-shadow: 0 3px 9px #43745712; }
.mobile-profile-link.has-avatar .mobile-user-avatar { display: block; }
.mobile-profile-link.has-avatar .mobile-avatar-fallback { display: none; }
.mobile-card .badge {
  padding: 2px 6px; border: 1px solid #ffffffb3; border-radius: 7px; background: #f3faf0c7;
  color: #42684f; font-size: 10px; font-weight: 600; line-height: 1.4;
  backdrop-filter: blur(8px); box-shadow: 0 1px 4px #314e3d0d;
}
body .prompt-actions #copyPrompt, body.detail-page.is-mobile .detail-prompt-actions #copyPrompt {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 9px 13px; border: 1px solid #caddd0; border-radius: 12px;
  background: linear-gradient(155deg, #f5fcf7ed, #d8eddfed); color: #42684f;
  box-shadow: inset 0 1px 0 #ffffffde, 0 3px 9px #43745712; font-size: 13px; font-weight: 600; line-height: 1.5;
}
body .prompt-actions #copyPrompt::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .prompt-actions #copyPrompt:is(:hover, :focus-visible) { outline: none; border-color: #5a9c7d; box-shadow: inset 0 1px 0 #ffffffde, 0 3px 9px #43745724; }