/* ========================================================================== DraftEdge Props Modal CSS Custom modal styling for AI Props analysis Theme-aware: all colors come from CSS variables (see main.css :root) DO NOT merge into props-optimized.css ========================================================================== */ /* ========================================================================== Prop Info Modal (#propModal) ========================================================================== */ #propModal .modal-content { background: var(--bg-darker); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; padding: 0; max-height: 90vh; } #propModal .modal-header { background: transparent; padding: 16px 20px 0; border: none; } #propModal .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.6; transition: opacity 0.2s ease; } #propModal .modal-header .btn-close-white:hover { opacity: 1; } /* Hide the lord-icon animation in the prop modal */ #propModal .text-center > lord-icon { display: none; } /* ========================================================================== AI Analysis variant — strip the host modal-content chrome so the de-ai-hero panel is the ONLY elevated surface (design rule: one structural device per nesting level). Without this scoping, the reader sees a card-in-card "modal inside another container" (reported 2026-05-12). Triggered by :has(.de-ai) which only fires when our AI analysis shell is rendered inside #propinfo. ========================================================================== */ #propModal:has(.de-ai) .modal-content { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; max-height: none; } #propModal:has(.de-ai) .modal-header { /* The de-ai-shell paints its own dismiss × in the top-right corner of the hero (.de-ai-dismiss). Showing the Bootstrap × on top of it produces a double-close pair the user can't reconcile. */ display: none; } #propModal:has(.de-ai) .text-center { /* The lord-icon spinner and any preheader "DraftEdge AI Analysis" text were creating a third stacked band above the hero. The de-ai-shell has its own loading state in the headline area. */ display: none; } #propModal:has(.de-ai) .modal-dialog { /* Restore some vertical padding the host modal lost when the header was hidden — keeps the hero from kissing the viewport top. */ margin-top: 4vh; } #propModal:has(.de-ai) #propinfo { /* No vertical max-height clipping in AI mode — the hero + flow scroll inside the modal-dialog rather than a nested scroller. */ max-height: none; overflow: visible; } /* Backdrop: tame the global 0.8 black slab whenever ANY prop-related modal is open so the page underneath stays visible — user wants "the background to be the page it popped up from, not a full blur out with a new background". Fires for: • #propModal — basic prop info modal + AI analysis variant • #confirmAIModal — token-spend confirmation Originally scoped to body.de-ai-open (AI shell only), broadened 2026-05-16 so the prop info modal gets the same lifted-backdrop treatment. Why :has() on body: .modal-backdrop is a sibling of #propModal in the DOM (Bootstrap appends it to ), so we can't write a parent-relative selector. body:has(...) checks for an open prop modal anywhere on the page and then styles the sibling backdrop. !important is required: props-optimized.css:272 ships .show { background-color: var(--bg-card) !important; } intending to color card-flip panels, but the unscoped selector also hits .modal-backdrop.show. Without our own !important the backdrop gets stuck on bg-card (verified via getComputedStyle audit). */ body:has(#propModal.show, #confirmAIModal.show) .modal-backdrop.show { background-color: rgba(8, 16, 32, 0.32) !important; opacity: 1 !important; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } /* Force the .modal WRAPPER element transparent. Bootstrap ships .modal as a viewport-sized transparent container — only .modal-content is opaque. But props-optimized.css:269 ships .show { background-color: var(--bg-card) !important; ... } intending to color card-flip panels. Because the selector is unscoped and #propModal/#confirmAIModal both get the .show class when open, the ENTIRE viewport-sized wrapper ends up painted solid navy on top of our lifted backdrop — the user perceives this as "the background goes a full blue when the modal opens" (verified 2026-05-16 via getComputedStyle: #propModal.show rect = 1920x1080, bg = rgb(27,46,72)). Restore transparency on the wrapper so the backdrop + page underneath can show through. Modal-content stays opaque (handled separately). */ #propModal.show, #confirmAIModal.show { background-color: transparent !important; } /* ----- AI variant: dialog + content sizing override ----- Three things are happening here, each fixing a specific bug: 1) props-optimized.css:104 ships .modal-content { width: 90%; margin: 20px auto; } globally (it ships to every modal site-wide). For the AI variant that means a 1140px dialog gets a 1026px content box centered inside it — losing ~57px on each side to nothing. We override back to width:100% so the content fills the dialog and the 24px inset on .de-ai is the ONLY horizontal padding. 2) Bootstrap's .modal-lg sets max-width:1140px on .modal-dialog. On a 1920px viewport that leaves only ~390px on each side and most of that is cropped to thin strips. Drop to 980px so the prop cards on either side are actually visible behind the lifted backdrop. Still wide enough for the 4-cell stat grids and L5 game log table to breathe. 3) Add a sharper hairline border + drop shadow so the content panel floats over the visible grid rather than dissolving into it. The shadow is the only thing telling the eye where the modal ends and the page begins now that the backdrop is mostly transparent. */ #propModal:has(.de-ai) .modal-dialog { max-width: 980px; } #propModal:has(.de-ai) .modal-content { background: var(--bg-darker); width: 100%; margin: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; /* match the inner :before radius so the corners line up */ overflow: hidden; /* clip the inner stripe + .de-ai accent to the rounded corners */ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35); position: relative; /* anchor for the verdict accent ::before below */ } /* ----- Verdict accent stripe — EDGE-FLUSH ------------------------------------ Previously this stripe lived on `.de-ai::before`, but `.de-ai` is wrapped by `#propinfo.de-ai-host { padding: 18px 28px 28px }`, so the stripe was inset by 28px on each side — leaving a visible navy gap between the stripe and the rounded top-left / top-right corners ("border looks off / breaks in the corners", 2026-05-16). Moving ownership to `.modal-content::before` (now `position: relative` and already `overflow: hidden`) lets the stripe span the FULL modal-content width and clip cleanly to the rounded corners. The legacy blue->orange gradient stripe from props-optimized.css:120 is superseded by this rule (same selector — content/background/etc. are reset in full so nothing leaks through). */ #propModal:has(.de-ai) .modal-content::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--primary-green); opacity: 0.85; transition: background 0.3s ease; z-index: 2; /* sit above .de-ai content so it's never hidden under padding bg */ pointer-events: none; } /* Verdict tinting — selectors mirror the legacy `.de-ai-verdict-wrap-*` classes that live on `.de-ai` itself. Using :has() lets us drive the modal-content stripe from a state class on a descendant without touching JS. */ #propModal .modal-content:has(.de-ai-verdict-wrap-over)::before { background: var(--success); } #propModal .modal-content:has(.de-ai-verdict-wrap-under)::before { background: var(--danger); } #propModal .modal-content:has(.de-ai-verdict-wrap-pass)::before { background: var(--text-muted); } /* Suppress the original `.de-ai::before` inside the AI scope so we don't end up with two stripes (one inset by 28px, one flush). Kept the legacy rule in main.css for any consumer that still mounts `.de-ai` outside `#propModal`. */ #propModal:has(.de-ai) .de-ai::before { content: none; } /* Full modal area with scrollable content */ #propModal #propinfo { padding: 0 !important; margin: 0 !important; max-height: 75vh; overflow-y: auto; overflow-x: hidden; } #propModal .modal-dialog { max-height: 90vh; } #propModal .modal-footer { background: transparent; border-top: 1px solid var(--border-color); padding: 12px 20px; } #propModal .modal-footer .btn-secondary { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 8px; padding: 8px 24px; font-size: 13px; font-weight: 500; transition: all 0.2s ease; } #propModal .modal-footer .btn-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-color); } /* ========================================================================== AI Confirmation Modal (#confirmAIModal) ========================================================================== */ #confirmAIModal .modal-content { background: var(--bg-darker); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } #confirmAIModal .modal-header { background: transparent; padding: 16px 20px 0; border: none; } #confirmAIModal .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.6; transition: opacity 0.2s ease; } #confirmAIModal .modal-header .btn-close-white:hover { opacity: 1; } /* Hide the lord-icon in confirmation modal */ #confirmAIModal lord-icon { display: none; } #confirmAIModal .modal-body { padding: 24px 32px; } #confirmAIModal .modal-body h4, #confirmAIModal #aiHeading { color: var(--text-primary); font-weight: 700; font-size: 1.25rem; margin-bottom: 12px; } #confirmAIModal .modal-body p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; } #confirmAIModal .btn-success, #confirmAIModal .btn-outline-success { background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%); border: none; color: var(--bg-darker); font-weight: 600; font-size: 14px; padding: 10px 28px; border-radius: 10px; transition: all 0.25s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } #confirmAIModal .btn-success:hover, #confirmAIModal .btn-outline-success:hover { background: linear-gradient(135deg, var(--primary-green-hover) 0%, var(--primary-green) 100%); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } #confirmAIModal .modal-footer { background: transparent; border-top: 1px solid var(--border-color); padding: 12px 20px; } #confirmAIModal .modal-footer .btn-secondary { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 8px; padding: 8px 24px; font-size: 13px; font-weight: 500; transition: all 0.2s ease; } #confirmAIModal .modal-footer .btn-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); } /* Token cost badge */ #confirmAIModal .fa-coins { color: var(--gold); } /* ========================================================================== AI Loading States ========================================================================== */ .ai-loading-container { padding: 48px 24px; text-align: center; } .ai-loading-header { margin-bottom: 32px; } .ai-loading-icon { position: relative; width: 72px; height: 72px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .ai-loading-icon i { font-size: 28px; color: var(--primary-green); z-index: 1; } .ai-pulse-ring { position: absolute; width: 100%; height: 100%; border: 2px solid rgba(212, 175, 96, 0.3); border-radius: 50%; animation: ai-pulse 2s ease-in-out infinite; } @keyframes ai-pulse { 0% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.3; } 100% { transform: scale(0.8); opacity: 1; } } .ai-loading-container h4 { color: var(--text-primary); font-weight: 600; font-size: 18px; margin: 0 0 6px; } .ai-loading-subtitle { color: var(--text-muted); font-size: 14px; margin: 0; } .ai-loading-progress { max-width: 300px; margin: 0 auto; } .ai-progress-bar { height: 3px; background: var(--bg-card); border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .ai-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-green), var(--gold), var(--primary-green)); background-size: 200% 100%; border-radius: 4px; animation: ai-progress-shimmer 2s ease-in-out infinite; width: 60%; } @keyframes ai-progress-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ai-status-text, #ai-status { color: var(--text-muted); font-size: 13px; margin: 0; transition: color 0.3s ease; } /* Initial loading spinner (before AI starts) */ .ai-loading-state { padding: 48px 24px; } .ai-loading-state h4 { color: var(--text-primary); font-weight: 600; } .ai-loading-state p { color: var(--text-muted); } /* ========================================================================== AI Analysis Output Content Hero + hairline-divided sections (single-document flow, not stacked cards). See .claude/skills/draftedge-design + ai-analysis-ui.js for the pattern. ========================================================================== */ .ai-analysis-wrapper { background: transparent; border-radius: 0; overflow: visible; margin: 0; padding: 0; } .ai-analysis-wrapper .ai-analysis-header { display: none; /* analysis has its own header */ } .ai-analysis-content { color: var(--text-primary); line-height: 1.7; font-size: 14px; padding: 24px 28px; background: transparent; } .ai-analysis-content .ai-analysis { color: var(--text-primary); } /* Hero header — one elevated panel, no stacked borders */ .ai-analysis-content .analysis-header, #propinfo .analysis-header { background: var(--bg-card) !important; padding: 24px 28px !important; border-radius: 12px !important; margin: 0 0 24px 0 !important; border: none !important; position: relative !important; } .ai-analysis-content .analysis-header::before, #propinfo .analysis-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--primary-green); border-radius: 12px 12px 0 0; } .ai-analysis-content .analysis-header h2, #propinfo .analysis-header h2 { color: var(--text-primary) !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 !important; } .ai-analysis-content .analysis-header p, #propinfo .analysis-header p { color: var(--text-muted) !important; margin: 6px 0 0 !important; font-size: 14px !important; } /* Verdict Box */ .ai-analysis-content .verdict-box, #propinfo .verdict-box { padding: 20px !important; border-radius: 12px !important; margin-bottom: 20px !important; text-align: center; } .ai-analysis-content .verdict-box h3, #propinfo .verdict-box h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin: 0 0 8px !important; } .ai-analysis-content .verdict-box p, #propinfo .verdict-box p { color: rgba(255, 255, 255, 0.85) !important; margin: 0 !important; font-size: 15px !important; } /* Analysis Sections — section flow, NOT stacked cards. Hairline divider between siblings; no per-section bg/border/radius. */ .ai-analysis-content .analysis-section, #propinfo .analysis-section { background: transparent !important; border: none !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 0 !important; padding: 22px 4px !important; margin-bottom: 0 !important; } .ai-analysis-content .analysis-section:first-of-type, #propinfo .analysis-section:first-of-type { border-top: none !important; padding-top: 4px !important; } .ai-analysis-content .analysis-section h3, #propinfo .analysis-section h3 { color: var(--text-muted) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin: 0 0 14px !important; padding-bottom: 0 !important; border-bottom: none !important; } .ai-analysis-content .analysis-section p, #propinfo .analysis-section p { color: var(--text-secondary) !important; font-size: 14px !important; line-height: 1.7 !important; margin: 0 0 10px !important; } .ai-analysis-content .analysis-section ul, #propinfo .analysis-section ul { padding-left: 20px !important; margin: 10px 0 !important; } .ai-analysis-content .analysis-section li, #propinfo .analysis-section li { color: var(--text-secondary) !important; font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 6px !important; } .ai-analysis-content .analysis-section strong, #propinfo .analysis-section strong { color: var(--text-primary) !important; } /* Stat Comparison Tables */ .ai-analysis-content table, #propinfo .ai-analysis table { width: 100% !important; border-collapse: collapse !important; margin: 12px 0 !important; background: var(--bg-card) !important; border-radius: 8px !important; overflow: hidden !important; } .ai-analysis-content table th, #propinfo .ai-analysis table th { background: var(--bg-card-hover) !important; color: var(--text-muted) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 10px 12px !important; border-bottom: 1px solid var(--border-color) !important; } .ai-analysis-content table td, #propinfo .ai-analysis table td { color: var(--text-primary) !important; font-size: 13px !important; padding: 10px 12px !important; border-bottom: 1px solid var(--border-color) !important; } .ai-analysis-content table tr:last-child td, #propinfo .ai-analysis table tr:last-child td { border-bottom: none !important; } /* Stat highlighting in AI output */ .ai-analysis-content .text-success, #propinfo .ai-analysis .text-success { color: var(--success) !important; } .ai-analysis-content .text-danger, #propinfo .ai-analysis .text-danger { color: var(--danger) !important; } .ai-analysis-content .text-warning, #propinfo .ai-analysis .text-warning { color: var(--warning) !important; } .ai-analysis-content .text-info, #propinfo .ai-analysis .text-info { color: var(--info) !important; } /* Analysis Footer - subtle, flush bottom */ .ai-analysis-content .analysis-footer, #propinfo .analysis-footer { background: transparent !important; border: none !important; border-top: 1px solid var(--border-color) !important; border-radius: 0 !important; padding: 16px 0 0 !important; margin-top: 20px !important; text-align: center !important; } .ai-analysis-content .analysis-footer p, #propinfo .analysis-footer p { color: var(--text-muted) !important; font-size: 12px !important; margin: 0 !important; font-style: italic; } /* Powered by badge */ .ai-analysis-wrapper .ai-powered-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(212, 175, 96, 0.1); border: 1px solid rgba(212, 175, 96, 0.2); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: var(--primary-green); font-weight: 500; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 768px) { .ai-analysis-content .analysis-header h2, #propinfo .analysis-header h2 { font-size: 17px !important; } .ai-analysis-content .analysis-section, #propinfo .analysis-section { padding: 18px 2px !important; } .ai-loading-container { padding: 32px 16px; } #confirmAIModal .modal-body { padding: 20px; } } /* ========================================================================== Smooth Transitions ========================================================================== */ #propModal .modal-content, #confirmAIModal .modal-content { animation: modalSlideIn 0.3s ease; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Scrollbar styling for modal content -------------------------------------------------------------------------- Problem: `#propinfo` is the scrollable region inside `.modal-content` (border-radius: 12px; overflow: hidden). A flush 6px scrollbar paints right at the rounded-corner column, so the eye reads the thumb + the 1px modal border as one fused chunk in the top-right corner. Fix: 10px wide scroller with a transparent 3px right-side "border" on the thumb (background-clip: padding-box). That carves a visible gap between the thumb and the modal border without changing modal-content width. Thumb is fully rounded so it never has a square edge near the rounded corner. Track stays transparent so we don't introduce a second vertical band of color next to the modal edge. */ #propinfo { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; scroll-padding-block-start: 12px; } #propinfo::-webkit-scrollbar { width: 10px; } #propinfo::-webkit-scrollbar-track { background: transparent; } #propinfo::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); background-clip: padding-box; /* keep the colored fill inside the padded box ... */ border: 3px solid transparent; /* ... so this border becomes a transparent gap */ border-radius: 8px; /* round both ends so no square edge touches the modal corner */ min-height: 36px; } #propinfo::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.28); } #propinfo::-webkit-scrollbar-button { display: none; /* no end-cap arrows that would stamp into the corners */ height: 0; width: 0; }