/* Ottocast AI 主控制台外壳:参考领星 ERP 的布局(左侧图标栏 + 悬浮二级菜单 + 顶部页签栏 + 页面工具栏 + 卡片内容区),
   颜色沿用 Ottocast 青绿主题。最后加载,覆盖 a48 原有的 header/tabs/sidebar 布局。 */
:root {
  --rail-w: 64px; --fly-w: 188px; --top-h: 44px;
  --rail-bg: #0d3532; --rail-ink: #b9d6d1; --rail-active: #00897b;
  --canvas: #eef4f3; --card-line: #e1ecea; --head-ink: #1d2b29;
}
html, body { height: 100%; }
body { overflow: hidden; background: var(--canvas); font-size: 13px; }

.shell { display: flex; height: 100vh; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin-left .18s; }

/* ---- 左侧图标栏 ---- */
.rail { position: relative; z-index: 12; flex: 0 0 var(--rail-w); display: flex; flex-direction: column; align-items: center; background: var(--rail-bg); color: var(--rail-ink); }
.rail-logo { display: grid; place-items: center; width: 100%; height: var(--top-h); }
.rail-logo img { width: 30px; height: 30px; border-radius: 8px; background: #fff; }
.rail-menu { flex: 1; width: 100%; overflow-y: auto; padding-top: 4px; scrollbar-width: none; }
.rail-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 62px; color: var(--rail-ink); font-size: 12px; }
.rail-item > b { font-size: 17px; line-height: 1; font-weight: 400; }
.rail-item:hover, .rail-item.hover { color: #fff; background: #ffffff12; }
.rail-item.active { color: #fff; background: #ffffff1a; }
.rail-item.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #4dd0c0; }
.rail-item.active > b { color: #6fe0d2; }
.rail-pin { width: 100%; height: 48px; color: var(--rail-ink); font-size: 18px; }
.rail-pin:hover { color: #fff; }
.shell.pinned .rail-pin { color: #6fe0d2; }

/* ---- 二级菜单(悬浮;固定后常驻) ---- */
.flyout { position: fixed; z-index: 11; top: 0; bottom: 0; left: var(--rail-w); width: var(--fly-w); overflow-y: auto; padding: 0 0 20px; background: #fff; border-right: 1px solid var(--card-line); box-shadow: 6px 0 18px #0d353214; transform: translateX(-110%); opacity: 0; pointer-events: none; transition: transform .16s, opacity .16s; }
.flyout.open, .shell.pinned .flyout { transform: none; opacity: 1; pointer-events: auto; }
.shell.pinned .flyout { box-shadow: none; }
.shell.pinned .shell-main { margin-left: var(--fly-w); }
.fly-panel { display: none; }
.fly-panel.show { display: block; }
.flyout .fly-head { display: flex; align-items: center; width: 100%; height: var(--top-h); min-height: 0; margin: 0 0 4px; padding: 0 18px; border: 0; border-bottom: 1px solid #eef3f2; border-radius: 0; background: none; color: var(--head-ink); font-size: 14px; font-weight: 700; text-align: left; }
.flyout button.fly-head:hover { color: var(--teal-dark); background: none; }
.flyout button.fly-head.active { background: none; color: var(--teal-dark); }
.fly-group { margin: 0; padding: 6px 0 4px; border: 0; }
.flyout .fly-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 4px; color: #8d9b99; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.flyout .fly-label button { color: var(--teal); font-size: 16px; line-height: 1; }
.flyout .nav-item, .flyout .nav-link, .flyout .agent-subnav .agent {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; padding: 6px 18px 6px 26px;
  border: 0; border-radius: 0; background: none; color: #33413f; font-size: 13px; font-weight: 400; text-align: left; text-decoration: none;
}
.flyout .nav-item > b, .flyout .nav-item > i { display: none; }
.flyout .nav-item:hover, .flyout .nav-link:hover, .flyout .agent-subnav .agent:hover { color: var(--teal-dark); background: var(--mint); }
.flyout .nav-item.active, .flyout .nav-link.active, .flyout .agent-subnav .agent.active { color: var(--teal-dark); background: var(--pale); font-weight: 600; box-shadow: inset 3px 0 0 var(--teal); }
.flyout .agent-subnav { margin: 0; padding: 6px 0 4px; border: 0; }
.flyout .agent-subnav .agent span { display: flex; flex-direction: column; min-width: 0; }
.flyout .agent-subnav .agent small { color: #94a3a1; font-size: 11px; font-weight: 400; }
.flyout .nav-children { display: block !important; }

/* ---- 顶部栏:品牌 + 页签 + 右侧操作 ---- */
.topbar { position: relative; z-index: 6; flex: 0 0 var(--top-h); display: flex; align-items: flex-end; gap: 14px; height: var(--top-h); padding: 0 16px 0 14px; background: linear-gradient(90deg, #00695c, #00897b 60%, #26a69a); color: #fff; }
.top-brand { display: flex; align-items: center; gap: 8px; align-self: center; flex: none; }
.top-brand .brand-logo { height: 24px; padding: 2px 6px; border-radius: 5px; }
.top-brand span { font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: .95; white-space: nowrap; }
.page-tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.page-tab { display: flex; align-items: center; gap: 6px; flex: none; max-width: 180px; height: 34px; padding: 0 10px 0 14px; border-radius: 7px 7px 0 0; color: #e3f4f1; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.page-tab:hover { background: #ffffff1f; color: #fff; }
.page-tab.active { background: var(--canvas); color: var(--teal-dark); font-weight: 600; }
.page-tab span { overflow: hidden; text-overflow: ellipsis; }
.page-tab button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: inherit; font-size: 13px; line-height: 1; opacity: .7; }
.page-tab button:hover { opacity: 1; background: #00000018; }
.page-tab.only button { display: none; }
.top-actions { display: flex; align-items: center; gap: 12px; align-self: center; flex: none; font-size: 12px; }
.top-actions .workspace-name { padding: 3px 10px; border: 1px solid #ffffff55; border-radius: 4px; background: #ffffff1e; white-space: nowrap; }
.top-actions .save-state { color: #d9f2ee; white-space: nowrap; }
.top-sep { width: 1px; height: 16px; background: #ffffff44; }
.account-menu { position: relative; }
.topbar .account-button { display: flex !important; align-items: center; gap: 7px; padding: 3px 6px; border: 0; border-radius: 5px; background: none; color: #fff; }
.topbar .account-button:hover { background: #ffffff1f; }
.topbar .account-button .avatar { display: grid; place-items: center; width: 24px; height: 24px; font-size: 12px; }
.topbar .account-button i { font-style: normal; opacity: .8; }
.account-drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: none; min-width: 168px; padding: 6px 0; background: #fff; border: 1px solid var(--card-line); border-radius: 8px; box-shadow: 0 8px 24px #0d353224; color: #33413f; }
.account-menu.open .account-drop { display: block; }
.account-drop small { display: block; padding: 6px 14px 8px; border-bottom: 1px solid #eef3f2; color: #8d9b99; font-size: 11.5px; }
.account-drop button { display: block; width: 100%; padding: 8px 14px; text-align: left; font-size: 12.5px; }
.account-drop button:hover { background: var(--mint); color: var(--teal-dark); }

/* ---- 内容区:灰底画布 + 页面工具栏 + 白色卡片 ---- */
.layout { flex: 1; display: block; height: auto !important; min-height: 0; overflow: hidden; }
.layout > .content { height: 100%; padding: 0 16px 24px; overflow-y: auto; }
.layout > .content:not(.embedded-view) { background: var(--canvas) url("/assets/workspace-bg.jpg") center / cover no-repeat fixed; }
.layout > .embedded-view { padding: 0; }
.layout > .content > .page-title { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 -16px 14px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--card-line); box-shadow: 0 1px 3px #0d35320a; }
.layout > .content > .page-title > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.layout > .content > .page-title small { display: none; }
.layout > .content > .page-title h1 { margin: 0; color: var(--head-ink); font-size: 16px; }
.layout > .content > .page-title p { margin: 0; color: #8d9b99; font-size: 12px; }
.layout > .content > .page-title > div:last-child:not(:first-child) { display: flex; gap: 8px; align-items: center; flex: none; }
.outline, .primary { height: 30px; padding: 0 14px; border-radius: 4px; font-size: 12.5px; }
.primary { box-shadow: none; }
.card, .test-card, .suggestion, .activity, .log-panel, .acct-card, .provider-card, .tool-card { border-color: var(--card-line); border-radius: 8px; box-shadow: none; }
.card { padding: 16px 18px; }
.section-heading { display: none; }
#agentView .workspace { display: block; }
#agentView .config-area, #agentView .test-area { max-width: none; }

/* 列表页占满内容区宽度,筛选条件横向排列 */
.log-summary, .log-panel, .log-subnav, .management-grid, .model-management, .model-management + .security-note, .tool-catalog { max-width: none !important; }
.log-filters:not(.log-filter-grid) .log-search { flex: 1 1 280px; }
.log-filters:not(.log-filter-grid) .ss-main { flex: none; width: 160px !important; }
.log-filters:not(.log-filter-grid) > select { flex: none; width: 160px; }
.log-panel .log-filters { background: #fff; }
.log-table th { background: #f5f8f8; color: #5a6866; font-weight: 500; }

/* 账号管理:一级权限下拉,展开后才显示二级权限 */
.perm-tree { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.perm-node { border-radius: 6px; }
.perm-top { gap: 10px; padding: 0 12px 0 0; background: #fff; }
.perm-top > label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 10px 0 10px 14px; cursor: pointer; }
.perm-node.open .perm-top { background: #f4faf9; border-bottom: 1px solid #edf3f2; }
.perm-top .perm-sum { flex: none; color: #8d9b99; font-size: 11.5px; }
.perm-drop { display: flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--card-line); border-radius: 4px; background: #fff; color: #4b5d5a; font-size: 12px; }
.perm-drop:hover { border-color: #9fd3c9; color: var(--teal-dark); }
.perm-drop i { font-style: normal; transition: transform .16s; }
.perm-node.open .perm-drop i { transform: rotate(180deg); }
.perm-children { display: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; padding: 4px 0 6px; }
.perm-node.open .perm-children { display: grid; }
.perm-child { padding: 8px 14px 8px 38px; border-top: 0; }
.perm-node.leaf .perm-drop { visibility: hidden; }

@media (max-width: 760px) {
  :root { --rail-w: 56px; }
  /* a48 原有的窄屏规则会隐藏导航文字,二级菜单内恢复显示 */
  .flyout .nav-item { justify-content: flex-start; }
  .flyout .nav-item > span, .flyout .agent-subnav .agent span, .flyout .agent-subnav .agent small { display: flex; }
  .flyout .agent-subnav:not([hidden]) { display: block; }
  .flyout .agent-subnav .agent { justify-content: flex-start; padding: 6px 18px 6px 26px; }
  .shell.pinned .flyout:not(.open) { transform: translateX(-110%); opacity: 0; pointer-events: none; }
  .top-brand, .top-actions .save-state, .top-actions .workspace-name, .top-sep, .topbar .account-button span { display: none; }
  .shell.pinned .shell-main { margin-left: 0; }
  .layout > .content > .page-title { flex-direction: column; align-items: flex-start; }
}

/* ---- 登录页:整幅背景图,登录框固定在右侧 ---- */
/* login-bg-20261010.jpg:原图 2 倍放大,原位图字标已删除,并在原位置以矢量渲染了清晰的 Ottocast 字标(合成进图片,不是叠加元素) */
.auth-screen.open { justify-content: flex-end; align-items: center; padding: 0 7vw 0 0; background: #cfe9e6 url("/assets/login-bg-20261010.jpg") left center / cover no-repeat; }
.auth-screen .auth-box { position: relative; width: min(360px, calc(100% - 32px)); padding: 30px 30px 26px; background: #ffffffe8; border: 1px solid #ffffff; border-radius: 12px; box-shadow: 0 18px 48px #0d35322e; backdrop-filter: blur(6px); }
.auth-screen .auth-logo-img { height: 38px; margin: 2px auto 8px; }
.auth-screen .auth-box > p { margin: 0 0 18px; text-align: center; color: #5f7a74; font-size: 13px; letter-spacing: .08em; }
.top-brand .brand-logo { height: 26px; padding: 4px 8px; background: #fff; }
.rail-logo img { object-fit: contain; }
@media (max-width: 760px) {
  .auth-screen.open { justify-content: center; align-items: center; padding: 0; background-position: 70% center; }
}