:root {
     --msx-bg: #ffffff;
     --msx-panel-bg: #f8f8fa;
     --msx-border: #eeecf1;
     --msx-text: #222;
     --msx-muted: #666;
     --msx-shadow: 0 12px 34px rgba(17, 24, 39, 0.14);
     --msx-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.06);
     --msx-accent: var(--secondary-color, #2563eb);
     --msx-accent-ring: rgba(37, 99, 235, 0.2);
     --msx-accent-border: #dfdce6;
     --msx-accent-text: #5f5b6b;
 }

 /* body scroll lock (JS usa position:fixed) */
 body.msx-no-scroll {
     overflow: hidden;
 }

 /* ---------- Inline pill (substitui <sup>) ---------- */
 .msx-inline-pill {
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
     padding: 4px 10px;
     border-radius: 5px;
     background: #fff;
     border: 1px solid #e5e5e5;
     box-shadow: var(--msx-shadow-soft);
     font-family: "Ubuntu Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     font-size: 11px;
     font-weight: 700;
     color: #555;
     cursor: pointer;
     user-select: none;
     line-height: 1.3;
     vertical-align: middle;
     transform: translateY(-1px);
     margin-left: 6px;
     /* evita grudar no texto */
     -webkit-tap-highlight-color: transparent;
 }

 .msx-inline-pill:hover {
     transform: translateY(-1px);
     border-color: var(--msx-accent);
 }

 .msx-inline-pill:active {
     transform: translateY(-1px);
 }

 .msx-inline-pill:focus {
     outline: 2px solid var(--msx-accent);
     outline-offset: 2px;
 }

 .msx-inline-pill:focus:not(:focus-visible) {
     outline: none;
 }

 .msx-inline-pill__dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: var(--msx-accent);
     box-shadow: none;
     margin-right: 8px;
     /* sem "gap" */
     flex: 0 0 auto;
 }

 /* Top pills ficam clicáveis/hoveráveis */
 .thread-source-pill[data-msx-refs] {
     cursor: pointer !important;
 }

 /* ---------- Modal: Ver Tudo ---------- */
 .msx-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2147483647;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 16px;
     font-family: "Ubuntu Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }

 .msx-modal.is-open {
     display: flex;
 }

 .msx-modal__backdrop {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, .26);
 }

 .msx-modal__dialog {
     position: relative;
     width: 100%;
     max-width: 780px;
     max-height: 82vh;
     border-radius: 12px;
     border: 1px solid var(--msx-border);
     background: var(--msx-bg);
     box-shadow: var(--msx-shadow);
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .msx-modal__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 14px;
     border-bottom: 1px solid var(--msx-border);
     background: var(--msx-panel-bg);
 }

 .msx-modal__title {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 700;
     color: var(--msx-text);
     min-width: 0;
 }

 .msx-modal__title-text {
     font-size: 16px;
     font-weight: 700;
     line-height: 1;
     color: #2f2b3a;
 }

 .msx-modal__title-count {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 28px;
     height: 22px;
     padding: 0 8px;
     border-radius: 6px;
     border: 1px solid #d7d7dc;
     background: #f2f2f4;
     color: #4f4f58;
     font-size: 12px;
     font-weight: 800;
     line-height: 1;
 }

 .msx-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 20px;
     height: 20px;
     padding: 0 6px;
     border-radius: 999px;
     border: 1px solid var(--msx-accent);
     background: var(--msx-accent);
     font-size: 10px;
     font-weight: 700;
     color: #fff;
     user-select: none;
 }

 .msx-iconbtn {
     width: 32px;
     height: 32px;
     border-radius: 999px;
     border: 1px solid #dfdce6;
     background: #fff;
     color: #5f5b6b;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     user-select: none;
     transition: border-color .2s, color .2s, background .2s;
     -webkit-tap-highlight-color: transparent;
 }

 .msx-iconbtn:hover {
     border-color: var(--msx-accent);
     color: var(--msx-accent);
     background: #f9ffff;
 }

 .msx-iconbtn:focus {
     outline: 2px solid var(--msx-accent);
     outline-offset: 2px;
 }

 .msx-iconbtn:focus:not(:focus-visible) {
     outline: none;
 }

 .msx-modal__tools {
     display: flex;
     align-items: center;
     padding: 12px 14px;
     border-bottom: 1px solid var(--msx-border);
     background: var(--msx-panel-bg);
 }

 .msx-input {
     width: 100%;
     border-radius: 8px;
     border: 1px solid #e5e5e5;
     background: #fff;
     padding: 10px 12px;
     font-size: 13px;
     font-weight: 700;
     color: #555;
     outline: none;
     margin-right: 10px;
     /* sem "gap" */
 }

 .msx-select {
     width: 220px;
     max-width: 220px;
     border-radius: 8px;
     border: 1px solid #e5e5e5;
     background: #fff;
     padding: 10px 12px;
     font-size: 13px;
     font-weight: 700;
     color: #555;
     outline: none;
 }

 .msx-input:focus,
 .msx-select:focus {
     border-color: var(--msx-accent);
     box-shadow: 0 0 0 2px var(--msx-accent-ring);
 }

 .msx-modal__body {
     padding: 12px 14px 14px;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     /* iOS */
 }

 .msx-empty {
     padding: 14px;
     border-radius: 8px;
     border: 1px dashed #dfdce6;
     background: #f8f8fa;
     color: #666;
     font-weight: 800;
     font-size: 13px;
 }

 /* ---------- Shared source item ---------- */
 .msx-source-list {
     display: grid;
     grid-row-gap: 10px;
     /* sem gap flex */
 }

 .msx-source {
     display: grid;
     grid-template-columns: 34px 1fr 18px;
     grid-column-gap: 12px;
     align-items: start;
     padding: 12px;
     border-radius: 10px;
     border: 1px solid #e5e5e5;
     background: #fff;
     text-decoration: none;
     transition: border-color .2s, box-shadow .2s;
 }

 .msx-source:hover {
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
     border-color: var(--msx-accent);
 }

 .msx-source__num {
     width: 34px;
     height: 34px;
     border-radius: 999px;
     border: 1px solid var(--msx-accent);
     background: var(--msx-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: 700;
     color: #fff;
     user-select: none;
 }

 .msx-source__top {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     font-weight: 700;
     color: var(--msx-muted);
 }

 .msx-source__domain {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 10px;
     /* sem gap */
 }

 .msx-source__date {
     white-space: nowrap;
     color: #999;
     font-weight: 700;
 }

 .msx-source__title {
     margin-top: 6px;
     font-size: 13px;
     font-weight: 700;
     color: var(--msx-text);
     line-height: 1.25;
     white-space: normal;
     overflow-wrap: anywhere;
     word-break: break-word;
 }

 .msx-source__snippet {
     margin-top: 6px;
     font-size: 13px;
     font-weight: 400;
     color: var(--msx-muted);
     line-height: 1.35;
     overflow-wrap: anywhere;
     word-break: break-word;
 }

 .msx-source__ext {
     margin-top: 4px;
     color: #999;
     font-weight: 700;
 }

 /* ---------- Popover (refs) ---------- */
 .msx-pop {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2147483647;
     display: none;

     /* CRÍTICO pro hover não "matar" o hover do pill */
     pointer-events: none;
     font-family: "Ubuntu Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }

 .msx-pop.is-open {
     display: block;
 }

 /* overlay mode (touch/click) precisa capturar clique */
 .msx-pop.is-overlay {
     pointer-events: auto;
 }

 .msx-pop__backdrop {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: none;
     background: rgba(0, 0, 0, .2);
     pointer-events: auto;
 }

 .msx-pop.is-overlay .msx-pop__backdrop {
     display: block;
 }

 .msx-pop__panel {
     position: fixed;
     width: calc(100vw - 24px);
     max-width: 620px;
     border-radius: 12px;
     border: 1px solid var(--msx-border);
     background: var(--msx-bg);
     box-shadow: var(--msx-shadow);
     overflow: hidden;
     pointer-events: auto;
     /* painel sempre clicável */
 }

 .msx-pop__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 14px;
     border-bottom: 1px solid var(--msx-border);
     background: var(--msx-panel-bg);
 }

 .msx-pop__label {
     font-size: 14px;
     font-weight: 700;
     color: var(--msx-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 320px;
 }

 .msx-pop__actions {
     display: inline-flex;
     align-items: center;
 }

 .msx-pop__allbtn {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     text-decoration: none;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .04em;
     color: #5f5b6b;
     background: #fff;
     border: 1px solid #dfdce6;
     padding: 7px 10px;
     border-radius: 8px;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     transition: border-color .2s, color .2s, background .2s;
     margin-right: 8px;
     /* sem gap */
     -webkit-tap-highlight-color: transparent;
 }

 .msx-pop__allbtn:hover {
     border-color: var(--msx-accent);
     color: var(--msx-accent);
     background: #f9ffff;
 }

 .msx-pop__allbtn:focus {
     outline: 2px solid var(--msx-accent);
     outline-offset: 2px;
 }

 .msx-pop__allbtn:focus:not(:focus-visible) {
     outline: none;
 }

 .msx-pop__body {
     padding: 12px 14px 14px;
     max-height: 60vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     /* iOS */
 }

 .msx-pop__close {
     display: none;
 }

 /* Desktop hover: animação leve */
 @keyframes msxIn {
     from {
         transform: scale(.99) translateY(2px);
         opacity: 0;
     }

     to {
         transform: scale(1) translateY(0);
         opacity: 1;
     }
 }

 @media (min-width: 769px) {
     .msx-pop__panel {
         transform-origin: top right;
         animation: msxIn .14s ease-out;
     }
 }

 /* Mobile / touch overlay: vira bottom sheet */
 @media (max-width: 768px) {
     .msx-modal__tools {
         display: block;
     }

     .msx-input {
         margin-right: 0;
         margin-bottom: 10px;
     }

     .msx-select {
         width: 100%;
         max-width: none;
     }

     .msx-pop__panel {
         left: 12px !important;
         right: 12px !important;
         width: auto !important;
         top: auto !important;
         bottom: 12px !important;
         bottom: calc(12px + env(safe-area-inset-bottom, 0px));
         transform-origin: bottom center;
         animation: msxUp .16s ease-out;
     }

     @keyframes msxUp {
         from {
             transform: translateY(12px);
             opacity: 0;
         }

         to {
             transform: translateY(0);
             opacity: 1;
         }
     }

     .msx-pop__close {
         display: inline-flex;
     }
 }

 /* Touch / overlay também mostra close (mesmo em telas grandes tipo iPad) */
 .msx-pop.is-overlay .msx-pop__close {
     display: inline-flex;
 }