/* ===== Bell + Panel ===== */
#ru-bell-wrap{
  position:fixed;left:18px;bottom:18px;z-index:10060;
  display:flex;gap:10px;align-items:center
}
#ru-bell{
  width:52px;height:52px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#0f172a;color:#fff;cursor:pointer;position:relative;
  box-shadow:0 12px 30px rgba(2,6,23,.35);
  transition:transform .18s ease, box-shadow .18s ease
}
#ru-bell:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(2,6,23,.42)}
#ru-bell svg{width:24px;height:24px}

/* BADGE */
#ru-badge{
  position:absolute;inset:auto 0 0 auto;
  top:0;right:0;
  transform:translate(25%,-25%);
  min-width:26px;height:26px;padding:0 8px;
  border-radius:999px;background:#ef4444;color:#fff;
  font:800 14px/26px ui-sans-serif,system-ui;
  text-align:center;box-shadow:0 4px 10px rgba(239,68,68,.5);
  display:none;pointer-events:none
}

@keyframes ru-shake{
  0%{transform:rotate(0)}20%{transform:rotate(-15deg)}40%{transform:rotate(10deg)}
  60%{transform:rotate(-10deg)}80%{transform:rotate(5deg)}100%{transform:rotate(0)}
}
#ru-bell.shake svg{animation:ru-shake 1s ease-in-out infinite}

#ru-more{display:none;padding:8px 10px;border-radius:999px;background:#0f172a;color:#fff;font-size:13px;cursor:pointer;box-shadow:0 10px 25px rgba(2,6,23,.25);opacity:.92}
#ru-more:hover{opacity:1}

#ru-panel{
  position:fixed;left:18px;bottom:82px;z-index:10061;width:min(560px,94vw);
  max-height:72vh;overflow:auto;background:#fff;border-radius:14px;
  box-shadow:0 22px 60px rgba(2,6,23,.32);display:none
}
#ru-panel header{
  position:sticky;top:0;background:#fff;padding:12px 14px;border-bottom:1px solid #e5e7eb;
  display:flex;align-items:center;justify-content:space-between;z-index:1
}
#ru-h-title{font-weight:700}
.ru-h-sub{font-size:12px;color:#6b7280}
.ru-btn{font-size:13px;padding:6px 10px;border:0;border-radius:8px;background:#f3f4f6;cursor:pointer}
.ru-btn:hover{background:#e5e7eb}
.ru-close{background:transparent;opacity:.7}.ru-close:hover{opacity:1}

#ru-list{list-style:none;margin:0;padding:0}
#ru-list li a{
  display:flex;gap:12px;padding:12px 14px;text-decoration:none;color:inherit;
  border-bottom:1px dashed #eef2f7;align-items:flex-start
}
#ru-list li:last-child a{border-bottom:0}

.ru-ico{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.ru-ico.page{background:#eff6ff;color:#1d4ed8}
.ru-ico.book{background:#ecfdf5;color:#047857}
.ru-ico.chapter{background:#fef3c7;color:#b45309}
.ru-ico.shelf{background:#f5f3ff;color:#7c3aed}
.ru-ico svg{width:20px;height:20px;display:block}

.ru-main{flex:1;min-width:0}
.ru-ttl{font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ru-sub{font-size:12px;color:#6b7280;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ru-chip{font-size:11px;padding:3px 8px;border-radius:999px;background:#f3f4f6;color:#111827;white-space:nowrap}
.ru-unread{width:10px;height:10px;border-radius:50%;background:#ef4444;margin-left:8px;display:inline-block}
.ru-dept{font-size:10px;padding:2px 6px;border-radius:999px;background:#eef2ff;color:#3730a3;margin-left:6px}

#ru-load{display:none;width:100%;border:0;border-top:1px solid #eef2f7;background:#f8fafc;padding:10px 14px;font-weight:700;cursor:pointer}
#ru-load:hover{background:#f1f5f9}

.ru-new{margin-left:8px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:999px;background:#fee2e2;color:#b91c1c}


.ru-hide{display:none !important}
#ru-more { display: none !important; }
@media(max-width:640px){#ru-more{display:none !important}#ru-panel{bottom:76px}}