.agent-chat { display: flex; flex-direction: column; gap: 18px; } .llm-config { padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(244, 248, 252, 0.95), rgba(234, 240, 245, 0.92)); border: 1px solid rgba(125, 148, 177, 0.14); } .llm-config h4 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #516577; } .config-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; } .config-row:last-of-type { margin-bottom: 16px; } .config-row label { color: #647789; font-size: 14px; font-weight: 600; } .btn-config { min-width: 112px; padding: 0 18px; border-radius: 16px; background: linear-gradient(160deg, var(--btn-secondary-start), var(--btn-secondary-end)); } .llm-config > .btn-config + .btn-config { margin-left: 10px; } .chat-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; } .chat-history { min-height: 280px; max-height: 380px; overflow-y: auto; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(245, 248, 251, 0.95), rgba(234, 240, 245, 0.92)); border: 1px solid rgba(125, 148, 177, 0.14); display: flex; flex-direction: column; gap: 12px; } .message { max-width: min(82%, 420px); padding: 12px 14px; border-radius: 18px; box-shadow: 0 10px 18px rgba(53, 74, 97, 0.08); } .message.user { align-self: flex-end; background: linear-gradient(160deg, #e1f1ff, #c5def6); } .message.agent { align-self: flex-start; background: linear-gradient(160deg, #ecf6ea, #d9ebd6); } .message p { margin: 0; color: #2f4253; line-height: 1.6; word-break: break-word; } @media (max-width: 760px) { .config-row { grid-template-columns: 1fr; gap: 8px; } .llm-config > .btn-config { width: 100%; } .llm-config > .btn-config + .btn-config { margin-left: 0; margin-top: 10px; } } @media (max-width: 640px) { .chat-input { grid-template-columns: 1fr; } .chat-input .btn-save { width: 100%; } .message { max-width: 100%; } }