/* Bubble injected into every showcased site by caddy replace_response. The wrapper #mcai-inject-bubble is SSR'd into ; this stylesheet is ed from the same replacement so it's cached across every subdomain. Keep in sync with the DOM in inject.js (the JS branch only handles close-click + backend/staging tip append). */ #mcai-inject-bubble { position: fixed; bottom: 72px; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); padding: 20px 42px; box-sizing: border-box; background: #fff; border-radius: 16px; box-shadow: 0 12px 36px #0000002e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #1f2937; z-index: 2147483600; display: flex; flex-direction: column; gap: 0; user-select: none; -webkit-user-select: none; animation: mcai-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1); transition: box-shadow 0.18s ease, transform 0.18s ease; } #mcai-inject-bubble .mcai-row { display: flex; align-items: center; gap: 18px; } #mcai-inject-bubble .mcai-warning { margin-top: 14px; padding: 9px 14px; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 10px; text-align: center; } #mcai-inject-bubble .mcai-staging { margin-top: 10px; padding: 9px 14px; font-size: 12.5px; line-height: 1.5; font-weight: 500; color: #1e40af; background: #dbeafe; border: 1px solid #bfdbfe; border-radius: 10px; text-align: center; } #mcai-inject-bubble:hover { box-shadow: 0 16px 44px #0000003d; transform: translateY(-2px); } @keyframes mcai-pop { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* .mcai-close is now an , so the color + text-decoration overrides matter (browser default is blue underlined "×"). Everything else — position, hit area, hover — stays. */ #mcai-inject-bubble .mcai-close { position: absolute; top: 8px; left: 12px; background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: #9ca3af; text-decoration: none; padding: 4px 6px; border-radius: 6px; } #mcai-inject-bubble .mcai-close:hover { color: #4b5563; background: #f3f4f6; text-decoration: none; } /* .mcai-main is now an , so the color/decoration overrides matter here (browser default is blue underline). Cursor stays default-pointer because it's an anchor; kept in the rule for clarity. */ #mcai-inject-bubble .mcai-main { display: flex; align-items: center; gap: 16px; cursor: pointer; flex: 0 0 auto; margin-right: 96px; color: inherit; text-decoration: none; } #mcai-inject-bubble .mcai-icon { width: 56px; height: 56px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; } #mcai-inject-bubble .mcai-icon img { width: 48px; height: 48px; object-fit: contain; display: block; } #mcai-inject-bubble .mcai-text { min-width: 0; } #mcai-inject-bubble .mcai-title { font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; } #mcai-inject-bubble .mcai-subtitle { font-size: 13px; color: #6b7280; line-height: 1.4; } #mcai-inject-bubble .mcai-divider { width: 1px; height: 56px; background: #e5e7eb; flex: none; } #mcai-inject-bubble .mcai-more { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #1f2937; text-decoration: none; background: #f9fafb; border: 1px solid #e5e7eb; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } #mcai-inject-bubble .mcai-more:hover { background: #1f2937; color: #fff; border-color: #1f2937; } @media (max-width: 640px) { #mcai-inject-bubble { padding: 16px 18px !important; gap: 12px !important; align-items: stretch !important; width: calc(100vw - 24px) !important; max-width: none !important; left: 12px !important; right: 12px !important; margin: 0 !important; border-radius: 14px !important; } #mcai-inject-bubble .mcai-row { flex-direction: column; align-items: stretch; gap: 12px; } #mcai-inject-bubble .mcai-main { gap: 12px; margin-right: 0; } #mcai-inject-bubble .mcai-icon { width: 44px; height: 44px; } #mcai-inject-bubble .mcai-icon img { width: 36px; height: 36px; } #mcai-inject-bubble .mcai-divider { display: none; } #mcai-inject-bubble .mcai-more { padding: 10px 14px; font-size: 13px; align-self: stretch; justify-content: center; } }