/* Lex AI Spotlight Styles (renamed from chatbot.css) */
/* Wrapper ID renamed to #las-spotlight, classes prefixed with las- */

#las-spotlight {
    position: fixed;
    z-index: 9999;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --lex-brand: #ea580c;
    --lex-brand-alt: #f97316;
    --lex-brand-accent: #fb923c;
    --lex-brand-gradient: linear-gradient(135deg, var(--lex-brand) 0%, var(--lex-brand-alt) 55%, var(--lex-brand-accent) 100%);
    --lex-bg: #ffffff;
    --lex-bg-soft: #f8fafc;
    --lex-bg-mid: #f1f5f9;
    --lex-border: #e2e8f0;
    --lex-border-strong: #cbd5e1;
    --lex-text: #1f2937;
    --lex-text-soft: #475569;
    --lex-shadow: 0 4px 18px -4px rgba(0,0,0,0.12), 0 2px 6px -2px rgba(0,0,0,0.08);
}
#las-spotlight * { font-family: inherit; }
#las-spotlight.bottom-right { bottom:0; right:0; height:100vh; display:flex; flex-direction:column; justify-content:flex-end; }
#las-spotlight.bottom-left { bottom:20px; left:20px; }
#las-spotlight.top-right { top:20px; right:20px; }
#las-spotlight.top-left { top:20px; left:20px; }

.las-chat-button-container { position:relative; display:inline-block; margin-bottom:16px; margin-right:16px; }
.las-chat-button { width:72px; height:72px; background:transparent; border:none; cursor:pointer; transition: transform .4s ease, filter .4s ease; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; padding:4px; }
.las-chat-button:hover { transform: scale(1.07) rotate(-2deg); }
.las-chat-button:active { transform: scale(.95); }
.las-chat-button.active { filter: drop-shadow(0 0 10px rgba(234,88,12,.6)); }

.las-stars-icon { position:relative; width:68px; height:68px; }
.las-star { position:absolute; display:block; border-radius:50%; background:radial-gradient(circle at 42% 42%, #fff 0%, #ffe6cf 55%, rgba(255,255,255,0) 72%); box-shadow:0 0 10px 4px rgba(255,205,160,0.6),0 0 24px 10px rgba(255,140,60,0.32); animation: lasStarPulse 4.2s ease-in-out infinite; }
.las-star.s1 { top:0px; left:18px; width:26px; height:26px; animation-delay:0s; }
.las-star.s2 { top:24px; right:2px; width:22px; height:22px; animation-delay:.85s; }
.las-star.s3 { bottom:2px; left:28px; width:20px; height:20px; animation-delay:1.7s; }
.las-star.s4 { top:18px; left:2px; width:18px; height:18px; animation-delay:2.55s; }
@keyframes lasStarPulse { 0%,100% { transform:scale(1); opacity:1;} 45% { transform:scale(.65); opacity:.65;} 70% { transform:scale(1.35); opacity:1;} }

.las-chat-title-tooltip { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.8); color:#fff; padding:8px 12px; border-radius:6px; font-size:12px; font-weight:500; white-space:nowrap; opacity:0; visibility:hidden; transition:all .3s ease; pointer-events:none; z-index:10001; }
.las-chat-title-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color: rgba(0,0,0,0.8); }
.las-chat-button-container:hover .las-chat-title-tooltip { opacity:1; visibility:visible; bottom:85px; }
#las-spotlight.top-right .las-chat-title-tooltip, #las-spotlight.top-left .las-chat-title-tooltip { bottom:auto; top:80px; }
#las-spotlight.top-right .las-chat-title-tooltip::after, #las-spotlight.top-left .las-chat-title-tooltip::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:rgba(0,0,0,0.8); }
#las-spotlight.top-right .las-chat-button-container:hover .las-chat-title-tooltip, #las-spotlight.top-left .las-chat-button-container:hover .las-chat-title-tooltip { top:85px; }

.las-chat-window { position:fixed; top:0; right:0; height:100vh; width:380px; background:var(--lex-bg); border-left:1px solid var(--lex-border); border-radius:0 0 0 20px; box-shadow:var(--lex-shadow); display:none; flex-direction:column; overflow:hidden; animation: lasSlideUp .35s cubic-bezier(.16,.84,.44,1); transition: transform .35s cubic-bezier(.4,.0,.2,1), opacity .25s ease; pointer-events:auto; z-index:10000; }


.las-chat-header { position:sticky; top:0; z-index:10; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); background:#E4572E; color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; }
.las-chat-title { color:inherit; font-size:16px; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; }
.las-close-button { background: rgba(255,255,255,0.2); border:none; color:#fff; font-size:18px; cursor:pointer; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:10px; transition: background .25s ease; }
.las-close-button:hover { background: rgba(255,255,255,0.3); }

.las-chat-body { flex:1 1 auto; min-height:0; padding:22px 26px 16px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth; }

.las-chat-input { flex-shrink:0; position:relative; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); padding:16px 22px 20px; border-top:1px solid var(--lex-border); background:var(--lex-bg); }
.las-input-wrapper { position:relative; width:100%; background:var(--lex-bg-soft); border:1px solid var(--lex-border); border-radius:16px; box-sizing:border-box; display:flex; align-items:center; }
.las-input-field { width:100%; border:none; border-radius:16px; padding:12px 60px 12px 16px; font-size:14px; outline:none; resize:none; min-height:42px; max-height:46px; background:transparent; color:var(--lex-text); line-height:20px; display:flex; align-items:center; box-sizing:border-box; margin-right:0; }
.las-input-field::placeholder { color: var(--lex-text-soft); }
.las-send-button { background: #E4572E; border:none; border-radius:12px; height:36px; min-width:44px; color:#fff !important; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; letter-spacing:.5px; padding:0 12px; position:absolute; right:10px; top:50%; transform: translateY(-50%) !important; z-index:2; margin:0; }
.las-send-button:disabled { opacity:.5; cursor:not-allowed; }

.las-message { max-width:80%; padding:11px 16px 12px; border-radius:16px; line-height:1.5; font-size:14px; background:#fff; color:var(--lex-text); border:1px solid var(--lex-border); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.las-message.bot { border-left:4px solid var(--lex-brand); align-self:flex-start; margin-right:auto; }
.las-message.user { background: #f36e36; color:#fff; border:none; box-shadow:0 4px 14px -4px rgba(234,88,12,0.55); align-self:flex-end; margin-left:auto; }
.las-message.welcome { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-left:4px solid var(--lex-brand); font-weight:500; }

.las-loading { display:flex; align-items:center; gap:10px; color:#6b7280; font-size:14px; }
.las-loading-dots { display:flex; gap:3px; }
.las-loading-dot { width:8px; height:8px; border-radius:50%; background:#ea580c; animation: lasPulse 1.4s ease-in-out infinite both; margin:0 2px; display:inline-block; }
@keyframes lasPulse { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.las-error { background:#fff1f2; color:#b91c1c; border:1px solid #fecdd3; padding:10px 15px; border-radius:10px; font-size:13px; margin:10px 0; }

/* Pre-chat overlay (chooser for Ask About This Post vs Go to Lex AI) */
.las-prechat { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(20,20,20,0.78); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); z-index:20; padding:30px 24px 40px; }
.las-prechat-inner { width:100%; max-width:300px; text-align:center; background: #fff; border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:26px 26px 32px; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.55); }
.las-prechat-heading { margin:0 0 8px; font-size:18px; font-weight:600; color:#111; }
.las-prechat-sub { margin:0 0 20px; font-size:13px; line-height:1.5; color:#111; }
.las-prechat-actions { display:flex; flex-direction:column; gap:12px; }
.las-prechat-btn { display:inline-flex; justify-content:center; align-items:center; border-radius:14px; padding:14px 18px; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; border:1px solid transparent; transition: all .25s ease; letter-spacing:.3px; }
.las-prechat-btn.primary { background: #E4572E; color:#111; box-shadow: 0 5px 18px -4px rgba(234,88,12,0.55); }
.las-prechat-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(234,88,12,0.65); }
.las-prechat-btn.primary:active { transform: translateY(0) scale(.96); }
.las-prechat-btn.secondary { background: #d1d1d1; color:#111; border-color: rgba(255,255,255,0.12); }
.las-prechat-btn.secondary:hover { background: rgba(255,255,255,0.14); color: #111; transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(234,88,12,0.18); }
.las-prechat-btn.secondary:active { background: rgba(255,255,255,0.20); color: #111; transform: translateY(0) scale(.96); }
.las-prechat-btn:focus { outline:2px solid #ea580c; outline-offset:2px; }

/* Mobile */
@media (max-width: 480px) {
  #las-spotlight { position:fixed !important; bottom:10px !important; right:10px !important; left:10px !important; top:auto !important; }
  .las-chat-window { position:fixed !important; bottom:90px !important; left:10px !important; right:10px !important; top:10px !important; width:auto !important; height:auto !important; max-height: calc(100vh - 110px); }
  .las-chat-button { width:60px; height:60px; }
  .las-chat-title-tooltip { font-size:11px; padding:6px 10px; bottom:70px; }
  .las-chat-button-container:hover .las-chat-title-tooltip { bottom:75px; }
}