/* Every rule is scoped to elements created only when the native annotation API exists. */
.nka-target { position: relative; }
.nka-shell { min-width: 0; display: grid; }
.nka-shell > a, .nka-shell > button { height: 100%; }
.nka-hint { position: absolute; top: 10px; right: 10px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.nka-target:hover > .nka-hint, .nka-target:focus-within > .nka-hint, .nka-target.nka-open > .nka-hint, .nka-hint:focus-within { opacity: 1; pointer-events: auto; }
.nka-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 54px; min-height: 32px; padding: 5px 12px; border: 1px solid #c8d8eb; border-radius: 999px; background: #fff; color: #265d94; font: 600 12px/1.3 var(--font-ui, sans-serif); box-shadow: 0 3px 12px #183a6814; cursor: pointer; }
.nka-trigger::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4a91d5; }
.nka-trigger::after { content: 'Ask'; }
.nka-trigger:hover { background: #f3f8ff; border-color: #7ea9d4; }
.nka-trigger:focus-visible, .nka-panel button:focus-visible { outline: 2px solid #2379d2; outline-offset: 3px; }
.nka-inline { position: static; opacity: 1; pointer-events: auto; width: max-content; margin: -6px 0 18px; }
.nka-inline .nka-trigger { box-shadow: none; background: transparent; border-color: #d6e0ea; }
.nka-open { outline: 1px solid #8fb9e1; outline-offset: 3px; }
.nka-target.product-card.nka-open { outline-offset: 1px; }
.nka-target.accordion-content { padding-right: 76px; min-height: 55px; }
.info-card.nka-target > h2, .skill-card.nka-target > strong, .support-card.nka-target > h2, .nka-shell > .support-card > h2 { padding-right: 68px; min-height: 34px; }
.prose-card.nka-target, .data-card.nka-target { padding-right: 90px; }
.nka-target.summary-card > .nka-hint { top: 12px; }
.cart-line.nka-target > .nka-hint { top: auto; bottom: 12px; }
.order-row.nka-target > .nka-hint { top: auto; bottom: 6px; right: 90px; }
h2.nka-target, h1.nka-target { padding-right: 72px; }
h2.nka-target > .nka-hint, h1.nka-target > .nka-hint { top: 0; right: 0; }
.nka-panel { position: fixed; inset: auto; margin: 0; z-index: 160; width: 296px; max-width: calc(100vw - 24px); padding: 0; border: 1px solid #d7e1ec; border-radius: 14px; background: #fff; color: #233247; box-shadow: 0 14px 44px #17314d26, 0 2px 8px #17314d0a; overflow: auto; font-family: var(--font-ui, sans-serif); text-align: left; }
.nka-panel[hidden] { display: none !important; }
.nka-panel::backdrop { background: transparent; }
.nka-panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 15px 12px 10px 16px; }
.nka-panel-heading { min-width: 0; }
.nka-eyebrow { display: block; font-size: 10px; line-height: 1.5; color: #65758a; letter-spacing: .03em; }
.nka-panel .nka-panel-title { margin: 3px 0 0; font: 600 14px/1.4 var(--font-ui, sans-serif); color: #24364d; letter-spacing: 0; overflow-wrap: anywhere; }
.nka-close { flex: 0 0 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; color: #63748a; font: 22px/1 sans-serif; cursor: pointer; }
.nka-close:hover { background: #f0f4f9; }
.nka-suggestions { padding: 0 7px; }
.nka-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 11px 10px; border: 0; border-radius: 7px; background: transparent; color: #263f5b; font: 500 13px/1.4 var(--font-ui, sans-serif); text-align: left; cursor: pointer; }
.nka-suggestion:hover, .nka-suggestion:focus-visible { background: #f0f6fc; }
.nka-arrow { color: #718da9; font-size: 13px; }
.nka-custom { display: block; margin: 3px 7px 7px; padding: 9px 10px; min-height: 40px; background: transparent; border: 0; border-radius: 7px; color: #596d85; font: 12px/1.4 var(--font-ui, sans-serif); cursor: pointer; text-align: left; }
.nka-custom:hover { background: #f5f8fb; }
.nka-panel .nka-note { margin: 0; padding: 12px 16px; border-top: 1px solid #e9eef4; color: #67778a; font-size: 11px; line-height: 1.5; }
.nka-panel .nka-error { margin: 0; padding: 12px 16px; color: #9a3c25; background: #fff6f1; font-size: 12px; line-height: 1.5; }
@media (hover: none), (pointer: coarse) { .nka-hint { opacity: 1; pointer-events: auto; } .nka-trigger { min-height: 44px; min-width: 60px; } .nka-close { height: 44px; flex-basis: 44px; } }
@media (prefers-reduced-motion: reduce) { .nka-hint { transition: none; } }
@media (forced-colors: active) { .nka-trigger, .nka-panel { border: 1px solid ButtonText; } .nka-open { outline-color: Highlight; } }
