/* 春房間 index 美化層  by indexPage */
/* 載入順序：最後載入。只調視覺與版面，不新增刪除 DOM， */
/* 不改 id、class 與任何 JS 行為。 */

:root{
  --ui-font:"Noto Sans TC","PingFang TC","Hiragino Sans TC","Microsoft JhengHei",
            system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono-font:"JetBrains Mono","Cascadia Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#15151a; --surface-1:#1c1c22; --surface-2:#23232b; --surface-3:#2b2b34;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --text:#e9e9f0; --text-dim:#a7a7b4; --text-mute:#7b7b88;
  --accent:#4ec9b0; --accent-dim:rgba(78,201,176,.16); --danger:#e05561;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --shadow-1:0 2px 8px rgba(0,0,0,.28); --shadow-2:0 10px 30px rgba(0,0,0,.45);
}

/* 基礎：背景、字體、捲軸、選取 */
html,body{
  background:
    radial-gradient(1200px 700px at 10% -12%, rgba(78,201,176,.07), transparent 60%),
    radial-gradient(900px 620px at 102% -6%, rgba(138,109,156,.09), transparent 58%),
    var(--bg) !important;
  color:var(--text);
  font-family:var(--ui-font) !important;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}

/* 聊天內容與程式碼保留等寬字體 */
#chatMessages .message-bubble, pre, code, kbd, samp,
#chatInput, .mono, .log-view, #editor-area, .monaco-editor{
  font-family:var(--mono-font);
}

/* 捲軸 */
*{ scrollbar-width:thin; scrollbar-color:#3a3a45 transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(#3b3b46,#2e2e37);
  border:3px solid transparent; background-clip:padding-box; border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{ background:#4a4a58; background-clip:padding-box; }
::selection{ background:rgba(78,201,176,.30); color:#fff; }
:focus-visible{ outline:2px solid rgba(78,201,176,.6); outline-offset:2px; border-radius:6px; }
/* 版面重排：把被工具面板吃掉的寬度還給聊天區 */
.app-container{ background:transparent !important; }
.agent-sidebar{
  width:264px;
  background:var(--surface-1) !important;
  border-right:1px solid var(--line) !important;
}
.agent-sidebar.collapsed{ width:60px; }
.tools-panel{
  width:min(26vw,360px);
  background:var(--surface-1) !important;
  border-left:1px solid var(--line) !important;
  box-shadow:-8px 0 24px -18px rgba(0,0,0,.8);
}
.tools-panel.collapsed{ width:44px; }
.chat-main{ background:transparent !important; }

/* 中央頂部列 */
.chat-header{
  padding:9px 14px !important;
  gap:10px !important;
  background:linear-gradient(180deg, rgba(35,35,43,.96), rgba(28,28,34,.94)) !important;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 22px -16px rgba(0,0,0,.9);
}
.chat-header-left{ gap:10px !important; min-width:0; }
#agentHeaderDisplay{ font-weight:700; font-size:.95rem; letter-spacing:.3px; }
.agent-header-btns{ gap:6px !important; }

/* 左側 Agent 清單 */
.agent-header{
  padding:10px 10px !important;
  background:linear-gradient(180deg, rgba(38,38,47,.95), rgba(30,30,37,.9)) !important;
  border-bottom:1px solid var(--line) !important;
}
.agent-list{ padding:8px !important; }
.agent-item{
  border:1px solid transparent !important;
  border-radius:var(--r-md) !important;
  margin:4px 2px !important;
  padding:10px 12px !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.agent-item:hover{ background:var(--surface-3) !important; border-color:var(--line-2) !important; }
.agent-item.active{
  background:linear-gradient(90deg, var(--accent-dim), rgba(78,201,176,.04)) !important;
  border-color:rgba(78,201,176,.45) !important;
}
.agent-group-header{ color:var(--text-mute) !important; letter-spacing:.5px; }

/* 聊天訊息 */
.chat-messages{ padding:18px 18px 10px !important; }
#message-list{ display:flex; flex-direction:column; gap:14px; }
.message{ max-width:80% !important; }
.message-bubble{
  padding:11px 15px !important;
  border-radius:16px !important;
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-1);
  line-height:1.68;
}
.message.assistant .message-bubble{ border-top-left-radius:0 !important; }
.message.user .message-bubble{
  background:linear-gradient(135deg,rgba(24,78,90,.86),rgba(14,46,56,.90)) !important;
  border-color:rgba(120,210,200,.22) !important;
  border-top-right-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.message-meta{
  font-size:.72rem !important;
  color:var(--text-mute) !important;
  margin:6px 0 2px !important;
  padding-left:4px !important;
  letter-spacing:.2px;
}

/* 輸入區 */
.chat-input-area{
  margin:0 16px 16px !important;
  border-radius:var(--r-lg) !important;
  background:rgba(28,28,34,.72) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-2);
}
.chat-input-area textarea{
  border-radius:14px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  padding:11px 14px !important;
  line-height:1.55;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.chat-input-area textarea:focus{
  border-color:rgba(78,201,176,.55) !important;
  box-shadow:0 0 0 3px rgba(78,201,176,.12) !important;
}
.chat-input-area textarea::placeholder{ color:var(--text-mute) !important; }

/* 底部按鈕列 */
.btnBox{ gap:8px !important; margin-top:8px !important; flex-wrap:wrap; }
.btnBox > button{
  height:33px !important;
  padding:0 13px !important;
  border-radius:10px !important;
  background:var(--surface-3) !important;
  color:var(--text-dim) !important;
  border:1px solid var(--line) !important;
  font-family:var(--ui-font) !important;
  font-size:.8rem !important;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btnBox > button:hover{ background:#33333d !important; color:#fff !important; border-color:var(--line-2) !important; transform:translateY(-1px); }
.btnBox > button:active{ transform:translateY(0); }
#sendBtn{
  /* 2026-09-19 主人：太刺眼 → 改半透明、更暗、去發光 */
  background:linear-gradient(135deg,rgba(78,201,176,.24),rgba(57,168,146,.13)) !important;
  color:#7fd8c4 !important;
  border:1px solid rgba(78,201,176,.30) !important;
  font-weight:600 !important;
  box-shadow:none;
}
#sendBtn:hover{
  background:linear-gradient(135deg,rgba(78,201,176,.34),rgba(57,168,146,.22)) !important;
  color:#a2e7d6 !important;
  border-color:rgba(78,201,176,.46) !important;
}

/* 右側工具面板 */
.tools-header{
  padding:8px 10px !important;
  background:linear-gradient(180deg, rgba(38,38,47,.95), rgba(30,30,37,.9)) !important;
  border-bottom:1px solid var(--line) !important;
}
.tools-header-buttons{ gap:6px !important; }
.tools-header-buttons button{
  height:26px !important; padding:0 11px !important;
  border-radius:999px !important;
  background:var(--surface-3) !important;
  border:1px solid var(--line) !important;
  font-family:var(--ui-font) !important;
}
.tools-content{ padding:14px !important; }
.tools-content .dir{ color:var(--accent); }

/* 浮動面板與下拉 */
.tools-panel-float, .notebook-panel-float{
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  background:var(--surface-1) !important;
  box-shadow:var(--shadow-2) !important;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.tools-header-float, .notebook-header-float{
  background:linear-gradient(180deg, rgba(38,38,47,.96), rgba(30,30,37,.92)) !important;
  border-bottom:1px solid var(--line) !important;
}
.jump-dropdown, .header-btns-dropdown, .crystal-plate{
  background:var(--surface-2) !important;
  border:1px solid var(--line-2) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-2) !important;
  padding:6px !important;
}
.crystal-plate > button, .jump-dropdown > button, .header-btns-dropdown > button{
  border-radius:9px !important;
  font-family:var(--ui-font) !important;
}

/* 附件與其他小元件 */
.attachments-area{ gap:8px !important; }
.attachment-chip{
  background:var(--surface-3) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
}
.drag-hint{
  border:1px dashed rgba(78,201,176,.55) !important;
  border-radius:12px !important;
  background:rgba(78,201,176,.08) !important;
}

/* 建立 Agent 對話框 */
.create-agent-dialog{
  border:1px solid var(--line-2) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-2) !important;
  background:var(--surface-1) !important;
  overflow:hidden;
}
.create-agent-header{
  background:linear-gradient(180deg, rgba(40,40,50,.95), rgba(30,30,37,.9)) !important;
  border-bottom:1px solid var(--line) !important;
}
.create-agent-field input, .create-agent-field select, .role-search-box input{
  background:var(--surface-2) !important;
  border:1px solid var(--line-2) !important;
  border-radius:10px !important;
  color:var(--text) !important;
}
.btn-confirm{
  background:linear-gradient(135deg,#4ec9b0,#39a892) !important;
  color:#07231d !important; border:none !important; border-radius:10px !important; font-weight:700;
}
.btn-cancel{
  background:var(--surface-3) !important; color:var(--text-dim) !important;
  border:1px solid var(--line) !important; border-radius:10px !important;
}

/* 中型螢幕：工具面板再收窄 */
@media (max-width:1180px){
  .tools-panel{ width:min(32vw,320px); }
}

/* 手機版：解擠、去雜訊、可橫向滑動 */
@media (max-width:768px){
  .agent-sidebar{ width:min(84vw,340px) !important; }
  .chat-header{ padding:8px 10px !important; gap:8px !important; }
  #agentHeaderDisplay{ font-size:.86rem !important; }
  .agent-header-btns{
    gap:6px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .agent-header-btns::-webkit-scrollbar{ display:none; }
  .chat-messages{ padding:14px 12px 6px !important; }
  #message-list{ gap:12px; }
  .message{ max-width:92% !important; }
  .message-bubble{ padding:10px 13px !important; border-radius:14px !important; }
  .chat-input-area{
    margin:0 10px 10px !important;
    padding:10px !important;
    border-radius:18px !important;
  }
  .chat-input-area textarea{
    font-size:.86rem !important;
    border-radius:12px !important;
    padding:10px 12px !important;
  }
  .btnBox{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px !important;
    padding-bottom:2px;
  }
  .btnBox::-webkit-scrollbar{ display:none; }
  .btnBox > button{ height:32px !important; padding:0 12px !important; flex:0 0 auto; }
  .btnBox > button .btn-label{ display:none; }
  .tools-content{ padding:10px !important; }
}


/* 回到底部浮動鈕：不再壓在輸入框上 */
#scrollToBottomBtn{
  bottom:135px !important; right:20px !important;
  width:44px !important; height:44px !important;
  font-size:1rem !important;
  background:linear-gradient(180deg, rgba(48,48,58,.85), rgba(34,34,42,.85)) !important;
  color:var(--accent) !important;
  border:1px solid rgba(78,201,176,.35) !important;
  border-radius:50% !important;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.9) !important;
  opacity:1 !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#scrollToBottomBtn:hover{ transform:translateY(-2px); border-color:rgba(78,201,176,.7) !important; }

/* 手機版細節微調 */
@media (max-width:768px){
  .chat-header .mok-pill{ padding:0 10px !important; height:26px !important; }
  .agent-header-btns{ gap:8px !important; }
  #scrollToBottomBtn{
    bottom:150px !important; right:12px !important;
    width:40px !important; height:40px !important; font-size:.92rem !important;
  }
  .chat-input-area{ box-shadow:0 10px 30px -12px rgba(0,0,0,.9) !important; }
}


/* 右側面板寬度調整：聊天區更寬，工具列仍可橫向捲動 */
.tools-panel{ width:min(34vw,440px); }
@media (max-width:1180px){ .tools-panel{ width:min(36vw,400px); } }
.tools-header{ flex-wrap:nowrap !important; gap:8px; }
.tools-header-buttons{ flex:1 1 auto; min-width:0; }

/* 頂部膠囊：降低彩度，統一質感（保留 --tone 識別） */
button.mok-pill{
  background:color-mix(in srgb, var(--tone) 10%, #26262c) !important;
  border-color:color-mix(in srgb, var(--tone) 34%, transparent) !important;
  color:#dfe2e8 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset !important;
}
button.mok-pill:hover{
  background:color-mix(in srgb, var(--tone) 22%, #2c2c34) !important;
  border-color:color-mix(in srgb, var(--tone) 60%, transparent) !important;
  color:#fff !important;
}
button.mok-pill--danger{
  background:color-mix(in srgb, #e05561 14%, #2a2125) !important;
  border-color:rgba(224,85,97,.45) !important;
}

/* 左側清單：分組與呼吸感 */
.agent-list{ padding:10px 10px 16px !important; }
.agent-group{ margin-bottom:10px; }
.agent-group-header{
  padding:10px 10px 6px !important;
  font-size:.72rem !important;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-mute) !important;
}
.agent-item{ margin:3px 0 !important; }
.agent-item + .agent-item{ margin-top:4px !important; }

/* 輸入區工具列：縮小尺寸、降低壓迫 */
.btnBox > button{ height:30px !important; padding:0 11px !important; font-size:.76rem !important; }
.chat-messages{ padding:20px 22px 12px !important; }
#message-list{ gap:16px; }
#chatMessages .message-bubble{ font-size:.92rem; }


/* 最終微調：再降彩度、增加留白 */
button.mok-pill{ background:color-mix(in srgb, var(--tone) 7%, #27272e) !important; }
button.mok-pill:hover{ background:color-mix(in srgb, var(--tone) 18%, #2e2e36) !important; }
button.mok-pill--danger{ background:rgba(224,85,97,.14) !important; }
#stopBtn{ background:rgba(224,85,97,.16) !important; }

.agent-item{ line-height:1.5 !important; }
.agent-name{ letter-spacing:.2px; }
.agent-sidebar{ scrollbar-width:thin; }
.chat-messages{ line-height:1.7; }


/* 收尾：加大呼吸感、弱化輔助資訊 */
.btnBox{ gap:10px !important; margin-top:10px !important; }
.chat-input-area{ padding:12px 12px 12px !important; }
.message-meta{ color:#6b6b78 !important; font-size:.68rem !important; }
.message-bubble{ padding:12px 16px !important; }
.agent-item{ padding:11px 13px !important; }
.tools-content{ padding:16px !important; }
@media (max-width:768px){
  .btnBox{ gap:8px !important; }
  .message-meta{ font-size:.66rem !important; }
}


/* 手機：底部安全區與頂部間距 */
@media (max-width:768px){
  .chat-input-area{ margin:0 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  .agent-header-btns{ gap:9px !important; }
  #scrollToBottomBtn{ opacity:.9 !important; }
}


/* =============================================================
   批次A（低風險・純顯示）：按鍵隱藏        2026-09-18 by indexPage
   規格出處：主人 9 條 UI 清單  第 6 / 7(錄音鍵) / 9 條
   - 第6條：toggleAgentSidebar、mobileOpenLeftBtn 隱藏
            （功能保留，批次B 改掛到 agentHeaderDisplay）
   - 第7條：recordBtn 隱藏（功能保留，批次B 併入 sendBtn 長按）
   - 第9條：手機版隱藏 jumpBtn、mobileOpenRightBtn
            桌面版隱藏 mobileOpenRightBtn、menuToggle
   ============================================================= */
#toggleAgentSidebar,
#mobileOpenLeftBtn,
#recordBtn {
  display: none !important;
}

@media (max-width: 768px) {
  #jumpBtn,
  #mobileOpenRightBtn { display: none !important; }
}

@media (min-width: 769px) {
  #mobileOpenRightBtn,
  #menuToggle { display: none !important; }
}

/* =============================================================
   批次B（功能搬移）：sendBtn 長按錄音中樣式        2026-09-18 by indexPage
   規格出處：主人 9 條 UI 清單  第 7 條
   ============================================================= */
#sendBtn {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#sendBtn.recording {
  background: #e5484d !important;
  border-color: #e5484d !important;
  color: #fff !important;
  animation: sendRecPulse 1s ease-in-out infinite;
}
@keyframes sendRecPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* BatchC 2026-09-18 by indexPage */
/* Item1 move agentInfoBtn, openToolsPanel2, notebookBtn into .tools-header-buttons */
/* Item2 overflow buttons collapse into the more menu (JS adds .tools-folded) */
/* Item3 plus Item4 mobile .btnBox stops clipping; raise z-index */
.tools-header{ position:relative; }
.tools-header-buttons{ flex-wrap:nowrap; }
.tools-header-buttons button.tools-folded{ display:none !important; }
.tools-header .tools-more-btn{ font-weight:700; letter-spacing:1px; }
#toolsMoreDropdown{ top:calc(100% + 6px) !important; right:8px !important; left:auto !important; z-index:9999 !important; }

@media (max-width:768px){
  .btnBox{ overflow:visible !important; z-index:60; }
  .btnBox .jump-dropdown, .btnBox .crystal-plate{ z-index:1200 !important; }
  .jump-dropdown{ right:0 !important; left:auto !important; }
}


/* =============================================================
   批次E（視覺・省資源）：高貴水晶玻璃質感
   indexPage|主人指示：水晶感＋透明磨砂＋省資源|202609180610
   原則：
   1) 主體靠「半透明＋內高光＋冰晶細邊」營造水晶感（純合成，幾乎零 GPU 成本）。
   2) backdrop-filter(磨砂) 只用在最關鍵兩處：頂部列、輸入區；僅 blur(10px)，
      避免多層大範圍模糊拖慢 GPU。
   3) 沿用既有 body.perf-lite（mokPerf；2 個以上 agent 或手動時掛上）自動關閉
      磨砂與裝飾性無限動畫，達省資源。
   ============================================================= */
:root{
  --crystal-line:rgba(190,225,235,.14);
  --crystal-edge:inset 0 1px 0 rgba(255,255,255,.07);
  --crystal-hi:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.16);
}

/* 背景：多加一層冰晶折射光（靜態漸層，不耗電） */
html,body{
  background:
    radial-gradient(1200px 700px at 10% -12%, rgba(78,201,176,.07), transparent 60%),
    radial-gradient(900px 620px at 102% -6%, rgba(138,109,156,.09), transparent 58%),
    radial-gradient(760px 520px at 50% 122%, rgba(96,168,224,.055), transparent 62%),
    var(--bg) !important;
}

/* 左右面板：半透明冰晶（純合成，不加模糊以省 GPU） */
.agent-sidebar{
  background:linear-gradient(180deg, rgba(34,38,48,.66), rgba(20,23,30,.62)) !important;
  border-right-color:var(--crystal-line) !important;
}
.tools-panel{
  background:linear-gradient(180deg, rgba(34,38,48,.64), rgba(20,23,30,.60)) !important;
  border-left-color:var(--crystal-line) !important;
  box-shadow:-8px 0 24px -18px rgba(0,0,0,.8), var(--crystal-edge) !important;
}

/* 頂部列與輸入區：磨砂玻璃（僅此二處用 backdrop-filter） */
.chat-header{
  background:linear-gradient(180deg, rgba(40,45,57,.66), rgba(24,27,34,.60)) !important;
  border-bottom-color:var(--crystal-line) !important;
  box-shadow:var(--crystal-edge), 0 8px 22px -16px rgba(0,0,0,.9) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
}
.chat-input-area{
  background:linear-gradient(180deg, rgba(44,50,62,.54), rgba(24,28,36,.54)) !important;
  border-color:var(--crystal-line) !important;
  box-shadow:var(--crystal-edge), var(--shadow-2) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
}
.chat-input-area textarea{
  background:rgba(255,255,255,.05) !important;
  border-color:var(--crystal-line) !important;
}

/* 訊息氣泡：冰晶玻璃面（使用者氣泡已於上方改為較沉穩的青玉色） */
.message-bubble{
  background:linear-gradient(180deg, rgba(48,52,63,.90), rgba(37,40,49,.90)) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:var(--crystal-hi), var(--shadow-1) !important;
}

/* 省資源模式（body.perf-lite）：關閉磨砂與裝飾性無限動畫，降低 GPU 與 CPU 負擔 */
body.perf-lite .chat-header,
body.perf-lite .chat-input-area{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.perf-lite .working-indicator::after,
body.perf-lite .agent-item.running::after,
body.perf-lite .work-wave,
body.perf-lite .work-wave::before,
body.perf-lite .work-wave::after,
body.perf-lite .work-screen,
body.perf-lite .work-head,
body.perf-lite .work-arm,
body.perf-lite .work-coffee,
body.perf-lite #chatInputWrapper::after{
  animation:none !important;
}

/* =============================================================
   主人需求：sendBtn 寬度與輸入框一致（獨佔一行）    2026-09-19 by indexPage
  - #sendBtn 撐滿 .btnBox 內容寬度；.btnBox 與 textarea 同在輸入區容器的
    內容盒內，故兩者寬度完全相同。
  - 手機版 .btnBox 由「橫向捲動」改為「換行」，避免 sendBtn 被擠到畫面外。
  - 用 ID 選擇器提高優先度，覆蓋先前樣式表裡對按鈕的 flex 設定。
  ============================================================= */
.btnBox{
  flex-wrap: wrap !important;
}
#sendBtn{
  flex: 1 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  justify-content: center !important;
}
@media (max-width: 768px){
  .btnBox{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .btnBox button#sendBtn{
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   2026-09-19 主人：水晶盤 4 鍵（加入文件夾 / 加入檔案 / 清空對話 / 放大字體）
   → 統一成與 jumpBtn（對話歷史）完全同色、同外觀、同大小
   ============================================================ */
.btnBox .crystal-plate > button{
  height:30px !important;
  min-height:0 !important;
  width:auto !important;
  flex:0 0 auto !important;
  padding:0 11px !important;
  margin:0 !important;
  border-radius:10px !important;
  background:var(--surface-3) !important;
  color:var(--text-dim) !important;
  border:1px solid var(--line) !important;
  font-family:var(--ui-font) !important;
  font-size:.76rem !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:6px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btnBox .crystal-plate > button:hover{
  background:#33333d !important;
  color:#fff !important;
  border-color:var(--line-2) !important;
  transform:translateY(-1px);
}
.btnBox .crystal-plate > button:active{ transform:translateY(0); }
@media (max-width:768px){
  .btnBox .crystal-plate > button .btn-label{ display:none; }
}

/* ===== 輸入框高度上限修正 2026-09-22 =====
   問題：輸入大量文字時 textarea 無限增高，把下方 .btnBox（含送出鍵）擠出畫面，
        手機版因此按不到送出鍵、送不出訊息。
   解法：textarea 設 max-height（超過即內部滾動）；輸入區不被壓縮，訊息區可壓縮。 */
.chat-input-area{
  flex-shrink:0 !important;
}
.chat-input-area #chatInputWrapper{
  min-height:0;
}
.chat-input-area textarea{
  max-height:min(32vh, 200px) !important;
  overflow-y:auto !important;
  resize:none !important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.chat-input-area textarea::-webkit-scrollbar{ width:8px; height:8px; }
.chat-input-area textarea::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.20); border-radius:4px;
}
.chat-input-area textarea::-webkit-scrollbar-track{ background:transparent; }
.chat-input-area .btnBox{ flex-shrink:0 !important; }
.chat-messages{ min-height:0; }
@media (max-width:768px){
  .chat-input-area textarea{
    max-height:min(22vh, 140px) !important;
    max-height:min(22dvh, 140px) !important;
  }
}
@media (max-height:520px){
  .chat-input-area textarea{
    max-height:min(18vh, 110px) !important;
    max-height:min(18dvh, 110px) !important;
  }
}

/* 最近對話：頂部分層（不分組，只按最後對話時間排序）★ indexPage 2026-09-27 */
.agent-group--recent{
  margin-bottom:12px !important;
  padding-bottom:6px;
  border-bottom:1px dashed color-mix(in srgb, #7ec8a8 34%, transparent);
}
.agent-group--recent > .agent-group-header{
  color:#7ec8a8 !important;
}