/* === IN-CONTAINER ONBOARDING PANEL (inside ISP Assist Demo) === */ #gwoai-panel { margin-bottom: 10px; } .gwoai-panel-inner { border-radius: 14px; border: 1px solid #e5e7eb; background: #f9fafb; padding: 10px 12px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); } .gwoai-panel-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .gwoai-panel-sub { font-size: 0.9rem; color: #4b5563; margin-bottom: 8px; } .gwoai-panel-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .gwoai-btn { padding: 8px 10px; border-radius: 10px; border: 1px solid #d1d5db; background: #f8fafc; cursor: pointer; font-size: 0.9rem; } .gwoai-btn.gwoai-voice { background: #111827; color: #ffffff; border-color: #111827; } .gwoai-pills, .gwoai-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .gwoai-pill { padding: 6px 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #f9fafb; cursor: pointer; font-size: 0.85rem; } .gwoai-chip { padding: 6px 10px; border-radius: 10px; border: 1px solid #e5e7eb; background: #ffffff; cursor: pointer; font-size: 0.85rem; } /* === TRANSLUCENT COACHMARK OVERLAY + YELLOW SPEECH BUBBLE === */ /* Overlay fills only the ISP Assist Demo container it’s appended to */ #gwoai-overlay { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 relative to parent */ z-index: 9999; display: flex; align-items: flex-start; justify-content: center; pointer-events: auto; } /* Backdrop covers the ISP Assist Demo box (its parent) */ .gwoai-backdrop { position: absolute; inset: 0; /* fill parent */ background: rgba(0, 0, 0, 0.35); /* translucent so you can see the container */ border-radius: 20px; /* optional: match your container corners */ } .gwoai-coach { position: relative; margin-top: 80px; width: 100%; display: flex; justify-content: center; pointer-events: none; /* bubble handles actual clicks */ } .gwoai-bubble { position: relative; max-width: 360px; background: #facc15; /* yellow bubble */ color: #111827; border-radius: 18px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.32); pointer-events: auto; /* clickable */ } .gwoai-bubble-text { font-size: 1rem; font-weight: 700; text-align: center; } /* Arrow pointing downward (toward pills area) */ .gwoai-bubble-arrow { position: absolute; bottom: -14px; left: 50%; margin-left: -12px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #facc15; } /* Small screens: tighten spacing a bit */ @media (max-width: 480px) { .gwoai-coach { margin-top: 60px; } .gwoai-bubble { max-width: 300px; padding: 10px 12px; } .gwoai-bubble-text { font-size: 0.95rem; } }