/* ══════════════════════════════════════════════
   ROOT — LivePulse News Widget
   Designed to work standalone OR embedded via
   <iframe src="news-widget.html" ...>
══════════════════════════════════════════════ */
:root {
  --bg:        #0f1117;
  --bg2:       #161923;
  --bg3:       #1e2433;
  --surface:   #1a1f2e;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.04);
  --accent:    #3b82f6;
  --accent2:   #60a5fa;
  --red:       #ef4444;
  --amber:     #f59e0b;
  --green:     #10b981;
  --purple:    #8b5cf6;
  --pink:      #ec4899;
  --text:      #f1f5f9;
  --text2:     #94a3b8;
  --text3:     #475569;
  --r:         8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
  overflow:hidden;
  height:100vh;
  display:flex;
  flex-direction:column;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:2px}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:'Inter',sans-serif}

/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
.widget-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  position:relative;overflow:hidden;
}
.widget-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:header-shimmer 3s linear infinite;
}
@keyframes header-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.wh-logo{
  display:flex;align-items:center;gap:5px;
  font-size:13px;font-weight:800;letter-spacing:-.3px;
  color:var(--text);flex-shrink:0;
}
.wh-logo .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:live-pulse .8s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{opacity:1;box-shadow:0 0 8px var(--red)}50%{opacity:.4;box-shadow:0 0 3px var(--red)}}
.wh-live{
  background:var(--red);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:1px;
  padding:2px 6px;border-radius:3px;
  animation:live-badge .8s ease-in-out infinite alternate;
}
@keyframes live-badge{from{opacity:.7}to{opacity:1}}
.wh-time{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--text3);
  margin-left:auto;flex-shrink:0;
}
.wh-refresh{
  width:22px;height:22px;border-radius:4px;
  background:transparent;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text3);transition:all .2s;
  flex-shrink:0;padding:0;
}
.wh-refresh:hover{background:var(--bg3);color:var(--text);border-color:var(--accent)}
.wh-refresh.spinning svg{animation:spin .6s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════
   BREAKING TICKER
══════════════════════════════════════════════ */
.breaking-bar{
  display:flex;align-items:center;gap:0;
  background:var(--red);
  flex-shrink:0;
  overflow:hidden;height:26px;
}
.breaking-label{
  background:rgba(0,0,0,0.25);
  padding:0 12px;height:100%;
  display:flex;align-items:center;
  font-size:9px;font-weight:800;letter-spacing:2px;
  white-space:nowrap;flex-shrink:0;color:#fff;
}
.breaking-ticker{
  flex:1;overflow:hidden;
  display:flex;align-items:center;
  padding:0 12px;
}
.breaking-inner{
  white-space:nowrap;font-size:11px;font-weight:600;color:#fff;
  animation:ticker-scroll 40s linear infinite;display:inline-block;
}
@keyframes ticker-scroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.breaking-inner .sep{margin:0 20px;opacity:.5;}

/* ══════════════════════════════════════════════
   CATEGORY TABS
══════════════════════════════════════════════ */
.tabs{
  display:flex;gap:0;
  padding:0 8px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  padding:8px 10px;
  background:transparent;border:none;
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all .2s;white-space:nowrap;flex-shrink:0;
}
.tab-btn:hover{color:var(--text2)}
.tab-btn.active{color:var(--accent2);border-bottom-color:var(--accent)}

/* ══════════════════════════════════════════════
   NEWS FEED
══════════════════════════════════════════════ */
.news-feed{
  flex:1;overflow-y:auto;
  padding:6px 0;
  position:relative;
}
.news-feed::-webkit-scrollbar{width:3px}
.news-feed::-webkit-scrollbar-thumb{background:var(--bg3)}

/* Loading state */
.loading-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:10px;color:var(--text3);font-size:11px;
}
.loader{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}

/* Error state */
.error-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:8px;color:var(--text3);font-size:11px;text-align:center;padding:16px;
}
.error-state .err-icon{font-size:28px;opacity:.4}

/* News Card */
.news-card{
  padding:10px 14px;
  border-bottom:1px solid var(--border2);
  cursor:pointer;transition:background .15s;
  animation:card-in .3s ease;
  position:relative;overflow:hidden;
}
.news-card:last-child{border-bottom:none}
.news-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cat-color,var(--accent));
  transform:scaleY(0);transition:transform .2s;
}
.news-card:hover{background:var(--surface)}
.news-card:hover::before{transform:scaleY(1)}
@keyframes card-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.news-card.new-item::after{
  content:'NEW';position:absolute;right:10px;top:10px;
  background:var(--green);color:#fff;
  font-size:8px;font-weight:800;letter-spacing:1px;
  padding:1px 5px;border-radius:2px;
  animation:new-fade 4s ease forwards;
}
@keyframes new-fade{0%,70%{opacity:1}100%{opacity:0}}

.nc-meta{
  display:flex;align-items:center;gap:5px;margin-bottom:4px;flex-wrap:wrap;
}
.nc-cat{
  font-size:8.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:1.5px 6px;border-radius:2px;
}
.nc-source{font-size:9.5px;color:var(--text3);font-weight:500}
.nc-time{font-size:9px;color:var(--text3);margin-left:auto;white-space:nowrap}
.nc-headline{
  font-size:12px;font-weight:600;line-height:1.5;
  color:var(--text);margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nc-headline:hover{color:var(--accent2)}
.nc-desc{
  font-size:11px;color:var(--text2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nc-footer{
  display:flex;align-items:center;gap:8px;margin-top:6px;
}
.nc-read{
  font-size:9px;color:var(--accent2);font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;
}
.nc-read:hover{text-decoration:underline}
.nc-breaking{
  font-size:8px;font-weight:800;letter-spacing:1px;
  color:var(--red);text-transform:uppercase;
  background:rgba(239,68,68,0.1);padding:1px 6px;border-radius:2px;
}

/* Category colour themes */
.cat-world    {--cat-color:#3b82f6;background:rgba(59,130,246,0.12);color:#60a5fa}
.cat-tech     {--cat-color:#8b5cf6;background:rgba(139,92,246,0.12);color:#a78bfa}
.cat-sports   {--cat-color:#10b981;background:rgba(16,185,129,0.12);color:#34d399}
.cat-business {--cat-color:#f59e0b;background:rgba(245,158,11,0.12);color:#fbbf24}
.cat-science  {--cat-color:#06b6d4;background:rgba(6,182,212,0.12);color:#22d3ee}
.cat-health   {--cat-color:#ec4899;background:rgba(236,72,153,0.12);color:#f472b6}
.cat-politics {--cat-color:#ef4444;background:rgba(239,68,68,0.12);color:#f87171}
.cat-india    {--cat-color:#f97316;background:rgba(249,115,22,0.12);color:#fb923c}

/* ══════════════════════════════════════════════
   FOOTER / STATUS BAR
══════════════════════════════════════════════ */
.widget-footer{
  padding:5px 14px;
  background:var(--bg2);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.wf-status{font-size:9px;color:var(--text3);display:flex;align-items:center;gap:5px}
.wf-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:live-pulse .8s infinite}
.wf-count{font-size:9px;color:var(--text3)}
.wf-progress{
  flex:1;max-width:60px;height:2px;
  background:var(--border);border-radius:1px;overflow:hidden;margin:0 8px;
}
.wf-fill{
  height:100%;background:var(--accent);border-radius:1px;
  animation:progress-bar 60s linear infinite;
}
@keyframes progress-bar{from{width:0%}to{width:100%}}

/* ══════════════════════════════════════════════
   DEMO STANDALONE PAGE WRAPPER
   (shown when NOT in iframe)
══════════════════════════════════════════════ */
.demo-wrapper{
  display:none; /* hidden by default, shown in standalone mode */
  position:fixed;inset:0;
  background:linear-gradient(135deg,#0a0e1a,#0f1117,#0a1628);
  overflow:auto;padding:20px;
  align-items:flex-start;justify-content:center;
  gap:24px;flex-wrap:wrap;
}

.widget-container{
  width:360px;height:580px;
  border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.03);
}

.embed-info{
  max-width:360px;padding:20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;color:var(--text2);
}
.embed-info h3{color:var(--text);font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.embed-info code{
  display:block;background:var(--bg);padding:10px 12px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent2);
  margin-top:8px;border:1px solid var(--border);word-break:break-all;line-height:1.6;
}
.embed-info p{font-size:11px;margin-top:8px;line-height:1.6}
.copy-btn{
  margin-top:10px;padding:6px 14px;
  background:var(--accent);color:#fff;border:none;border-radius:5px;
  font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;
}
.copy-btn:hover{background:var(--accent2)}

/* When body itself is the widget (iframe embed) */
body.embedded{background:transparent;overflow:hidden}
body.embedded .demo-wrapper{display:none!important}

/* standalone shows demo wrapper */
body.standalone .demo-wrapper{display:flex}
body.standalone{overflow:auto}