/* ═══════════════════════════════════════════════
   优品优语 全局工具侧边栏 Global Sidebar
   前缀: gsb- (Global SideBar) 避免与页面样式冲突
   ═══════════════════════════════════════════════ */

:root{
  --gsb-width:240px;
  --gsb-collapsed-width:60px;
  --gsb-bg:#ffffff;
  --gsb-border:#e8ebf0;
  --gsb-text:#1a1a2e;
  --gsb-text2:#666;
  --gsb-text3:#999;
  --gsb-primary:#2b6cff;
  --gsb-purple:#8b5cf6;
  --gsb-hover-bg:#f0f4ff;
  --gsb-active-bg:linear-gradient(90deg,rgba(139,92,246,.08),rgba(43,108,255,.05));
  --gsb-shadow:0 2px 12px rgba(0,0,0,.08);
  --gsb-radius:12px;
  --gsb-transition:all .25s cubic-bezier(.4,0,.2,1);
}

/* ===== 侧边栏主体 ===== */
.gsb-sidebar{
  position:fixed;
  top:0;
  left:0;
  width:var(--gsb-width);
  height:100vh;
  background:var(--gsb-bg);
  border-right:1px solid var(--gsb-border);
  z-index:9998;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, width .3s ease;
  overflow:hidden;
}

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

/* ===== 侧边栏头部 ===== */
.gsb-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--gsb-border);
  flex-shrink:0;
  min-height:56px;
}

.gsb-logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:var(--gsb-text);
  white-space:nowrap;
  overflow:hidden;
}

.gsb-logo .gsb-logo-dot{
  width:24px;
  height:24px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--gsb-primary),var(--gsb-purple));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex-shrink:0;
}

.gsb-collapse-btn{
  background:none;
  border:none;
  font-size:16px;
  cursor:pointer;
  color:var(--gsb-text2);
  padding:4px 6px;
  border-radius:6px;
  transition:.2s;
  flex-shrink:0;
  line-height:1;
}

.gsb-collapse-btn:hover{
  background:var(--gsb-hover-bg);
  color:var(--gsb-primary);
}

.gsb-collapsed .gsb-logo span{
  display:none;
}

/* ===== 快捷入口 ===== */
.gsb-quick-links{
  padding:8px 8px;
  border-bottom:1px solid var(--gsb-border);
  flex-shrink:0;
}

.gsb-quick-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  color:var(--gsb-text2);
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
  white-space:nowrap;
  overflow:hidden;
}

.gsb-quick-link:hover{
  background:var(--gsb-hover-bg);
  color:var(--gsb-primary);
}

.gsb-quick-link .gsb-icon{
  font-size:15px;
  width:20px;
  text-align:center;
  flex-shrink:0;
}

.gsb-collapsed .gsb-quick-link{
  justify-content:center;
  padding:9px 0;
}

.gsb-collapsed .gsb-quick-link span:not(.gsb-icon){
  display:none;
}

/* ===== 导航列表区 ===== */
.gsb-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 0;
}

.gsb-nav::-webkit-scrollbar{
  width:4px;
}

.gsb-nav::-webkit-scrollbar-track{
  background:transparent;
}

.gsb-nav::-webkit-scrollbar-thumb{
  background:var(--gsb-border);
  border-radius:2px;
}

/* ===== 分类 ===== */
.gsb-category{
  margin-bottom:2px;
}

.gsb-category-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--gsb-text);
  transition:.2s;
  user-select:none;
  white-space:nowrap;
  overflow:hidden;
}

.gsb-category-header:hover{
  background:var(--gsb-hover-bg);
}

.gsb-category-header .gsb-cat-icon{
  font-size:16px;
  width:20px;
  text-align:center;
  flex-shrink:0;
}

.gsb-category-header .gsb-cat-name{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gsb-category-header .gsb-cat-arrow{
  font-size:10px;
  color:var(--gsb-text3);
  transition:transform .25s ease;
  flex-shrink:0;
}

.gsb-category.gsb-open .gsb-category-header .gsb-cat-arrow{
  transform:rotate(90deg);
}

.gsb-collapsed .gsb-category-header{
  justify-content:center;
  padding:10px 0;
}

.gsb-collapsed .gsb-category-header .gsb-cat-name,
.gsb-collapsed .gsb-category-header .gsb-cat-arrow{
  display:none;
}

/* ===== 工具列表 ===== */
.gsb-tools{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}

.gsb-category.gsb-open .gsb-tools{
  max-height:2000px;
}

.gsb-tool-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px 8px 46px;
  font-size:12.5px;
  color:var(--gsb-text2);
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
  border-left:3px solid transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
}

.gsb-tool-link:hover{
  background:var(--gsb-hover-bg);
  color:var(--gsb-primary);
}

.gsb-tool-link.gsb-active{
  background:var(--gsb-active-bg);
  color:var(--gsb-purple);
  border-left-color:var(--gsb-purple);
  font-weight:600;
}

.gsb-tool-link .gsb-tool-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gsb-text3);
  flex-shrink:0;
}

.gsb-tool-link.gsb-active .gsb-tool-dot{
  background:var(--gsb-purple);
}

.gsb-collapsed .gsb-tools{
  display:none !important;
}

/* ===== 底部 ===== */
.gsb-footer{
  padding:10px 16px;
  border-top:1px solid var(--gsb-border);
  font-size:11px;
  color:var(--gsb-text3);
  text-align:center;
  flex-shrink:0;
  white-space:nowrap;
  overflow:hidden;
}

.gsb-collapsed .gsb-footer{
  display:none;
}

/* ===== 移动端遮罩 ===== */
.gsb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:9997;
  backdrop-filter:blur(2px);
}

.gsb-overlay.gsb-show{
  display:block;
}

/* ===== 汉堡按钮 ===== */
.gsb-hamburger{
  display:none;
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
  color:var(--gsb-text2);
  line-height:1;
  border-radius:6px;
  transition:.2s;
}

.gsb-hamburger:hover{
  background:var(--gsb-hover-bg);
  color:var(--gsb-primary);
}

/* ===== 页面内容偏移（桌面端） ===== */
body.gsb-with-sidebar{
  margin-left:var(--gsb-width);
}

body.gsb-with-sidebar.gsb-sidebar-collapsed{
  margin-left:var(--gsb-collapsed-width);
}

/* 对有 topbar / header / app-header 的页面，调整宽度（兼容三种头部写法） */
body.gsb-with-sidebar .topbar,
body.gsb-with-sidebar .header,
body.gsb-with-sidebar .app-header{
  left:var(--gsb-width);
  width:calc(100% - var(--gsb-width));
}

body.gsb-with-sidebar.gsb-sidebar-collapsed .topbar,
body.gsb-with-sidebar.gsb-sidebar-collapsed .header,
body.gsb-with-sidebar.gsb-sidebar-collapsed .app-header{
  left:var(--gsb-collapsed-width);
  width:calc(100% - var(--gsb-collapsed-width));
}

/* ===== 移动端适配 ===== */
@media(max-width:768px){
  .app-layout > .main-content,
  .main-content{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .gsb-sidebar{
    transform:translateX(-100%);
    width:260px !important;
    box-shadow:4px 0 24px rgba(0,0,0,.12);
  }

  .gsb-sidebar.gsb-mobile-open{
    transform:translateX(0);
  }

  .gsb-hamburger{
    display:inline-flex !important;
    align-items:center;
  }

  body.gsb-with-sidebar,
  body.gsb-with-sidebar.gsb-sidebar-collapsed{
    margin-left:0 !important;
  }

  body.gsb-with-sidebar .topbar,
  body.gsb-with-sidebar.gsb-sidebar-collapsed .topbar,
  body.gsb-with-sidebar .header,
  body.gsb-with-sidebar.gsb-sidebar-collapsed .header,
  body.gsb-with-sidebar .app-header,
  body.gsb-with-sidebar.gsb-sidebar-collapsed .app-header{
    left:0 !important;
    width:100% !important;
  }

  .gsb-collapse-btn{
    display:none;
  }
}

/* ===== content-factory 内部tab栏样式 ===== */
.gsb-inner-tabs{
  display:flex;
  gap:4px;
  margin-bottom:20px;
  border-bottom:1px solid var(--gsb-border);
  padding-bottom:0;
  overflow-x:auto;
  flex-wrap:nowrap;
}

.gsb-inner-tab{
  padding:8px 16px;
  font-size:13px;
  color:var(--gsb-text2);
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:.2s;
  white-space:nowrap;
  background:none;
  border-top:none;
  border-left:none;
  border-right:none;
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:6px;
}

.gsb-inner-tab:hover{
  color:var(--gsb-text);
}

.gsb-inner-tab.gsb-active{
  color:var(--gsb-purple);
  border-bottom-color:var(--gsb-purple);
  font-weight:600;
}

.gsb-inner-tab .gsb-tab-icon{
  font-size:14px;
}

@media(max-width:768px){
  .gsb-inner-tabs{
    padding:0 4px;
  }
  .gsb-inner-tab{
    padding:8px 12px;
    font-size:12px;
  }
}


/* ===== 全局布局溢出保护 ===== */
.app-layout > .main-content{
  min-width:0;
  overflow-x:hidden;
  word-break:break-word;
}