/* ---------------------------------------------------- */
/* HELLO BAR (TOP STICKY) */
/* ---------------------------------------------------- */
.lsb-hello-bar { position: fixed; top: 0; left: 0; width: 100%; background: #1c1c1e; color: #fff; z-index: 999999; display: flex; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; height: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.lsb-hello-label { background: #ff3b30; color: #fff; padding: 0 15px; height: 100%; display: flex; align-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; z-index: 2; white-space: nowrap;}
.lsb-hello-ticker { flex-grow: 1; overflow: hidden; white-space: nowrap; position: relative; height: 100%; display: flex; align-items: center;}
.lsb-hello-track { display: inline-block; white-space: nowrap; animation: helloScroll 25s linear infinite; font-size: 14px; font-weight: 500;}
.lsb-hello-track:hover { animation-play-state: paused; }
.lsb-hello-track a { color: #fff; text-decoration: none; transition: color 0.2s;}
.lsb-hello-track a:hover { color: #0a84ff; text-decoration: underline;}
#lsb-hello-close { background: none; border: none; color: #86868b; font-size: 20px; cursor: pointer; padding: 0 15px; height: 100%; transition: color 0.2s; z-index: 2;}
#lsb-hello-close:hover { color: #fff; }
@keyframes helloScroll { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
body { padding-top: 40px; } /* Prevent overlap */

/* ---------------------------------------------------- */
/* MAIN SHORTCODE STYLES */
/* ---------------------------------------------------- */
.live-blog-wrapper { max-width: 650px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.live-header { font-size: 20px; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; color: #1d1d1f; }
.pulse-dot { width: 12px; height: 12px; background-color: #ff3b30; border-radius: 50%; margin-right: 10px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,0.7); } 70% { box-shadow: 0 0 0 10px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } }

/* Filters & Tabs */
.live-filters { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 5px; scrollbar-width: none; }
.live-filters::-webkit-scrollbar { display: none; }
.filter-btn { background: #e5e5ea; border: none; padding: 6px 16px; border-radius: 16px; font-size: 14px; color: #1c1c1e; font-weight: 500; cursor: pointer; transition: 0.2s; white-space: nowrap;}
.filter-btn:hover { background: #d1d1d6; }
.filter-btn.active { background: #007aff; color: #fff; }

.lsb-panel-tabs { display: flex; background: #e5e5ea; border-radius: 10px; padding: 4px; margin: 0 20px 15px 20px; }
.panel-tab-btn { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; color: #86868b; transition: 0.3s; }
.panel-tab-btn.active { background: #fff; color: #1d1d1f; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Cards & Apple Siri Hover Effect */
.apple-blog-card { position: relative; z-index: 1; background: #fff; border-radius: 20px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.03); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; scroll-margin-top: 140px; }
.apple-blog-card::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 24px; background: linear-gradient(135deg, #32ade6, #5e5ce6, #af52de, #ff2d55, #ff3b30, #ff9500); background-size: 300% 300%; z-index: -1; filter: blur(14px); opacity: 0; transition: opacity 0.5s ease; }
.apple-blog-card:hover { transform: translateY(-4px) scale(1.01); border-color: transparent; }
.apple-blog-card:hover::before { opacity: 0.7; animation: siriGlow 4s ease infinite; }
@keyframes siriGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.pinned-card { border-left: 5px solid #007aff; }
.highlight-post { border: 2px solid #007aff !important; box-shadow: 0 0 25px rgba(0, 122, 255, 0.4) !important; transform: scale(1.02); transition: all 0.5s ease; }

/* Headers & Tags */
.card-header { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.apple-tag { background: #f2f2f7; color: #1c1c1e; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; }
.pin-badge { background: #e5f1ff; color: #007aff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; }
.new-badge { background: #ffe5e5; color: #ff3b30; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; display: inline-block;}
.lsb-bookmark-btn { background: transparent; border: 1px solid #d1d1d6; color: #86868b; border-radius: 12px; font-size: 12px; font-weight: 600; padding: 3px 10px; cursor: pointer; transition: 0.2s;}
.lsb-bookmark-btn:hover { background: #f2f2f7; }
.lsb-bookmark-btn.saved { background: #ff9500; color: #fff; border-color: #ff9500; }

/* Content */
.apple-blog-title { font-size: 19px; font-weight: 600; color: #1d1d1f; margin: 0 0 5px 0; }
.apple-blog-time { font-size: 12px; color: #86868b; margin-bottom: 12px; display: block; }
.lsb-countdown { background: #ffe5e5; color: #ff3b30; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 15px; display: inline-block; border: 1px solid rgba(255,59,48,0.2);}
.apple-blog-content { font-size: 15px; color: #333336; line-height: 1.6; }
.action-btn { display: inline-block; background: #007aff; color: #fff; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14px; margin-top: 15px; }

/* Reactions Bar */
.interaction-bar { margin-top: 20px; padding-top: 15px; border-top: 1px solid #f2f2f7; display: flex; flex-direction: column; gap: 10px;}
.views-count { font-size: 13px; color: #86868b; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.vote-btn { background: transparent; border: none; padding: 0; font-size: 13px; color: #007aff; font-weight: 600; cursor: pointer; transition: 0.2s;}
.vote-btn:hover { text-decoration: underline; }

.lsb-reactions-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;}
.react-btn { background: #f2f2f7; border: none; padding: 6px 12px; border-radius: 20px; font-size: 14px; color: #1c1c1e; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.react-btn:hover { background: #e5e5ea; transform: scale(1.05);}
.react-btn.voted { background: #e5f1ff; color: #007aff; border: 1px solid #007aff; pointer-events: none; }
.share-icon-btn { background: #25D366; color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; display: flex; align-items: center; transition: 0.2s; margin-left: auto;}
.share-icon-btn:hover { background: #1ebe57; color:#fff; text-decoration:none; transform: scale(1.05);}

/* ---------------------------------------------------- */
/* WIDGET TICKER STYLES */
/* ---------------------------------------------------- */
.live-blog-widget-wrapper { background: #ffffff; border-radius: 16px; padding: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lsb-ticker-wrap { height: 240px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); }
.lsb-ticker-move { display: flex; flex-direction: column; animation: tickerScroll 15s linear infinite; }
.lsb-ticker-wrap:hover .lsb-ticker-move { animation-play-state: paused; }
@keyframes tickerScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.lsb-ticker-item { font-size: 15px; font-weight: 600; color: #1d1d1f; padding: 12px 5px; border-bottom: 1px solid #f2f2f7; line-height: 1.4; }
.lsb-ticker-item a { color: #1d1d1f; text-decoration: none; transition: color 0.2s; }
.lsb-ticker-item a:hover { color: #007aff; }
.widget-read-more { display: block; text-align: center; background: #007aff; color: #fff; padding: 10px; border-radius: 10px; margin-top: 15px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; }
.widget-read-more:hover { background: #005bb5; color: #fff; }

/* ---------------------------------------------------- */
/* FLOATING BADGE & SLIDING PANEL */
/* ---------------------------------------------------- */
.lsb-floating-btn { position: fixed; bottom: 25px; left: 25px; background: #1c1c1e; color: #fff; padding: 12px 20px; border-radius: 30px; cursor: grab; box-shadow: 0 8px 30px rgba(0,0,0,0.3); z-index: 9998; display: flex; align-items: center; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: transform 0.2s ease; user-select: none; touch-action: none; }
.lsb-floating-btn:active { cursor: grabbing; }
.lsb-floating-btn:hover { transform: scale(1.05); }

.lsb-sliding-panel { position: fixed; top: 0; left: -420px; width: 100%; max-width: 400px; height: 100vh; background: #f2f2f7; z-index: 100001; transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 5px 0 30px rgba(0,0,0,0.15); overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lsb-sliding-panel.open { left: 0; }
.lsb-panel-overlay { position: fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.4); z-index: 100000; display: none; backdrop-filter: blur(2px); }

.lsb-panel-header { padding: 20px; background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5ea; position: sticky; top: 0; z-index: 10; margin-bottom:15px;}
.lsb-panel-close { background: #f2f2f7; border: none; font-size: 20px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: #86868b; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.lsb-panel-close:hover { background: #e5e5ea; color: #1c1c1e;}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .lsb-hello-bar { background: #000; border-bottom: 1px solid #2c2c2e; }
    .live-header, .apple-blog-title { color: #f5f5f7; }
    .apple-blog-card { background: #1c1c1e; border-color: #2c2c2e; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
    .apple-blog-content { color: #d2d2d7; }
    .interaction-bar { border-color: #2c2c2e; }
    .react-btn, .apple-tag, .lsb-bookmark-btn { background: #2c2c2e; color: #f5f5f7; border-color: #3a3a3c;}
    .react-btn:hover { background: #3a3a3c; }
    .lsb-countdown { background: rgba(255,59,48,0.1); }
    
    .live-blog-widget-wrapper { background: #1c1c1e; border-color: #2c2c2e; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
    .lsb-ticker-item { border-bottom-color: #2c2c2e; }
    .lsb-ticker-item a { color: #f5f5f7; }
    .lsb-ticker-item a:hover { color: #0a84ff; }
    
    .lsb-sliding-panel { background: #000; }
    .lsb-panel-header { background: #1c1c1e; border-color: #2c2c2e; color: #fff;}
    .lsb-panel-close { background: #2c2c2e; }
    .lsb-panel-tabs { background: #1c1c1e; }
    .panel-tab-btn { color: #86868b; }
    .panel-tab-btn.active { background: #2c2c2e; color: #fff; }
}