/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button{cursor:pointer;font-family:inherit}
a{text-decoration:none}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#444;border-radius:2px}

/* ── Animations ────────────────────────────────── */
@keyframes voteUp   {0%,100%{transform:scale(1)}35%{transform:scale(1.45) translateY(-2px)}}
@keyframes voteDown {0%,100%{transform:scale(1)}35%{transform:scale(1.45) translateY( 2px)}}

/* ── Design tokens (dark default) ──────────────── */
:root{
  --page-bg: #0d0d0d;
  --bg:      #1a1a1a;
  --chrome:  #242424;
  --sidebar: #1e1e1e;
  --fg:      #d4d4d4;
  --fg-soft: #a8a8a8;
  --accent:  #5fb3a1;
  --dim:     #8a8a8a;
  --measure: 640px;
  --bd:      #2c2c2c;
  --tag-bd:  #333333;
  --red:     #e05a4e;
  --cat-active-bg: #252525;
}
[data-theme="light"]{
  --page-bg: #e8e8e4;
  --bg:      #f5f4ef;
  --chrome:  #e5e4df;
  --sidebar: #ededea;
  --fg:      #2a2a2a;
  --fg-soft: #555555;
  --dim:     #6f6f6f;
  --bd:      #dddddd;
  --tag-bd:  #cccccc;
  --cat-active-bg: #e4e4e0;
}

/* ── Page frame (desktop) ───────────────────────── */
body{
  background:var(--page-bg);
  font-family:'JetBrains Mono','Maple Mono','Fira Code','Menlo','PingFang SC','Hiragino Sans GB','Microsoft YaHei',monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:32px;
}

/* ── App window (desktop) ───────────────────────── */
#app{
  width:960px;
  height:680px;
  background:var(--bg);
  color:var(--fg);
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--bd);
  box-shadow:0 28px 72px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition:width .3s ease,height .3s ease,border-radius .3s ease;
}
#app.maximized{width:calc(100vw - 64px);height:calc(100vh - 64px);border-radius:4px}
[data-theme="light"] #app{box-shadow:0 8px 36px rgba(0,0,0,.12)}

/* ── Window chrome ──────────────────────────────── */
.window-chrome{
  background:var(--chrome);
  padding:11px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
}
.chrome-dots{display:flex;gap:8px}
.chrome-dot{width:12px;height:12px;border-radius:50%}
.chrome-dot-r{background:#ff5f57}
.chrome-dot-y{background:#febc2e}
.chrome-dot-g{background:#28c840;cursor:pointer}
.chrome-title{font-size:12px;color:var(--dim)}

/* ── Three-column layout ────────────────────────── */
.columns{
  display:flex;
  flex:1;
  overflow:hidden;
  min-height:0;
}

/* LEFT sidebar */
.col-left{
  width:138px;
  flex-shrink:0;
  background:var(--sidebar);
  border-right:1px solid var(--bd);
  display:flex;
  flex-direction:column;
}

/* MAIN column */
.col-main{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* RIGHT sidebar */
.col-right{
  width:162px;
  flex-shrink:0;
  background:var(--sidebar);
  border-left:1px solid var(--bd);
  display:flex;
  flex-direction:column;
}
.col-right-top{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* ── Sidebar shared ─────────────────────────────── */
.sidebar-hdr{
  padding:14px 14px 10px;
  font-size:9px;
  color:var(--dim);
  letter-spacing:2px;
  text-transform:uppercase;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
}

/* ── Category nav (desktop) ─────────────────────── */
.cat-nav{padding-top:6px}
.cat-btn{
  width:100%;
  background:none;
  border:none;
  border-left:2px solid transparent;
  color:var(--dim);
  padding:8px 14px;
  font-size:12px;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cat-btn:hover{color:var(--fg)}
.cat-btn.active{background:var(--cat-active-bg);border-left-color:var(--accent);color:var(--accent)}
.cat-count{font-size:10px;opacity:.7}

/* ── Brief header ───────────────────────────────── */
.brief-hdr{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
}
.prompt-line{font-size:12px;margin-bottom:10px;color:var(--fg)}
.c-accent{color:var(--accent)}
.c-dim{color:var(--dim)}
.brief-block{border-left:3px solid var(--accent);padding-left:12px}
.brief-title{color:var(--accent);font-weight:700;font-size:15px;letter-spacing:.5px}
.brief-meta{font-size:11px;color:var(--dim);margin-top:4px}

/* ── Active category label ──────────────────────── */
.active-label{
  padding:8px 22px;
  border-bottom:1px solid var(--bd);
  font-size:11px;
  color:var(--dim);
  flex-shrink:0;
}

/* ── News items ─────────────────────────────────── */
.item{border-bottom:1px solid var(--bd)}
.item:last-child{border-bottom:none}

.item-row{
  padding:13px 22px;
  cursor:pointer;
  display:flex;
  gap:11px;
  align-items:flex-start;
}
.item-row:hover{background:rgba(95,179,161,.04)}

.item-idx{color:var(--dim);font-size:11px;min-width:20px;flex-shrink:0;margin-top:3px}
.item-body{flex:1;min-width:0}

.item-title-en{color:var(--accent);font-size:14px;line-height:1.5;margin-bottom:4px;max-width:var(--measure)}
.item-title-en a{color:inherit;text-decoration:none}
.item-title-en a:hover{text-decoration:underline;text-underline-offset:3px}
.item-title-zh{color:var(--fg-soft);font-size:12px;line-height:1.6;margin-bottom:7px;max-width:var(--measure)}

.item-meta-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cat-badge{border:1px solid var(--tag-bd);color:var(--dim);padding:1px 6px;font-size:10px;border-radius:2px;flex-shrink:0}
.source-time{color:var(--dim);font-size:11px}
.votes{margin-left:auto;display:flex;gap:5px}

.vote-btn{
  background:none;
  border:1px solid var(--tag-bd);
  color:var(--dim);
  padding:1px 7px;
  font-size:11px;
  border-radius:2px;
  transition:all .12s;
  user-select:none;
  display:inline-block;
}
.vote-btn:hover{border-color:var(--fg);color:var(--fg)}
.vote-btn.voted-up{border-color:var(--accent);background:#5fb3a118;color:var(--accent)}
.vote-btn.voted-dn{border-color:var(--red);background:#e05a4e18;color:var(--red)}
.vote-up  {animation:voteUp   .3s ease}
.vote-down{animation:voteDown .3s ease}

.item-tags{margin-top:5px;font-size:10px;color:var(--dim);opacity:.75}

.expand-arrow{
  color:var(--dim);
  font-size:11px;
  flex-shrink:0;
  margin-top:2px;
  transition:transform .2s;
  display:inline-block;
}
.item.expanded .expand-arrow{transform:rotate(90deg)}

/* ── Expand animation ───────────────────────────── */
.item-summary{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .3s ease,opacity .2s ease;
}
.item.expanded .item-summary{max-height:400px;opacity:1}
.item-summary-inner{padding:0 22px 16px 53px}
.summary-en{font-size:13px;line-height:1.8;color:var(--fg);margin-bottom:8px;max-width:var(--measure)}
.summary-zh{font-size:12px;line-height:1.8;color:var(--fg-soft);max-width:var(--measure)}
.summary-zh::before{content:'# '}


/* ── Archive list ───────────────────────────────── */
.archive-list{flex:1;overflow-y:auto;padding:6px 0}
.archive-date{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px 4px 14px;
  font-size:12px;
  color:var(--dim);
  transition:color .1s;
}
.archive-date:hover{color:var(--accent)}

/* ── Inferred prefs panel ───────────────────────── */
.prefs-panel{border-top:1px solid var(--bd);flex-shrink:0}
.prefs-body{padding:10px 14px 8px}
.prefs-hdr{font-size:9px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:7px}
.prefs-hint{font-size:10px;color:var(--dim);line-height:1.7}
.prefs-group{font-size:8px;color:var(--dim);opacity:.6;margin-bottom:4px;letter-spacing:.5px}
.prefs-group.mt{margin-top:6px}
.prefs-row{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.prefs-tag{font-size:10px;color:var(--dim);width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.prefs-bar{font-size:9px;letter-spacing:-1px;line-height:1}
.prefs-bar.boost{color:var(--accent)}
.prefs-bar.filter{color:var(--red)}
.prefs-div{border-top:1px solid var(--bd);margin:8px 0 6px}
.prefs-explore{font-size:10px;color:var(--dim)}
.prefs-seren{font-size:9px;color:var(--dim);opacity:.5;margin-top:2px;line-height:1.5}
.prefs-next{font-size:9px;color:var(--dim);margin-top:7px}

/* ── Status bar ─────────────────────────────────── */
.status-bar{
  padding:10px 14px 12px;
  border-top:1px solid var(--bd);
  flex-shrink:0;
  font-size:10px;
  line-height:1.9;
}

/* ── Theme button ───────────────────────────────── */
.theme-btn{
  background:none;
  border:1px solid var(--bd);
  color:var(--dim);
  padding:2px 10px;
  border-radius:4px;
  font-size:11px;
}
.theme-btn:hover{color:var(--fg);border-color:var(--dim)}

/* ── Mobile-only elements (hidden on desktop) ───── */
.mobile-header,.cat-tabs,.mobile-nav{display:none}
.sheet,.sheet-backdrop{display:none}

/* ── Mobile (< 860px) ───────────────────────────── */
@media (max-width:860px){
  body{padding:0;align-items:stretch}

  #app{
    width:100%;
    height:100svh;
    border-radius:0;
    border:none;
    box-shadow:none;
  }

  /* hide desktop-only */
  .window-chrome,.col-left,.col-right{display:none}

  /* show mobile elements */
  .mobile-header{
    display:flex;
    background:var(--chrome);
    padding:11px 16px;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--bd);
    flex-shrink:0;
  }
  .mobile-title{font-size:13px;color:var(--dim)}

  .cat-tabs{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    background:var(--sidebar);
    border-bottom:1px solid var(--bd);
    flex-shrink:0;
  }
  .cat-tabs::-webkit-scrollbar{display:none}

  .cat-tab{
    flex-shrink:0;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    color:var(--dim);
    padding:9px 14px;
    font-size:12px;
  }
  .cat-tab.active{border-bottom-color:var(--accent);color:var(--accent)}

  /* main column adjustments */
  .brief-hdr{padding:14px 16px 10px}
  .prompt-line{font-size:11px}
  .brief-title{font-size:14px}
  .brief-meta{font-size:10px}
  .active-label{padding:7px 16px}
  .item-row{padding:12px 16px}
  .item-summary-inner{padding:0 16px 14px 44px}

  /* mobile bottom nav */
  .mobile-nav{
    display:flex;
    border-top:1px solid var(--bd);
    background:var(--sidebar);
    flex-shrink:0;
  }
  .mobile-nav button{
    flex:1;
    background:none;
    border:none;
    color:var(--dim);
    padding:13px;
    font-size:11px;
  }
  .mobile-nav button:first-child{border-right:1px solid var(--bd)}

  /* bottom sheets */
  .sheet-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:50;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
  }
  .sheet-backdrop.visible{opacity:1;pointer-events:auto}

  .sheet{
    display:flex;
    flex-direction:column;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:51;
    background:var(--sidebar);
    border-top:1px solid var(--bd);
    border-radius:10px 10px 0 0;
    max-height:70vh;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .sheet.open{transform:translateY(0)}

  .sheet-hdr{
    padding:12px 18px 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
    border-bottom:1px solid var(--bd);
  }
  .sheet-title{font-size:9px;color:var(--dim);letter-spacing:2px;text-transform:uppercase}
  .sheet-close{background:none;border:none;color:var(--dim);font-size:20px;line-height:1}
  .sheet-body{overflow-y:auto;flex:1}
}