/* ============================================================
   App-specific layout — full-width, built on frontend-kit tokens
   ============================================================ */

:root {
  --app-content-max: 1200px;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  background: var(--background, #fff);
}

/* ── Bosch header (frontend kit o-header) ───────────────────── */
.o-header {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.o-header__top {
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bds-space-12, 0.75rem);
}

.o-header__logo {
  margin-left: 0;
  margin-right: 0;
}

.o-header__new-chat {
  flex-shrink: 0;
}

/* ── Chat area ──────────────────────────────────────────────── */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--bds-space-20, 1.25rem) 0;
}

.chat-area::-webkit-scrollbar { width: 8px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: var(--bds-grey-20, #c8ccd0); border-radius: 9999px; }

.chat-area__inner {
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--bds-space-20, 1.25rem);
}

/* ── Welcome state ───────────────────────────────────────────── */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--bds-space-12, 0.75rem);
  margin: auto 0;
  padding: var(--bds-space-16, 1rem);
}

.welcome-avatar {
  margin-bottom: var(--bds-space-4, 0.25rem);
}

.welcome-heading {
  font: var(--bds-weight-bold, 700) var(--bds-size-xl, 1.5rem)/var(--bds-lh-xl, 1.4) var(--bds-font-family, sans-serif);
  margin: 0;
  color: var(--bds-text, #1a1c1d);
}

.welcome-text {
  font: var(--bds-weight-regular, 400) var(--bds-size-m, 1rem)/var(--bds-lh-m, 1.5) var(--bds-font-family, sans-serif);
  color: var(--bds-text-secondary, #6e757c);
  margin: 0;
  max-width: 440px;
}

/* ── Messages ───────────────────────────────────────────────── */
.messages {
  display: flex;
  flex-direction: column;
  gap: var(--bds-space-20, 1.25rem);
}

.message {
  display: flex;
  gap: var(--bds-space-12, 0.75rem);
  max-width: 100%;
}

.message.user {
  flex-direction: row-reverse;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: var(--bds-space-8, 0.5rem);
  margin-bottom: var(--bds-space-4, 0.25rem);
  font-size: var(--bds-size-s, 0.75rem);
  color: var(--bds-text-secondary, #6e757c);
}

.message.user .msg-meta {
  flex-direction: row-reverse;
}

.msg-name {
  font-weight: var(--bds-weight-bold, 700);
}

.msg-content-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: calc(100% - 44px);
}

.message.user .msg-content-wrap {
  align-items: flex-end;
}

.bubble {
  padding: var(--bds-space-12, 0.75rem) var(--bds-space-16, 1rem);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.message.assistant .bubble {
  background: var(--bds-white, #fff);
  border: 1px solid var(--bds-grey-15, #d5d9dc);
}

.message.user .bubble {
  background: var(--bds-blue-50, #e8f2fb);
  border: 1px solid #b9def5;
  color: var(--bds-text, #1a1c1d);
}

/* ── Markdown inside bubbles ────────────────────────────────── */
.bubble p { margin: var(--bds-space-4, 0.25rem) 0; }
.bubble p:first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
  margin: var(--bds-space-12, 0.75rem) 0 var(--bds-space-4, 0.25rem);
  font-size: var(--bds-size-m, 1rem);
  font-weight: var(--bds-weight-bold, 700);
}
.bubble h1:first-child, .bubble h2:first-child, .bubble h3:first-child, .bubble h4:first-child { margin-top: 0; }
.bubble ul, .bubble ol { padding-left: var(--bds-space-20, 1.25rem); margin: var(--bds-space-4, 0.25rem) 0; }
.bubble li { margin: var(--bds-space-2, 0.125rem) 0; }
.bubble code {
  background: var(--bds-grey-10, #eceef0);
  padding: 2px 6px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.85em;
}
.bubble pre {
  background: var(--bds-grey-10, #eceef0);
  padding: var(--bds-space-12, 0.75rem);
  overflow-x: auto;
  margin: var(--bds-space-8, 0.5rem) 0;
}
.bubble pre code { background: none; padding: 0; }
.bubble table { border-collapse: collapse; width: 100%; font-size: var(--bds-size-sm, 0.875rem); margin: var(--bds-space-8, 0.5rem) 0; }
.bubble th, .bubble td { border: 1px solid var(--bds-grey-15, #d5d9dc); padding: var(--bds-space-8, 0.5rem) var(--bds-space-12, 0.75rem); text-align: left; }
.bubble th { background: var(--bds-grey-05, #f3f5f6); font-weight: var(--bds-weight-bold, 700); }
.bubble strong { font-weight: var(--bds-weight-bold, 700); }
.bubble a { color: var(--bds-text-link, #0078d4); text-decoration: underline; text-underline-offset: 2px; }

/* ── Streaming cursor ────────────────────────────────────────── */
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--bds-blue, #00629a);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: bdsblink 0.8s step-end infinite;
}
@keyframes bdsblink { 50% { opacity: 0; } }

/* ── Typing indicator ────────────────────────────────────────── */
.typing-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}
.typing-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bds-grey-40, #9aa0a6);
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── References panel ────────────────────────────────────────── */
.refs-panel {
  margin-top: var(--bds-space-8, 0.5rem);
  border-top: 1px solid var(--bds-divider, #d5d9dc);
}

.refs-toggle {
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bds-space-12, 0.75rem);
  padding: var(--bds-space-12, 0.75rem) var(--bds-space-4, 0.25rem);
  font-family: inherit;
  font-size: var(--bds-size-sm, 0.875rem);
  font-weight: var(--bds-weight-bold, 700);
  color: var(--bds-text, #1a1c1d);
}
.refs-toggle:hover { color: var(--bds-accent, #00629a); }
.refs-toggle:focus-visible { outline: 2px solid var(--bds-focus-ring, #00629a); outline-offset: -2px; }

.refs-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--bds-space-8, 0.5rem);
}

.refs-chevron {
  transition: transform var(--bds-duration, 250ms) var(--bds-ease, cubic-bezier(0.4,0,0.2,1));
  flex-shrink: 0;
  color: var(--bds-accent, #00629a);
}
.refs-toggle[aria-expanded="true"] .refs-chevron { transform: rotate(180deg); }

.refs-list {
  display: flex;
  flex-direction: column;
  gap: var(--bds-space-4, 0.25rem);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--bds-duration, 250ms) var(--bds-ease, cubic-bezier(0.4,0,0.2,1)),
              padding var(--bds-duration, 250ms) var(--bds-ease, cubic-bezier(0.4,0,0.2,1));
}
.refs-list.open {
  max-height: 500px;
  padding: 0 var(--bds-space-4, 0.25rem) var(--bds-space-12, 0.75rem);
}

.refs-item {
  display: flex;
  align-items: center;
  gap: var(--bds-space-8, 0.5rem);
  padding: var(--bds-space-8, 0.5rem) var(--bds-space-12, 0.75rem);
  background: var(--bds-grey-05, #f3f5f6);
  font-size: var(--bds-size-sm, 0.875rem);
  color: var(--bds-text, #1a1c1d);
}

.refs-item-icon {
  flex-shrink: 0;
  color: var(--bds-text-secondary, #6e757c);
}

.refs-item-text {
  flex: 1;
  min-width: 0;
}

.refs-item-arrow {
  flex-shrink: 0;
  color: var(--bds-accent, #00629a);
}

.refs-item a {
  color: var(--bds-text, #1a1c1d);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--bds-space-8, 0.5rem);
  width: 100%;
}
.refs-item a:hover .refs-item-text { text-decoration: underline; }

/* ── Input area ─────────────────────────────────────────────── */
.input-area {
  border-top: 1px solid var(--bds-grey-15, #d5d9dc);
  background: var(--bds-white, #fff);
  padding: var(--bds-space-12, 0.75rem) 0 var(--bds-space-8, 0.5rem);
  flex-shrink: 0;
}

.input-area__inner {
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.input-form {
  display: flex;
  align-items: flex-end;
  gap: var(--bds-space-8, 0.5rem);
}

.input-field {
  flex: 1;
  min-width: 0;
}

.input-field .bds-field__control {
  background: var(--bds-grey-05, #f3f5f6);
  min-height: 0;
  padding: var(--bds-space-8, 0.5rem) var(--bds-space-12, 0.75rem);
}

.input-textarea {
  padding: var(--bds-space-4, 0.25rem) 0 !important;
  min-height: 40px !important;
  max-height: 120px;
  line-height: var(--bds-lh-m, 1.5);
}

.send-btn {
  flex-shrink: 0;
  height: 48px;
  padding: 0 var(--bds-space-12, 0.75rem);
}

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

.disclaimer {
  text-align: center;
  color: var(--bds-text-muted, #9aa0a6);
  margin: var(--bds-space-4, 0.25rem) 0 0;
}

/* ── Search status (in-flight tool call) ───────────────────────── */
.search-status {
  display: inline-flex;
  align-items: center;
  gap: var(--bds-space-8, 0.5rem);
  color: var(--bds-text-secondary, #6e757c);
  font-size: var(--bds-size-s, 0.75rem);
  padding: var(--bds-space-2, 0.125rem) 0;
}
.search-status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Question options (clickable) ─────────────────────────────── */
.message.question-prompt {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--bds-space-12, 0.75rem);
  max-width: 100%;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: var(--bds-space-8, 0.5rem);
  max-width: 80%;
}

.question-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--bds-grey-30, #9aa0a6);
  color: var(--bds-text, #1a1c1d);
  font-family: inherit;
  font-size: var(--bds-size-m, 1rem);
  text-align: left;
  padding: var(--bds-space-8, 0.5rem) var(--bds-space-12, 0.75rem);
  cursor: pointer;
  transition: background var(--bds-duration, 250ms) var(--bds-ease, cubic-bezier(0.4,0,0.2,1));
}
.question-btn:hover {
  background: var(--bds-grey-10, #eceef0);
}
.question-btn:focus-visible {
  outline: 2px solid var(--bds-focus-ring, #7b61ff);
  outline-offset: 2px;
}