/* ==============================================
   kimi_cli.html — Agent Shell Styles
   Extracted from template <style> block (Phase 3)
   ============================================== */

.as-btn-icon {
  background: #f0f0f0; border: none; border-radius: 0.5rem;
  width: 2rem; height: 2rem; cursor: pointer; font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink:0;
}
.as-btn-icon:hover { background: #ddd; }
.as-proxy-btn.on { color: #22c55e; }
.as-proxy-btn.on:hover { background: rgba(34,197,94,0.1); }
.as-proxy-btn.off { color: #ef4444; }
.as-proxy-btn.off:hover { background: rgba(239,68,68,0.1); animation: as-pulse 1s infinite; }
@keyframes as-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.as-proj-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 100;
  background: #fff; border: 1px solid #ddd; border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 220px; max-height: 260px;
  overflow-y: auto; margin-top: 2px;
}
.as-proj-option {
  padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f0f0f0;
}
.as-proj-option:hover { background: #eef3ff; }
.as-proj-name { font-size: 0.875rem; color: #333; }
.as-proj-path { font-size: 0.75rem; color: #999; margin-top: 0.125rem; }
.as-proj-empty { padding: 0.75rem; text-align: center; color: #aaa; font-size: 0.8125rem; }

/* Requirements panel */
.as-req-panel {
  width: 260px; border-right: 1px solid #e8e8e8;
  display: flex; flex-direction: column;
  background: #fafafa; flex-shrink: 0; overflow-x: hidden;
}
.as-req-header {
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600;
  color: #666; border-bottom: 1px solid #e8e8e8;
  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}
.as-req-count { background: #ddd; border-radius: 10px; padding: 0 0.5rem; font-size: 0.6875rem; color: #666; }
.as-req-list { flex: 1; overflow-y: auto; min-height: 0; }
.as-req-item {
  padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f0f0f0;
  display: flex; gap: 0.375rem; transition: background 0.15s;
}
.as-req-item:hover { background: #eef3ff; }
.as-req-idx { font-size: 0.75rem; color: #999; flex-shrink:0; min-width:1.5rem; }
.as-req-text {
  flex: 1; font-size: 0.8125rem; color: #333; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.as-req-status { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-top: 0.25rem; flex-shrink:0; }
.as-req-status.req-0 { background: #f59e0b; }
.as-req-status.req-1 { background: #10b981; }
.as-req-empty { padding: 1rem; text-align: center; color: #aaa; font-size: 0.8125rem; }

.as-session-title { flex: 1; font-size: 0.8125rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-session-meta { font-size: 0.6875rem; color: #999; flex-shrink: 0; }

.as-req-add {
  border-top: 1px solid #e8e8e8; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.as-req-input {
  border: 1px solid #d0d7de; border-radius: 0.5rem; padding: 0.5rem;
  font-size: 0.8125rem; resize: none; outline: none; font-family: inherit;
  line-height: 1.4; background: #fff;
}
.as-req-input:focus { border-color: #3b82f6; }
.as-req-btn {
  background: #3b82f6; color: #fff; border: none; border-radius: 0.5rem;
  padding: 0.375rem; font-size: 0.8125rem; cursor: pointer; font-family: inherit;
}
.as-req-btn:disabled { background: #ccc; cursor: not-allowed; }

/* Chat area */
.as-chat-wrap {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.as-chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1rem;
  background: #f5f5f5;
}
.as-msg { margin-bottom: 1rem; }
.as-msg-label { font-size: 0.75rem; color: #999; margin-bottom: 0.25rem; }
.as-msg.user { display: flex; flex-direction: column; align-items: flex-end; }
.as-msg.user .as-msg-user {
  max-width: 80%; background: #3b82f6; color: #fff;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem 0.75rem 0.125rem 0.75rem;
  font-size: 0.9375rem; line-height: 1.5; word-break: break-word;
}
.as-msg-ai { max-width: 90%; }
.as-msg-ai .as-msg-content {
  background: #fff; border: 1px solid #e8e8e8;
  padding: 0.75rem 1rem;
  border-radius: 0.125rem 0.75rem 0.75rem 0.75rem;
  font-size: 0.9375rem; line-height: 1.6; color: #333; word-break: break-word;
}
.as-msg-ai .as-msg-content p { margin: 0 0 0.5rem; }
.as-msg-ai .as-msg-content p:last-child { margin-bottom: 0; }
.as-msg-ai .as-msg-content pre {
  background: #1e1e2e; color: #cdd6f4; padding: 0.75rem; border-radius: 0.5rem;
  overflow-x: auto; font-size: 0.875rem; line-height: 1.5; margin: 0.5rem 0;
  max-width: 100%; box-sizing: border-box;
}
.as-msg-ai .as-msg-content code { background: #f0f0f0; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; color: #c7254e; }
.as-msg-ai .as-msg-content pre code { background: transparent; padding: 0; color: inherit; }
.as-msg-ai .as-msg-content ul, .as-msg-ai .as-msg-content ol { margin: 0.5rem 0; padding-left: 1.25rem; }
.as-msg-ai .as-msg-content li { margin-bottom: 0.25rem; }
.as-msg-ai .as-msg-content blockquote { margin: 0.5rem 0; padding-left: 0.75rem; border-left: 3px solid #ddd; color: #666; }
.as-msg-ai .as-msg-content h1, .as-msg-ai .as-msg-content h2, .as-msg-ai .as-msg-content h3, .as-msg-ai .as-msg-content h4 {
  margin: 0.75rem 0 0.5rem; font-weight: 600;
}
.as-chat-empty {
  text-align: center; color: #aaa; font-size: 0.875rem;
  padding: 3rem 1rem;
}

/* Input area */
.as-input-area {
  border-top: 1px solid #e8e8e8;
  background: #f8f9fa; display: flex; flex-direction: column; gap: 0;
}
.as-file-bar {
  display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.5rem 1rem 0;
  align-items: center;
}
.as-file-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: #e0e7ff; border: 1px solid #c7d2fe; border-radius: 0.375rem;
  padding: 0.25rem 0.5rem; font-size: 0.8125rem; color: #1e40af; max-width: 200px;
}
.as-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-file-remove { cursor: pointer; font-size: 1.125rem; line-height: 1; color: #94a3b8; margin-left: 0.25rem; }
.as-file-remove:hover { color: #ef4444; }
.as-file-uploading { opacity: 0.6; font-style: italic; background: #f0f0f0; border-color: #ddd; color: #666; }
.as-input-box {
  position: relative; padding: 0.75rem 1rem;
}
.as-input-box textarea {
  display: block; width: 100%; border: 1px solid #d0d7de; border-radius: 0.75rem;
  padding: 0.75rem 4rem 1.75rem 0.875rem; font-size: 0.9375rem; resize: none; outline: none;
  min-height: 4rem; max-height: 12rem; font-family: inherit; line-height: 1.6;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;
}
.as-input-box textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.as-input-box textarea::placeholder { color: #aaa; }
.as-input-actions {
  position: absolute; bottom: 1rem; right: 1.25rem;
  display: flex; flex-direction: row; gap: 0.25rem; align-items: center;
}
.as-action-btn {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.045); cursor: pointer;
  font-size: 0.875rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; line-height: 1; padding: 0;
}
.as-action-btn:hover { background: rgba(0,0,0,0.1); }
.as-action-btn.recording { color: #ef4444; background: rgba(239,68,68,0.1); animation: as-pulse 1s infinite; }
@keyframes as-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.as-send-btn {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: none; background: var(--primary); color: #fff; cursor: pointer;
  font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s; flex-shrink: 0; padding: 0;
}
.as-send-btn:hover { opacity: 0.9; }
.as-send-btn:disabled { background: #ccc; cursor: not-allowed; opacity: 1; }
.as-input-hint {
  padding: 0 1rem 0.5rem; font-size: 0.75rem; color: #aaa; flex-shrink: 0;
}
/* ===== Apple-style Agent Dropdown ===== */
.as-agent-dd {
  position: relative;
}
.as-agent-dd-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.5rem;
  cursor: pointer; font-size: 0.875rem; color: #333;
  transition: all 0.2s; font-family: inherit;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.as-agent-dd-btn:hover { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.12); }
.as-agent-dd-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink:0; }
.as-agent-dd-label { font-weight: 500; }
.as-agent-dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
  min-width: 200px; max-height: 280px; overflow-y: auto;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 0.25rem;
  animation: as-dd-in 0.15s ease;
}
@keyframes as-dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.as-agent-dd-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 0.5rem;
  font-size: 0.875rem; color: #333; transition: all 0.12s;
}
.as-agent-dd-item:hover { background: rgba(0,0,0,0.05); }
.as-agent-dd-item.active { background: rgba(0,122,255,0.1); color: #007aff; }

/* ===== Session Dropdown (in input toolbar) ===== */
.as-session-btn-wrap {
  position: relative;
  display: inline-flex;
}
.as-session-drop {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 100;
  min-width: 280px; max-height: 320px; overflow-y: auto;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 0.75rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12), 0 -2px 8px rgba(0,0,0,0.06);
  padding: 0.25rem;
  animation: as-dd-in 0.15s ease;
}
.as-session-drop-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 0.5rem;
  font-size: 0.8125rem; color: #333; transition: all 0.12s;
}
.as-session-drop-item:hover { background: rgba(0,0,0,0.05); }
.as-session-drop-item.active { background: rgba(0,122,255,0.1); color: #007aff; }
.as-session-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-session-meta { font-size: 0.6875rem; color: #999; flex-shrink:0; }