/* ========================================
   Shared Chat Section (jobhelp, ugeplan)
   ======================================== */
.sb-chat-section {
  width: 100%;
  margin: 0 0 52px;
  --sb-chat-border: #e8e8e9;
  --sb-chat-border-strong: #dddddf;
  --sb-chat-surface: #ffffff;
  --sb-chat-surface-muted: #f0f0f1;
  --sb-chat-text: #5a5d62;
  --sb-chat-text-muted: #b1b1b4;
  --sb-chat-accent: #629d9b;
  --sb-chat-accent-hover: #5a9593;
}

.sb-chat-section>* {
  max-width: 100%;
}

.sb-chat-section .mwai-chat-container,
.sb-chat-section .mwai-window-box,
.sb-chat-section .mwai-body,
.sb-chat-section .mwai-conversation {
  max-height: none !important;
  height: auto !important;
  background: white !important;

}

.sb-chat-section .mwai-window-box,
.sb-chat-section .mwai-window-box * {
  box-sizing: border-box;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sb-chat-section .mwai-window-box {
  width: 100%;
  border-radius: 5px;
}
.mwai-window-box {

  border-radius: 5px;
}
.sb-chat-section .mwai-body {
  display: flex;
  flex-direction: column;
  background: var(--sb-chat-surface);
  border: 1px solid var(--sb-chat-border);
  border-radius: 5px;
  color: var(--sb-chat-text);
  box-shadow: none;
  overflow: hidden;
}

.sb-chat-section .mwai-conversation {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: visible !important;
  padding: 15px 14px 11px;
}

.sb-chat-section .mwai-conversation .mwai-reply {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(380px, 100%);
  margin: 0;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: none;
}

.sb-chat-section .mwai-conversation .mwai-reply.mwai-ai,
.sb-chat-section .mwai-conversation .mwai-reply.mwai-error {
  align-self: flex-start;
  background: var(--sb-chat-surface-muted);
  margin-left: 5px;
  margin-bottom: 0;
  padding: 7px 12px;
  position: relative;
  max-width: min(95%, 900px);
  border: none;
  border-radius: 15px;
  color: var(--sb-chat-text);

}

.sb-chat-section .mwai-conversation .mwai-reply.mwai-user {
  align-self: flex-end;
  background: var(--sb-chat-accent);
  margin-right: 10px;
  margin-bottom: 0;
  padding: 7px 12px;
  position: relative;
  border: none;
  border-radius: 15px;
  color: #ffffff !important;
}

.mwai-user .mwai-text {
  color: #ffffff !important;
}

.mwai-text p {
  margin: 2px 0px !important;
}

.sb-chat-section .mwai-conversation .mwai-reply.mwai-user::before,
.sb-chat-section .mwai-conversation .mwai-reply.mwai-user::after {
  content: "";
  position: absolute;
  bottom: 0;
}

.sb-chat-section .mwai-conversation .mwai-reply.mwai-user::before {
  z-index: 0;
  right: -10px;
  width: 20px;
  height: 20px;
  background: var(--sb-chat-accent);
  border-bottom-left-radius: 15px;
}

.sb-chat-section .mwai-conversation .mwai-reply.mwai-user::after {
  z-index: 1;
  right: -10px;
  width: 10px;
  height: 20px;
  background: var(--sb-chat-surface);
  border-bottom-left-radius: 10px;
}

.sb-chat-section .mwai-reply .mwai-name {
  display: none;
}

.sb-chat-section .mwai-reply .mwai-text {
  display: block;
}

.sb-chat-section .mwai-reply.mwai-ai .mwai-text,
.sb-chat-section .mwai-reply.mwai-error .mwai-text {
  margin: 0;
}

.sb-chat-section .mwai-reply.mwai-ai::before,
.sb-chat-section .mwai-reply.mwai-error::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -7px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: var(--sb-chat-surface-muted);
  border-bottom-right-radius: 15px;
}

.sb-chat-section .mwai-reply.mwai-ai::after,
.sb-chat-section .mwai-reply.mwai-error::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: var(--sb-chat-surface);
  border-bottom-right-radius: 10px;
}

.sb-chat-section .mwai-reply.mwai-ai .mwai-text> :first-child,
.sb-chat-section .mwai-reply.mwai-error .mwai-text> :first-child {
  margin-top: 0;
}

.sb-chat-section .mwai-reply.mwai-ai .mwai-text> :last-child,
.sb-chat-section .mwai-reply.mwai-error .mwai-text> :last-child {
  margin-bottom: 0;
}

/* Force all text inside an AI reply to the bubble color. The shared
   azure_markdown.css applies muted/accent colors on h6, blockquote, footnotes,
   and links via CSS variables, which made parts of the AI reply render in a
   lighter grey. Pinning these to --sb-chat-text restores a single uniform
   color across the whole bubble. Code (<code>, <pre>, .pl-*) is intentionally
   left alone so syntax highlighting still works inside fenced code blocks. */
.sb-chat-section .mwai-reply.mwai-ai .markdown-body * {
  color: var(--sb-chat-text) !important;
}

.sb-chat-section .mwai-input,
.sb-chat-section .mwai-input.mwai-active {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid #f0f1f2;
  background: var(--sb-chat-surface);
  position: relative !important;
}

.sb-chat-section .mwai-input .mwai-input-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 41px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  padding: 0px 0px 0px 0px !important;

  border-radius: 8px;
  background: var(--sb-chat-surface);
}

.sb-chat-section .mwai-file-upload {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

.sb-chat-section .mwai-file-upload-icon svg,
.sb-chat-section .mwai-file-upload-icon .lucide {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 1;

}

.sb-chat-section .mwai-file-upload-icon::before {
  width: 10px;
  height: 2px;
  border-radius: 999px;
}

.sb-chat-section .mwai-file-upload-icon::after {
  width: 2px;
  height: 10px;
  border-radius: 999px;
}

.sb-chat-section .mwai-file-upload-icon:has(svg)::before,
.sb-chat-section .mwai-file-upload-icon:has(.lucide)::before,
.sb-chat-section .mwai-file-upload-icon:has(svg)::after,
.sb-chat-section .mwai-file-upload-icon:has(.lucide)::after {
  display: none;
}

.sb-chat-section .mwai-input textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 41px;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: var(--sb-chat-surface);
  color: var(--sb-chat-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  box-shadow: none;
}

.sb-chat-section .mwai-input textarea::placeholder {
  color: var(--sb-chat-text-muted);
  opacity: 1;
}

.sb-chat-section .mwai-microphone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #c9cbcf !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  flex-shrink: 0;
}

.sb-chat-section .mwai-microphone svg {
  width: 18px !important;
  height: 18px !important;
  color: #9ca3af !important;
}

.sb-chat-section .mwai-input .mwai-input-submit,
.sb-chat-section .mwai-input-submit {
  width: auto;
  height: 32px;
  min-width: 62px;
  min-height: 30px;
  margin: 0;
  padding: 0 16px !important;
  border: 0;
  border-radius: 6px;
  background: var(--sb-chat-accent) !important;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.sb-chat-section .mwai-input .mwai-input-submit:hover,
.sb-chat-section .mwai-input .mwai-input-submit:focus,
.sb-chat-section .mwai-input-submit:hover,
.sb-chat-section .mwai-input-submit:focus {
  background: var(--sb-chat-accent-hover) !important;
}

.sb-chat-section .mwai-input .mwai-input-submit:focus-visible,
.sb-chat-section .mwai-input textarea:focus-visible {
  outline: 2px solid rgba(92, 155, 158, 0.22);
  outline-offset: 0;
}

@media (max-width: 480px) {

  .sb-chat-section .mwai-input {
    gap: 6px;
  }
}