/* Chat view for the AI Werkplaats; extends style.css (no inline styles: the CSP allows only 'self'). */
.new-chat { width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; border: 1px dashed rgba(217,255,82,.45); border-radius: 12px; padding: 9px 12px; color: var(--lime); background: rgba(217,255,82,.06); font-size: 14px; font-weight: 800; text-align: left; transition: background .16s, border-color .16s; }
.new-chat:hover { border-color: var(--lime); background: rgba(217,255,82,.12); }
.new-chat span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--forest); background: var(--lime); font-size: 16px; line-height: 1; }
.engine-pills { flex-wrap: wrap; }

/* The conversation scrolls; the composer stays in view. */
@media (min-width: 801px) {
  .workspace { height: 100vh; }
}
.workspace.chat-open .page-header { padding-top: 22px; padding-bottom: 12px; }
.workspace.chat-open .page-header h1 { font-size: 30px; }
.workspace.chat-open #pageSubtitle { display: none; }

.detail.chat { max-width: 860px; }
.chat-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.chat-head h2 { margin: 5px 0 4px; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; }
.chat-head p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.chat-new { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; padding: 8px 12px; color: var(--forest); background: white; font-size: 12px; font-weight: 800; }
.chat-new:hover { border-color: #c7d57e; background: #f4ffc9; }
.chat-new span { font-size: 15px; line-height: 1; }

.chat-thread { display: grid; gap: 22px; margin: 0; padding: 0 0 8px; list-style: none; }
.turn { display: grid; gap: 14px; }
.msg { min-width: 0; }
.msg.user { display: grid; justify-items: end; gap: 6px; margin-left: 12%; }
.msg.user .bubble { max-width: 100%; border-radius: 18px 18px 4px 18px; padding: 11px 16px; color: white; background: var(--forest); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user .task-attachments { justify-content: end; margin-top: 0; }
.msg-meta { color: #8a918f; font-size: 10px; }
.msg.assistant { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; margin-right: 6%; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--forest); background: var(--lime); font-size: 14px; }
.msg-body { min-width: 0; }
.msg.assistant .bubble { border-radius: 4px 18px 18px 18px; padding: 14px 18px; background: white; box-shadow: 0 4px 18px rgba(16,32,28,.04); overflow-wrap: anywhere; }
.bubble p { margin: 0 0 10px; }
.bubble > :last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 10px; padding-left: 20px; }
.bubble li + li { margin-top: 3px; }
.bubble code { border-radius: 5px; padding: 1px 5px; background: #f0efea; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.bubble pre.code { margin: 0 0 10px; overflow: auto; border-radius: 12px; padding: 12px 14px; color: #dce9e3; background: #10231d; }
.bubble pre.code code { padding: 0; color: inherit; background: none; font-size: 12px; line-height: 1.6; }
.bubble a { color: var(--forest); font-weight: 700; }
.bubble .answer-heading { font-weight: 900; }
.bubble.working { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.bubble.problem { border: 1px solid #f3cfca; background: #fdf1ef; box-shadow: none; }
.bubble .problem-title { margin-bottom: 6px; color: #9e302a; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--forest); opacity: .25; animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 30% { opacity: .9; transform: translateY(-2px); } 60% { opacity: .25; transform: none; } }
.activity { max-height: 94px; overflow: hidden; margin: 8px 0 0; border-radius: 12px; padding: 10px 12px; color: #6d7673; background: #efeee8; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 7px; color: #8a918f; font-size: 10px; font-weight: 700; }
.link-button { border: 0; padding: 0; color: var(--forest); background: transparent; font-size: 10px; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
.msg-foot .danger { padding: 0; font-size: 10px; }
.msg-details { margin-top: 10px; }
.msg-details .ai-card { margin-top: 0; }
.msg-details .output-card pre { min-height: 0; max-height: 40vh; }

@media (max-width: 800px) {
  .new-chat { margin-top: 10px; }
  .detail.chat { margin-top: 0; }
  .chat-head { flex-direction: column; gap: 10px; }
  .chat-head h2 { font-size: 19px; }
  .msg.user { margin-left: 8%; }
  .msg.assistant { grid-template-columns: 26px minmax(0,1fr); gap: 8px; margin-right: 0; }
  .avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
  .msg.assistant .bubble { padding: 12px 14px; }
  .workspace.chat-open .page-header { padding-top: 64px; padding-bottom: 8px; }
  .workspace.chat-open .page-header h1 { font-size: 26px; }
}