.jhzzz-coachmark-anchor { position: relative !important; }
.jhzzz-coachmark { box-sizing: border-box; position: absolute; z-index: 2147482000; width: 330px; padding: 18px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 10px; background: var(--semi-color-bg-0, #fff); color: var(--semi-color-text-0, #1f2329); box-shadow: 0 16px 42px rgb(15 23 42 / 22%); text-align: left; animation: jhzzz-coachmark-in .16s ease-out; }
.jhzzz-coachmark-bottom { top: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
.jhzzz-coachmark-bottom-center { top: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
.jhzzz-coachmark-bottom-left { top: calc(100% + 14px); left: 0; }
.jhzzz-coachmark-bottom-right { top: calc(100% + 14px); right: 0; }
.jhzzz-coachmark-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--semi-color-text-2, #8f959e); cursor: pointer; font-size: 20px; line-height: 20px; }
.jhzzz-coachmark-title { padding-right: 20px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.jhzzz-coachmark-description { margin-top: 8px; color: var(--semi-color-text-2, #646a73); font-size: 13px; line-height: 1.7; }
.jhzzz-coachmark-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }
.jhzzz-coachmark-actions button { min-height: 28px; padding: 4px 12px; border-radius: 7px; cursor: pointer; font: inherit; }
.jhzzz-coachmark-actions [data-jhzzz-tip-permanent] { border: 0; background: transparent; color: var(--semi-color-text-0, #1f2329); }
@keyframes jhzzz-coachmark-in { from { opacity: 0; transform: translateY(-4px) translateX(-50%); } to { opacity: 1; transform: translateY(0) translateX(-50%); } }
.jhzzz-coachmark-bottom-left { animation-name: jhzzz-coachmark-in-left; }
.jhzzz-coachmark-bottom-right { animation-name: jhzzz-coachmark-in-right; }
@keyframes jhzzz-coachmark-in-left { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jhzzz-coachmark-in-right { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.jhzzz-token-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; padding: 6px 0; }
.jhzzz-token-summary-item { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 9px; border: 1px solid var(--semi-color-border, #e5e6eb); background: var(--semi-color-bg-0, #fff); color: var(--semi-color-text-2, #646a73); font-size: 12px; white-space: nowrap; }
.jhzzz-token-summary-value { color: var(--semi-color-text-0, #1f2329); font-weight: 650; }
.jhzzz-token-summary-extra { color: var(--semi-color-text-2, #8f959e); }
.jhzzz-token-endpoint-copy { padding: 0 4px; border: 0; background: transparent; color: var(--semi-color-primary, #2563eb); cursor: pointer; font: inherit; }
.jhzzz-token-group-overlay { position: fixed; z-index: 2147482500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(15 23 42 / 35%); }
.jhzzz-token-group-modal { box-sizing: border-box; width: min(440px, calc(100vw - 40px)); padding: 20px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 12px; background: var(--semi-color-bg-0, #fff); color: var(--semi-color-text-0, #1f2329); box-shadow: 0 24px 64px rgb(15 23 42 / 24%); }
.jhzzz-token-group-modal header, .jhzzz-token-group-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jhzzz-token-group-modal header strong { font-size: 17px; }
.jhzzz-token-group-modal header button { border: 0; background: transparent; color: var(--semi-color-text-2, #8f959e); cursor: pointer; font-size: 22px; }
.jhzzz-token-group-modal label { display: grid; gap: 7px; color: var(--semi-color-text-1, #4b535d); font-size: 13px; }
.jhzzz-token-group-picker { position: relative; }
.jhzzz-token-group-trigger { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 42px; gap: 8px; padding: 0 12px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 8px; background: var(--semi-color-bg-0, #fff); color: var(--semi-color-text-0, #1f2329); cursor: pointer; font: inherit; text-align: left; }
.jhzzz-token-group-trigger:focus-visible { outline: 2px solid rgb(37 99 235 / 28%); outline-offset: 1px; }
.jhzzz-token-group-selected-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.jhzzz-token-group-selected-ratio { color: var(--semi-color-text-2, #646a73); font-size: 12px; white-space: nowrap; }
.jhzzz-token-group-chevron { margin-left: auto; color: var(--semi-color-text-2, #8f959e); font-size: 17px; line-height: 1; }
.jhzzz-token-group-menu { position: absolute; z-index: 2; top: calc(100% + 3px); right: 0; left: 0; max-height: 280px; overflow: auto; padding: 4px 0; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 9px; background: var(--semi-color-bg-0, #fff); box-shadow: 0 10px 28px rgb(15 23 42 / 18%); }
.jhzzz-token-group-option { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; gap: 12px; padding: 10px 14px; border: 0; background: transparent; color: var(--semi-color-text-0, #1f2329); cursor: pointer; font: inherit; text-align: left; }
.jhzzz-token-group-option:hover, .jhzzz-token-group-option[aria-selected="true"] { background: var(--semi-color-fill-0, #f1f2f4); }
.jhzzz-token-group-option-copy { display: grid; min-width: 0; gap: 4px; }
.jhzzz-token-group-option-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.jhzzz-token-group-option-copy small { overflow: hidden; color: var(--semi-color-text-2, #646a73); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.4; }
.jhzzz-token-group-ratio { min-width: max-content; padding: 5px 8px; border-radius: 4px; background: #dbeafe; color: #1d4ed8; font-size: 12px; white-space: nowrap; }
.jhzzz-token-group-modal select[hidden] { display: none; }
.jhzzz-token-group-modal footer { justify-content: flex-end; margin-top: 20px; }
.jhzzz-token-group-modal footer button { min-height: 32px; padding: 5px 14px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 7px; background: var(--semi-color-bg-0, #fff); color: inherit; cursor: pointer; font: inherit; }
.jhzzz-token-group-modal footer .primary { border-color: var(--semi-color-primary, #2563eb); background: var(--semi-color-primary, #2563eb); color: #fff; }
@media (max-width: 700px) { .jhzzz-coachmark { width: min(320px, calc(100vw - 32px)); } .jhzzz-coachmark-bottom-right, .jhzzz-coachmark-bottom-left { left: 0; right: auto; } .jhzzz-token-summary { width: 100%; margin-right: 0; } .jhzzz-token-summary-item { flex: 1 1 calc(50% - 8px); justify-content: space-between; overflow: visible; white-space: normal; min-width: 0; } }

/* r52: keep endpoint text and the copy control visible on narrow screens. */
.jhzzz-token-summary-item { min-width: 0; }
.jhzzz-token-summary-value { min-width: 0; }
.jhzzz-token-endpoint-item { flex: 1 1 min(100%, 480px); min-width: 0; white-space: normal; }
.jhzzz-token-endpoint-item .jhzzz-token-summary-value { flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; }
.jhzzz-token-endpoint-copy { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767px) {
  .jhzzz-token-summary-item { overflow: visible; white-space: normal; }
  .jhzzz-token-endpoint-item { flex-basis: 100%; align-items: flex-start; }
}

/* r58: keep the desktop endpoint and its copy control compact. This file is
   loaded after native-coachmarks.css, so the final desktop rule belongs here. */
@media (min-width: 768px) {
  .jhzzz-token-endpoint-item {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .jhzzz-token-endpoint-item .jhzzz-token-summary-value {
    flex: 0 1 auto !important;
  }
}