:root{--gp:#9933ff;--gs:#00ccff;--gt:#e8ddff;--gd:rgba(232,221,255,.65);--gb:rgba(153,51,255,.18);--gh:rgba(0,204,255,.35);--ub:linear-gradient(135deg,rgba(100,0,200,.55),rgba(153,51,255,.45));--ab:rgba(255,255,255,.035)}
.gpt-layout{position:fixed;top:80px;left:0;width:100%;height:calc(100vh - 80px);display:flex;overflow:hidden;z-index:10}
.gpt-sidebar{width:260px;min-width:260px;height:100%;background:rgba(12,5,22,.96);border-right:1px solid var(--gb);backdrop-filter:blur(20px);display:flex;flex-direction:column;transition:transform .35s ease}
.sidebar-header{padding:16px;border-bottom:1px solid var(--gb);display:flex;align-items:center;justify-content:space-between;gap:10px}
.new-chat-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid var(--gb);border-radius:10px;background:rgba(255,255,255,.04);color:var(--gt);font:600 14px 'Noto Sans SC';letter-spacing:1px;cursor:pointer;transition:all .25s}
.new-chat-btn:hover{background:rgba(255,255,255,.08);border-color:var(--gh)}
.sidebar-toggle{display:none;width:34px;height:34px;border:1px solid var(--gb);border-radius:8px;background:transparent;color:var(--gd);font-size:20px;cursor:pointer;align-items:center;justify-content:center}
.sidebar-history{flex:1;overflow-y:auto;padding:10px}
.sidebar-history::-webkit-scrollbar{width:5px}
.sidebar-history::-webkit-scrollbar-thumb{background:rgba(153,51,255,.25);border-radius:3px}
.history-group{margin-bottom:14px}
.history-group-title{font:700 10px 'Noto Sans SC';letter-spacing:1px;color:rgba(232,221,255,.4);text-transform:uppercase;padding:0 8px 6px}
.history-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:5px;border-radius:8px;cursor:pointer;transition:all .2s;color:var(--gd);font:500 13px 'Noto Sans SC';overflow:hidden}
.history-item::before{content:'💬';margin-right:8px;opacity:.6;font-size:12px}
.history-item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-item:hover,.history-item.active{background:rgba(255,255,255,.08);color:#fff}
.history-item.active{border:1px solid var(--gh)}
.history-delete{width:22px;height:22px;border:none;background:transparent;color:rgba(232,221,255,.35);font-size:14px;cursor:pointer;border-radius:4px;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center}
.history-item:hover .history-delete{opacity:1}
.history-delete:hover{color:#ff6b6b}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--gb)}
.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gp),var(--gs));display:flex;align-items:center;justify-content:center;color:#fff;font:700 12px 'Noto Sans SC'}
.user-info span{color:var(--gt);font:500 13px 'Noto Sans SC'}
.gpt-main{flex:1;display:flex;flex-direction:column;height:100%;background:rgba(5,0,10,.4);position:relative}
.gpt-header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--gb);background:rgba(8,2,18,.7);backdrop-filter:blur(16px)}
.menu-toggle{display:none;width:36px;height:36px;border:1px solid var(--gb);border-radius:8px;background:transparent;color:var(--gt);font-size:16px;cursor:pointer;align-items:center;justify-content:center}
.gpt-title{font:700 17px 'Orbitron','Noto Sans SC';letter-spacing:2px;color:#fff;text-shadow:0 0 14px rgba(153,51,255,.45)}
.gpt-actions .token-display{color:var(--gd);font:12px 'Share Tech Mono';letter-spacing:1px}
.gpt-chat-area{flex:1;overflow-y:auto;position:relative}
.gpt-messages{max-width:850px;margin:0 auto;padding:28px 20px 110px;min-height:100%}
.gpt-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;text-align:center;animation:fadeInUp .8s ease}
.gpt-welcome-icon{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,rgba(100,0,200,.3),rgba(0,204,255,.15));border:1px solid var(--gb);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:20px}
.gpt-welcome h2{font:700 28px 'Orbitron','Noto Sans SC';color:#fff;margin-bottom:10px;letter-spacing:2px}
.gpt-welcome p{color:var(--gd);font:15px 'Noto Sans SC';max-width:420px;line-height:1.6}
.gpt-msg{display:flex;gap:14px;padding:18px 0;animation:fadeInUp .35s ease}
.gpt-msg.user{flex-direction:row-reverse}
.gpt-msg-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px 'Noto Sans SC';color:#fff}
.gpt-msg.user .gpt-msg-avatar{background:linear-gradient(135deg,#6600cc,#9933ff)}
.gpt-msg.bot .gpt-msg-avatar{background:linear-gradient(135deg,#004466,#00ccff)}
.gpt-msg-content{max-width:75%;padding:12px 18px;border-radius:16px;line-height:1.7;font:15px 'Noto Sans SC'}
.gpt-msg.user .gpt-msg-content{background:var(--ub);color:#fff;border-bottom-right-radius:5px}
.gpt-msg.bot .gpt-msg-content{background:var(--ab);color:var(--gt);border:1px solid var(--gb);border-bottom-left-radius:5px}
.gpt-msg-time{font:11px 'Noto Sans SC';color:rgba(232,221,255,.4);margin-top:6px}
.gpt-msg.user .gpt-msg-time{text-align:right}
.gpt-input-area{position:absolute;bottom:0;left:0;width:100%;padding:14px 20px 18px;background:linear-gradient(to top,rgba(10,0,18,.98),rgba(10,0,18,.7) 70%,transparent)}
.gpt-input-box{max-width:760px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;padding:8px 12px;border:1px solid var(--gb);border-radius:18px;background:rgba(20,10,35,.7);backdrop-filter:blur(12px);transition:all .25s}
.gpt-input-box:focus-within{border-color:var(--gh)}
.gpt-input-box textarea{flex:1;min-height:22px;max-height:140px;background:transparent;border:none;outline:none;color:#fff;font:15px 'Noto Sans SC';resize:none;padding:8px 4px;line-height:1.5}
.gpt-input-box textarea::placeholder{color:rgba(232,221,255,.4)}
.gpt-send-btn{width:38px;height:38px;min-width:38px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--gp),var(--gs));color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.gpt-send-btn:hover:not(:disabled){transform:scale(1.05)}
.gpt-send-btn:disabled{opacity:.45;cursor:not-allowed}
.gpt-input-footer{max-width:760px;margin:8px auto 0;display:flex;justify-content:space-between;color:rgba(232,221,255,.38);font:11px 'Noto Sans SC'}
.gpt-typing{display:none;align-items:flex-start;gap:12px;padding:14px 20px;max-width:850px;margin:0 auto}
.gpt-typing.show{display:flex;animation:fadeInUp .3s ease}
.gpt-typing .typing-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#004466,#00ccff);display:flex;align-items:center;justify-content:center;color:#fff;font:700 11px 'Noto Sans SC'}
.gpt-typing .typing-bubble{display:flex;align-items:center;gap:5px;padding:14px 16px;border-radius:16px;border-bottom-left-radius:5px;background:var(--ab);border:1px solid var(--gb)}
.gpt-typing .typing-bubble span{width:7px;height:7px;border-radius:50%;background:var(--gs);animation:typingBounce 1.4s ease-in-out infinite}
.gpt-typing .typing-bubble span:nth-child(2){animation-delay:.2s}
.gpt-typing .typing-bubble span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.gpt-layout{top:72px;height:calc(100vh - 72px)}.gpt-sidebar{position:fixed;top:72px;left:0;z-index:200;transform:translateX(-100%)}.gpt-sidebar.open{transform:translateX(0)}.sidebar-toggle,.menu-toggle{display:flex}.gpt-messages{padding:16px 14px 120px}.gpt-msg-content{max-width:85%}.gpt-input-area{padding:10px 12px 16px}}
@media(max-width:480px){.gpt-header{padding:0 12px;height:54px}.gpt-msg-content{max-width:92%}.gpt-welcome h2{font-size:22px}.gpt-welcome-icon{width:60px;height:60px;font-size:26px}}


/* ========== LLM 連線狀態指示器 ========== */
.llm-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--gb);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  margin-right: 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
}
.llm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s;
}
.llm-status-dot.llm-checking {
  background: #ffaa00;
  box-shadow: 0 0 10px #ffaa00;
  animation: llmPulse 1.2s ease-in-out infinite;
}
.llm-status-dot.llm-online {
  background: #00ffaa;
  box-shadow: 0 0 12px #00ffaa;
}
.llm-status-dot.llm-offline {
  background: #ff5577;
  box-shadow: 0 0 10px #ff5577;
  animation: llmBlink 1.5s ease-in-out infinite;
}
@keyframes llmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.3); }
}
@keyframes llmBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.llm-status-label {
  color: var(--gt);
  white-space: nowrap;
}
.llm-model-label {
  color: var(--gs);
  font-weight: 700;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== 設定按鈕 ========== */
.llm-settings-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--gb);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--gt);
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.llm-settings-btn:hover {
  background: rgba(0,204,255,0.12);
  border-color: var(--gh);
  color: var(--gs);
  transform: rotate(90deg);
}

/* ========== LLM 設定 Modal ========== */
.llm-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5,0,15,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: llmFadeIn 0.25s ease;
}
.llm-settings-modal.show {
  display: flex;
}
@keyframes llmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.llm-settings-box {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(20,5,40,0.97), rgba(8,2,18,0.97));
  border: 1px solid var(--gb);
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 40px rgba(153,51,255,0.2);
  animation: llmSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes llmSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.llm-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gb);
}
.llm-settings-head h2 {
  margin: 0;
  color: #fff;
  font: 700 16px 'Noto Sans SC', sans-serif;
  letter-spacing: 2px;
}
.llm-settings-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gb);
  border-radius: 8px;
  background: transparent;
  color: var(--gd);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.llm-settings-close:hover {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.4);
  color: #ff8888;
}
.llm-settings-body {
  padding: 20px 24px 24px;
}
.llm-field {
  margin-bottom: 16px;
}
.llm-field label {
  display: block;
  color: var(--gt);
  font: 600 12px 'Noto Sans SC', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.llm-field input,
.llm-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gb);
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font: 14px 'Noto Sans SC', 'Share Tech Mono', monospace;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
  resize: vertical;
}
.llm-field input:focus,
.llm-field textarea:focus {
  border-color: var(--gs);
  box-shadow: 0 0 0 3px rgba(0,204,255,0.15);
}
.llm-field textarea {
  min-height: 110px;
  line-height: 1.6;
}
.llm-field small {
  display: block;
  color: var(--gd);
  font: 11px 'Share Tech Mono', monospace;
  margin-top: 5px;
  letter-spacing: 0.5px;
}
.llm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.llm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gb);
}
.llm-test-btn,
.llm-save-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font: 700 13px 'Noto Sans SC', sans-serif;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s;
}
.llm-test-btn {
  background: transparent;
  border: 1px solid var(--gb);
  color: var(--gt);
}
.llm-test-btn:hover:not(:disabled) {
  background: rgba(0,204,255,0.1);
  border-color: var(--gh);
  color: var(--gs);
}
.llm-save-btn {
  background: linear-gradient(135deg, var(--gp), var(--gs));
  border: none;
  color: #fff;
}
.llm-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(153,51,255,0.4);
}
.llm-test-btn:disabled,
.llm-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* typing cursor */
.typing-cursor {
  display: inline-block;
  color: var(--gs);
  font-weight: 700;
  animation: llmBlink 0.8s step-end infinite;
  margin-left: 2px;
}
@media (max-width: 600px) {
  .llm-status { padding: 4px 8px; font-size: 10px; }
  .llm-model-label { display: none; }
  .llm-row { grid-template-columns: 1fr; }
  .llm-settings-box { max-height: 95vh; }
  .llm-settings-body { padding: 16px; }
}

/* ========== LLM 設定按鈕 ========== */
.llm-settings-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--gb);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--gt);
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.llm-settings-btn:hover {
  background: rgba(0,204,255,0.12);
  border-color: var(--gh);
  color: var(--gs);
  transform: rotate(90deg);
}

/* ========== LLM 設定 Modal ========== */
.llm-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5,0,15,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.llm-settings-modal.show {
  display: flex;
  animation: llmFadeIn 0.25s ease;
}
@keyframes llmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.llm-settings-box {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(20,5,40,0.97), rgba(8,2,18,0.97));
  border: 1px solid var(--gb);
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 40px rgba(153,51,255,0.2);
  animation: llmSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes llmSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.llm-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gb);
}
.llm-settings-head h2 {
  margin: 0;
  color: #fff;
  font: 700 16px 'Noto Sans SC', sans-serif;
  letter-spacing: 2px;
}
.llm-settings-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gb);
  border-radius: 8px;
  background: transparent;
  color: var(--gd);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.llm-settings-close:hover {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.4);
  color: #ff8888;
}
.llm-settings-body {
  padding: 20px 24px 24px;
}
.llm-field {
  margin-bottom: 16px;
}
.llm-field label {
  display: block;
  color: var(--gt);
  font: 600 12px 'Noto Sans SC', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.llm-field input,
.llm-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gb);
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font: 14px 'Noto Sans SC', 'Share Tech Mono', monospace;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
  resize: vertical;
}
.llm-field input:focus,
.llm-field textarea:focus {
  border-color: var(--gs);
  box-shadow: 0 0 0 3px rgba(0,204,255,0.15);
}
.llm-field textarea {
  min-height: 110px;
  line-height: 1.6;
}
.llm-field small {
  display: block;
  color: var(--gd);
  font: 11px 'Share Tech Mono', monospace;
  margin-top: 5px;
  letter-spacing: 0.5px;
}
.llm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.llm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gb);
}
.llm-test-btn,
.llm-save-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font: 700 13px 'Noto Sans SC', sans-serif;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s;
}
.llm-test-btn {
  background: transparent;
  border: 1px solid var(--gb);
  color: var(--gt);
}
.llm-test-btn:hover:not(:disabled) {
  background: rgba(0,204,255,0.1);
  border-color: var(--gh);
  color: var(--gs);
}
.llm-save-btn {
  background: linear-gradient(135deg, var(--gp), var(--gs));
  border: none;
  color: #fff;
}
.llm-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(153,51,255,0.4);
}
.llm-test-btn:disabled,
.llm-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .llm-row { grid-template-columns: 1fr; }
  .llm-settings-box { max-height: 95vh; }
  .llm-settings-body { padding: 16px; }
}