/* Divider line (appears when tool list is scrolled) */
.tool-list-wrap::before{
  content:"";
  position:absolute;
  left:var(--content-x);
  width:var(--content-w);
  top:0;
  height:1px;
  background:#EFEFED;
  opacity:0;
  transition:opacity 300ms linear;
  pointer-events:none;
}
.sidebar.has-list-divider .tool-list-wrap::before{ opacity:1; }
/* dufu.ai — Axure/Notion-like minimal UI */
:root{--sidebar-w:340px;--content-w:275px;--content-x:calc((var(--sidebar-w) - var(--content-w))/2);
  --bg:#ffffff;

  /* From Axure export palette */
  --sidebar-bg: rgb(249,248,247);
  --hover: rgb(241,240,239);
  --active: rgb(235,234,233);
  --divider: rgb(239,239,237);
  --border: rgb(215,215,215);

  --text:#191919;
  --muted:#555555;

  --primary:#2383e2;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --sidebar: 340px;
  --topbar: 64px;
}
*{ box-sizing:border-box; }
html,body{height:100%;
  overflow:hidden;
}
body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg); }
a{ color:inherit; }

.app-shell{ height:100%; display:flex; }

/* Sidebar */
.sidebar{
  width:var(--sidebar);
  background:var(--sidebar-bg);
  border-right:1px solid var(--divider);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:0;
}

.brand{ display:flex; align-items:center; gap:12px; padding:6px 4px; }
.logo{
  width:44px;height:44px;
  border-radius:12px;
  background: rgba(35,131,226,.18);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  color:#1e6ec0;
  font-weight:800;
  margin-bottom:12px;
}
.brand-name{ font-weight:800; font-size:18px; letter-spacing:.2px; line-height:1.1; }
.brand-sub{ font-size:12px; color:var(--muted); margin-top:3px; }

.sidebar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 4px;
  margin-bottom:15px;
}

.tool-list-wrap{
  flex:1;
  min-height:0;
  position:relative;
  overflow:hidden;
  margin-top:0;
  padding-right:0;
  padding-bottom:10px;
}


.action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  color:#222;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  user-select:none;
}
.action-btn:hover{ background: #fafafa; }
.action-btn:active{ transform: translateY(0.5px); }
.action-icon{
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  color:#333;
}
.lang-btn{ min-width: 112px; justify-content:center; }

.lang-wrap{ position:relative; }
.lang-menu{
  position:absolute;
  top:44px;
  left:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  min-width: 220px;
  padding:6px;
  display:none;
  z-index:50;
}
.lang-menu.open{ display:block; }
.lang-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  color:var(--text);
}
.lang-item:hover{ background:var(--hover); }
.flag{
  width:22px;height:22px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#f6f6f6;
  font-size:14px;
}

/* Tool list: only this area scrolls */
.tool-list{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:4px;
  border-radius:12px;
}

.tool-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}
.tool-item:hover{ background:var(--hover); }
.tool-item.active{ background:var(--active); }

.tool-leading{
  width:28px;height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  flex:0 0 auto;
  margin-top:1px;
}
.tool-leading img{ width:20px;height:20px; display:block; }

.sidebar.editing .tool-leading .tool-ico{ display:none; }
.sidebar.editing .tool-leading .drag-ico{ display:block; }
.tool-leading .drag-ico{ display:none; }

.tool-meta{ min-width:0; flex:1; }
.tool-title{ font-weight:800; font-size:16px; line-height:1.2; max-width:240px; }
.tool-desc{ font-size:14px; color:var(--muted); margin-top:8px; line-height:1.25; max-width:240px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }

.tool-item[draggable="true"]{ cursor:grab; }
.tool-item.dragging{ opacity:.60; }
.tool-item.drop-target{ outline: 2px solid rgba(35,131,226,.22); }

/* Main */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; background:#fff; }
.topbar{
  height:var(--topbar);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  background:#fff;
  border-bottom: 1px solid var(--divider);
}
.page-title{ font-weight:900; font-size:18px; }
.page-desc{ font-size:12px; color:var(--muted); margin-top:3px; }
.hint-top{ font-size:12px; color:#9b9b9b; white-space:nowrap; }

.content{ flex:1; min-height:0; padding:0; background:#fff; }
.tool-frame{ width:100%; height:100%; border:0; background:#fff; }

/* Mobile */
.only-mobile{ display:none; }
@media (max-width: 860px){
  :root{ --sidebar: 340px; }
  .only-mobile{ display:inline-flex; }
  .sidebar{
    position:fixed;
    z-index:20;
    left:0; top:0; bottom:0;
    transform: translateX(0);
    transition: transform .2s ease;
    box-shadow: 0 18px 50px rgba(0,0,0,.14);
  }
  .sidebar.is-collapsed{ transform: translateX(-102%); }
  .topbar{ position:sticky; top:0; z-index:10; }
}


/* ===== DUFU Notion-like tuning (v5) ===== */
:root{
  --sidebar: 340px;
}

.sidebar{
  background:#f7f7f5;
  border-right:1px solid #e9e9e7;
  padding:18px 0 12px;
  gap:14px;
}

.brand{
  width:275px;
  margin:0 auto;
  padding:0;
  align-items:center;            /* center brand text block with icon */
  gap:12px;
}

.brand .logo{
  width:48px;
  height:48px;
  border-radius:12px;
  background:transparent;
  border:none;
  overflow:hidden;
}

.brand-icon{
  width:48px;
  height:48px;
  display:block;
}

.brand-name{
  margin:0;
}
.brand-link{
  font-size:18px;
  font-weight:700;
  color:#000000;
  text-decoration:none;
}
.brand-link:hover{ text-decoration:none; }

.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;        /* stack vertically centered vs icon */
}


.brand-word{
  height:24px;
  width:auto;
  display:block;
}

.brand-sub{
  margin-top:6px;
}

.sidebar-actions{
  width:275px;
  margin:2px auto 8px;
  padding:0;
  gap:15px;
  justify-content:space-between;
}

.action-btn{
  width:130px;
  height:40px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid #d9d9d9;
  background:#ffffff;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#222;
  cursor:pointer;
  user-select:none;
}

.action-btn:hover{
  background:#f2f2f2;
}

.action-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.action-ico{
  width:18px;
  height:18px;
  display:block;
}



.tool-item{
  width:300px;
  margin:0 auto 8px;
  padding:10px 13px;             /* 10px top/bottom, dynamic height */
  box-sizing:border-box;
  border-radius:12px;
  align-items:flex-start;
  gap:10px;
}

.tool-item:hover{
  background:#f1f1ef;
}

.tool-item.active{
  background:#e8e8e6;
}

.tool-leading{
  width:24px;
  height:24px;
  background:transparent;
  border-radius:0;
  margin-top:0;
}

.tool-leading img{
  width:24px;
  height:24px;
}

.tool-meta{
  max-width:240px;
}

.tool-title{
  font-size:16px;
  font-weight:600;
  line-height:20px;
  margin:0;
  max-width:240px;
}

.tool-desc{
  margin-top:8px;
  font-size:14px;
  font-weight:400;
  line-height:18px;
  max-width:240px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.tool-list::-webkit-scrollbar{
  width:8px;
}
.tool-list::-webkit-scrollbar-track{
  background:transparent;
}
.tool-list::-webkit-scrollbar-thumb{ background:#D7D7D7; border-radius:12px; }
.tool-list:hover::-webkit-scrollbar-thumb{ background:#7F7F7F; }
.tool-list::-webkit-scrollbar-thumb:active{ background:#7F7F7F; }
.tool-list{ scrollbar-color:#D7D7D7 transparent; }
/* Right content should be pure white; no extra cards */
.frame-shell{
  background:#ffffff;
  border:none;
  border-radius:0;
  box-shadow:none;
}

.topbar{
  padding:16px 22px 14px;
}

.topbar-hint{
  color:#a3a3a3;
}


/* --- v7 tweaks (alignment + scroll + divider) --- */
body{ overflow:hidden; }

.sidebar{ width: var(--sidebar); }

/* Divider between actions and list (Notion-like) */
.sidebar.has-list-divider 
/* Keep list itself aligned; make it fill wrapper */
.tool-list{
  height:100%;
  overflow:auto;
  background: transparent;
  padding: 4px;
  border-radius: 12px;
}

/* Scrollbar: only reacts when hovering/dragging the scrollbar itself */
.tool-list::-webkit-scrollbar{
  width: 10px;
}
.tool-list::-webkit-scrollbar-track{
  background: transparent;
}
.tool-list::-webkit-scrollbar-thumb{
  background: #D7D7D7;
  border-radius: 999px;
  transition: background-color 300ms linear;
}
.tool-list::-webkit-scrollbar-thumb:hover{
  background: #7F7F7F;
}
.tool-list::-webkit-scrollbar-thumb:active{
  background: #7F7F7F;
}

/* Firefox */
.tool-list{
  scrollbar-color: #D7D7D7 transparent;
  scrollbar-width: thin;
}


/* --- v8 fixes: alignment + custom scrollbar + divider placement --- */

/* Prevent page scroll everywhere */
html, body { overflow: hidden !important; }

/* Remove button press "jitter" */
.action-btn:active{ transform:none !important; }

/* Divider line is positioned 15px under the actions area; list starts right after (gap=15 + 1px = 16px) */
.sidebar.has-list-divider 
/* Keep content alignment the same as actions: tool-item is 300px wide but positioned to match 275px content alignment */
.tool-list{
  height: 100%;
  overflow: auto;
  background: transparent;
  padding: 6px 0 0 0;
  border-radius: 0;
}

/* Hide native scrollbars (we render our own) */
.tool-list::-webkit-scrollbar{ width: 0 !important; height: 0 !important; }
.tool-list{ scrollbar-width: none; }

/* Tool item positioning: left edge 20px -> icon aligns with 275px content column */
.tool-item{
  width: 300px;
  margin: 0 0 8px 20px; /* NOT centered; stable alignment even if scrollbar overlays */
  border-radius: 12px;
}

/* Custom scrollbar overlay (allowed to overlap item backgrounds) */
.csb{
  position: absolute;
  top:0;
  right:5px;            /* keep 10px away from sidebar edge */
  width:8px;             /* requested */
  height: 100%;           /* JS will clamp to max 400px */
  pointer-events: none;   /* enabled only when needed */
  display: none;          /* shown by JS when scrollable */
}
.csb-track{
  width: 8px;
  height: 100%;
  background: transparent;
  border-radius: 999px;
  pointer-events: auto;   /* only the scrollbar area triggers hover/active */
}
.csb-thumb{
  width: 8px;
  height: 40px;
  background: #D7D7D7;
  border-radius: 999px;
  transition: background-color 300ms linear;
  transform: translateY(0px);
}
.csb:hover .csb-thumb{ background:#7F7F7F; }
.csb.dragging .csb-thumb{ background:#7F7F7F; }

/* --- v9 visibility fixes --- */
.csb{
  pointer-events: auto !important; /* allow hover/drag */
  z-index: 60 !important;
}
.csb-track{ pointer-events: auto !important; }


/* --- v10 visibility: keep scrollbar visible --- */
.csb{ display:block !important; visibility: visible !important; opacity: 1 !important; }


/* --- v11 typography (Doubao-like) --- */
:root{
  --font-en: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-zh: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ja: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ko: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body{ font-family: var(--font-en); }
html[lang^="zh"] body{ font-family: var(--font-zh); }
html[lang^="ja"] body{ font-family: var(--font-ja); }
html[lang^="ko"] body{ font-family: var(--font-ko); }

/* --- v12 layout locks --- */
html, body { height: 100%; overflow: hidden; }

/* --- v12 topbar typography tweak --- */
.topbar .page-title{ font-weight: 600; }
.topbar .page-desc{ font-weight: 400; }

/* --- v13 fixed scrollbar height --- */
.csb{
  height: 400px;
  top: 50%;
  transform: ;
}
.csb-track{ height: 100%; }

/* --- v17 scroll + flex fixes --- */
.sidebar{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.tool-list-wrap{ flex:1; min-height:0; }
.tool-list{ height:100%; overflow-y:auto; }

/* --- v17 custom scrollbar positioning --- */
.csb{
  position:absolute;
  top: 0;
  right: 5px;
  width: 8px;
  height: 400px; /* JS may clamp to wrap height */
  transform: none;
}
.csb-track{ width: 8px; height: 100%; }
.csb-thumb{
  width: 8px;
  border-radius: 999px;
  background: #D7D7D7;
  transition: background-color 300ms linear;
  will-change: transform, height;
}
.csb:hover .csb-thumb,
.csb.is-active .csb-thumb{ background:#7F7F7F; }

/* --- v17 divider as tool-list-wrap top border --- */
.tool-list-wrap::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:#EFEFED;
  opacity:0;
  transition: opacity 300ms linear;
  pointer-events:none;
}
.tool-list-wrap.has-divider::before{ opacity:1; }

/* --- v17 spacing normalize --- */
.tool-list-wrap{ margin-top: 15px !important; padding-top: 0 !important; }

/* --- v18 tweaks --- */
.tool-list-wrap{ margin-top: 0 !important; }

/* divider x offset + color */
.tool-list-wrap::before{
  left: 20px !important;
  right: 0 !important;
  background: #D1D1D1 !important;
}

/* tool list padding: align top with scrollbar */
.tool-list{
  padding: 0 4px 4px 4px !important;
}

/* --- v19 tweaks --- */
/* divider: full sidebar width, left 0, width 340, color + fade 500ms */
.tool-list-wrap::before{
  left: 0 !important;
  right: auto !important;
  width: 340px !important;
  background: #DDDDDD !important;
  transition: opacity 500ms linear !important;
}

/* scrollbar right inset */
.csb{ right: 4px !important; }