/* ======== 通用左侧 chat-shell（在 pipe-b/c/canvas/a-assets 等页面常驻） ========
   设计思路：
   - 自动注入一个 fixed 的左侧面板，跳过页面顶部 topbar（48px）
   - body 默认加 padding-left:380px 让原内容右移，折叠态变 padding-left:36px
   - 窄屏（≤1100）面板默认隐藏，靠右下/右侧 FAB 按钮切换
*/

:root{
  --chat-shell-width: 380px;
  --chat-shell-collapsed: 36px;
  --chat-shell-top: 48px;
}

/* 给页面腾出左侧空间 */
body.chat-shell-active{
  padding-left: var(--chat-shell-width);
  transition: padding-left .25s ease;
}
body.chat-shell-active.chat-shell-collapsed{
  padding-left: var(--chat-shell-collapsed);
}

/* 让全宽的 fixed 顶/底栏也跟着右移，避免压在 chat-pane 上 */
body.chat-shell-active .topbar,
body.chat-shell-active .bottom-bar{
  left: var(--chat-shell-width) !important;
  transition: left .25s ease;
}
body.chat-shell-active.chat-shell-collapsed .topbar,
body.chat-shell-active.chat-shell-collapsed .bottom-bar{
  left: var(--chat-shell-collapsed) !important;
}
@media (max-width: 1100px){
  body.chat-shell-active .topbar,
  body.chat-shell-active .bottom-bar,
  body.chat-shell-active.chat-shell-collapsed .topbar,
  body.chat-shell-active.chat-shell-collapsed .bottom-bar{
    left: 0 !important;
  }
}

/* 固定在左侧的对话面板 */
.chat-shell-pane{
  position: fixed;
  left: 0;
  top: var(--chat-shell-top);
  bottom: 0;
  width: var(--chat-shell-width);
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: rgba(15,15,17,0.95);
  border-right: 1px solid #1d1d1f;
  backdrop-filter: blur(12px);
  transition: width .25s ease;
  overflow: hidden;
}
body.chat-shell-collapsed .chat-shell-pane{
  width: var(--chat-shell-collapsed);
}
body.chat-shell-collapsed .chat-shell-pane > *:not(.chat-shell-spine){
  display: none !important;
}

/* 折叠态左侧细窄条 */
.chat-shell-spine{
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
  gap: 12px;
  color: #6e6e73;
  font-size: 12px;
  writing-mode: vertical-rl;
  letter-spacing: 4px;
}
body.chat-shell-collapsed .chat-shell-spine{
  display: flex;
}

/* 头部：当前页标识 + 跳转 chips */
.chat-shell-header{
  padding: 12px 14px 0;
}
.chat-shell-header h4{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-shell-header h4 .pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 0 rgba(48,209,88,0.6);
  animation: chatShellPulse 1.8s infinite;
}
@keyframes chatShellPulse{
  0%{box-shadow:0 0 0 0 rgba(48,209,88,0.5)}
  70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}
  100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}
}

/* 消息区 */
.chat-shell-messages{
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: #2d2d2f transparent;
}
.chat-shell-messages::-webkit-scrollbar{ width:6px }
.chat-shell-messages::-webkit-scrollbar-thumb{ background:#2d2d2f; border-radius:3px }
.chat-shell-msg{
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.chat-shell-msg.user{
  display: flex; justify-content: flex-end;
}
.chat-shell-msg.user .bubble{
  background: rgba(96,165,250,0.18);
  border: 1px solid rgba(96,165,250,0.3);
  color: #d2e3ff;
  padding: 8px 12px;
  border-radius: 14px 14px 2px 14px;
  max-width: 85%;
}
.chat-shell-msg.assistant .bubble{
  background: #1d1d1f;
  border: 1px solid #2d2d2f;
  color: #d2d2d7;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 2px;
  max-width: 88%;
}
.chat-shell-msg.system{
  text-align: center;
  font-size: 11px;
  color: #6e6e73;
  margin: 8px 0;
}
.chat-shell-msg .quick-go{
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  background: #7c4dff;
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.chat-shell-msg .quick-go:hover{ background: #5e35b1 }

/* 输入区 */
.chat-shell-input{
  border-top: 1px solid #1d1d1f;
  padding: 10px 12px 14px;
  background: rgba(10,10,12,0.6);
}
.chat-shell-input-wrap{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #1d1d1f;
  border: 1px solid #2d2d2f;
  border-radius: 14px;
  padding: 8px 10px;
}
.chat-shell-input-wrap textarea{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: #f5f5f7;
  font-size: 13px;
  font-family: inherit;
  min-height: 20px;
  max-height: 120px;
  line-height: 1.4;
}
.chat-shell-input-wrap textarea::placeholder{ color:#48484a }
.chat-shell-input-wrap button{
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: #7c4dff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.chat-shell-input-wrap button:hover{ background:#5e35b1 }
.chat-shell-scope{
  font-size: 11px;
  color: #6e6e73;
  text-align: center;
  margin-top: 6px;
}

/* 折叠/展开按钮（贴在 chat-pane 与右侧内容的分界线中点） */
.chat-shell-toggle{
  position: fixed;
  top: 50%;
  left: calc(var(--chat-shell-width) - 13px);
  transform: translateY(-50%);
  z-index: 95;
  width: 26px;
  height: 52px;
  border-radius: 8px;
  background: #1d1d1f;
  border: 1px solid #2d2d2f;
  color: #86868b;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  transition: left .25s ease, all .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.chat-shell-toggle:hover{
  background: #7c4dff;
  color: #fff;
  border-color: #7c4dff;
}
body.chat-shell-collapsed .chat-shell-toggle{
  left: calc(var(--chat-shell-collapsed) - 13px);
}

/* 响应式：窄屏下面板默认隐藏，按钮变右侧 FAB，点击切换 */
@media (max-width: 1100px){
  body.chat-shell-active{ padding-left: 0 !important; }
  body.chat-shell-active.chat-shell-collapsed{ padding-left: 0 !important; }
  .chat-shell-pane{
    width: 100vw !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  body:not(.chat-shell-collapsed) .chat-shell-pane{
    transform: translateX(0);
  }
  body.chat-shell-collapsed .chat-shell-pane{
    transform: translateX(-100%);
    width: 0 !important;
  }
  body.chat-shell-collapsed .chat-shell-pane > *{ display: none !important }
  .chat-shell-toggle{
    left: auto !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(96,165,250,0.85) !important;
    color: #fff !important;
    border-color: rgba(96,165,250,0.5) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.45) !important;
    opacity: 0.85;
  }
  .chat-shell-toggle:hover{ opacity: 1 }
}