/* Agent chat composer shared */
.home-agent-embed { margin-bottom: 20px; }
.panel-card.chat-composer {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8edf2;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow: visible;
}
.panel-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  border-radius: 14px 14px 0 0;
}
.home-agent-embed .chat-body {
  min-height: 280px;
  max-height: 420px;
}
/* Agent 对话嵌入（首页 / Agent 共用） */
.chat-body {
min-height: 420px;
max-height: 520px;
overflow-y: auto;
padding: 20px;
background: #fafbfc;
}

.chat-msg {
max-width: 80%;
margin-bottom: 16px;
}

.chat-msg.system,
.chat-msg.ai { margin-right: auto; }

.chat-msg.user {
margin-left: auto;
text-align: right;
}

.chat-msg-text {
display: inline-block;
padding: 12px 16px;
border-radius: 12px;
background: #fff;
border: 1px solid #e8edf2;
font-size: 14px;
line-height: 1.7;
color: #374151;
text-align: left;
}

.chat-msg.user .chat-msg-text {
background: #ecfdf5;
border-color: #bbf7d0;
}

.chat-msg-meta {
font-size: 12px;
color: #9ca3af;
margin-top: 6px;
}

.chat-intent {
font-size: 11px;
color: #00b7f0;
margin-top: 8px;
}

.chat-media {
margin-top: 12px;
}

.chat-media img,
.chat-media video {
max-width: 100%;
border-radius: 10px;
border: 1px solid #e5e7eb;
}

.chat-footer {
display: flex;
align-items: center;
padding: 14px 18px 18px;
border-top: 1px solid #f3f4f6;
background: #fff;
}

.composer-pill {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 52px;
padding: 6px 8px 6px 8px;
border: 1px solid #e5e7eb;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: border-color 0.15s, box-shadow 0.15s;
}

.composer-pill:focus-within {
border-color: #d1d5db;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.04);
}

.composer-plus {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #f3f4f6;
color: #9ca3af;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
}

.composer-plus:hover { background: #e5e7eb; color: #6b7280; }

.composer-plus svg { width: 18px; height: 18px; display: block; }

.chat-input {
flex: 1;
min-width: 0;
height: 40px;
border: none;
background: transparent;
padding: 0 4px;
font-size: 15px;
color: #111827;
outline: none;
box-shadow: none;
}

.chat-input::placeholder { color: #9ca3af; }

.chat-input:focus {
border: none;
box-shadow: none;
}

.composer-right {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding-right: 2px;
}

.composer-mode {
display: inline-flex;
align-items: center;
gap: 4px;
height: 32px;
padding: 0 8px;
border: none;
background: transparent;
color: #6b7280;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
}

.composer-mode:hover { background: #f9fafb; color: #374151; }

.composer-mode svg { width: 12px; height: 12px; opacity: 0.7; }

.composer-mic {
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: transparent;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}

.composer-mic:hover { background: #f3f4f6; color: #111827; }

.composer-mic svg { width: 18px; height: 18px; display: block; }

.btn-send {
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: #111827;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}

.btn-send:hover { background: #000; }

.btn-send:disabled {
opacity: 0.45;
cursor: not-allowed;
}

.btn-send.btn-send--pause {
background: #ea580c;
}

.btn-send.btn-send--pause:hover {
background: #c2410c;
}

.btn-send svg { width: 16px; height: 16px; display: block; }

.composer-attach-input { display: none; }

.composer-shell {
position: relative;
width: 100%;
}

.cx-pop {
display: none;
position: absolute;
bottom: calc(100% + 10px);
z-index: 40;
background: #fff;
border: 1px solid #eceff3;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
overflow: hidden;
}

.cx-pop.open { display: block; }

.cx-pop-add {
left: 0;
width: min(320px, calc(100vw - 48px));
}

.cx-pop-models {
right: 0;
width: min(340px, calc(100vw - 48px));
}

.cx-search {
width: 100%;
height: 42px;
border: none;
border-bottom: 1px solid #f0f2f5;
padding: 0 14px;
font-size: 13px;
color: #111827;
outline: none;
background: #fff;
}

.cx-search::placeholder { color: #b0b6bf; }

.cx-list {
padding: 6px;
max-height: 320px;
overflow-y: auto;
}

.cx-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
border: none;
background: transparent;
text-align: left;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
color: #1f2937;
font-size: 13.5px;
}

.cx-item:hover,
.cx-item.active {
background: #f3f4f6;
}

.cx-item .cx-ico {
width: 18px;
height: 18px;
flex-shrink: 0;
color: #4b5563;
display: inline-flex;
align-items: center;
justify-content: center;
}

.cx-item .cx-ico svg { width: 16px; height: 16px; display: block; }

.cx-item .cx-label { flex: 1; min-width: 0; }

.cx-item .cx-meta {
color: #9ca3af;
font-size: 12px;
margin-left: 8px;
white-space: nowrap;
}

.cx-item .cx-badge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 4px;
background: #3b82f6;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
margin-left: 8px;
}

.cx-item .cx-badge.dev {
background: #f3f4f6;
color: #9ca3af;
border: 1px solid #e5e7eb;
font-weight: 600;
}

.cx-item.disabled {
opacity: 0.72;
cursor: not-allowed;
}

.cx-item.disabled:hover {
background: transparent;
}

.cx-toast {
position: fixed;
right: 20px;
bottom: 24px;
z-index: 120;
max-width: 320px;
padding: 12px 14px;
border-radius: 10px;
background: #111827;
color: #fff;
font-size: 13px;
line-height: 1.5;
box-shadow: 0 10px 30px rgba(0,0,0,.2);
display: none;
}

.cx-toast.show { display: block; }
.cx-toast.warn { background: #92400e; }

.cx-item .cx-check {
width: 16px;
color: #111827;
font-size: 13px;
margin-left: 6px;
flex-shrink: 0;
}

.cx-item .cx-chev {
color: #9ca3af;
font-size: 14px;
margin-left: 4px;
}

.cx-divider {
height: 1px;
background: #eef0f3;
margin: 4px 8px;
}

.cx-toggles {
padding: 8px 12px 4px;
border-bottom: 1px solid #f0f2f5;
}

.cx-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 2px;
font-size: 13px;
color: #1f2937;
}

.cx-switch {
position: relative;
width: 36px;
height: 20px;
border-radius: 999px;
background: #d1d5db;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.15s;
}

.cx-switch.on { background: #22c55e; }

.cx-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
transition: left 0.15s;
}

.cx-switch.on::after { left: 18px; }

.cx-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid #eef0f3;
background: #fafbfc;
}

.cx-footer-btn {
border: none;
background: transparent;
color: #374151;
font-size: 13px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
width: 100%;
text-align: left;
}

.cx-footer-btn:hover { background: #f3f4f6; }

.cx-foot-plus {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: #e5e7eb;
color: #111827;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}

.cx-foot-model {
flex: 1;
border: none;
background: transparent;
text-align: left;
font-size: 12.5px;
color: #374151;
cursor: pointer;
padding: 6px 4px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
}

.cx-foot-model:hover { background: #f3f4f6; }

.cx-foot-model span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}