.ai-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  max-width: 1100px;
}

.ai-conversation,
.ai-evidence {
  min-width: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #e1e8f3;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(59, 86, 139, 0.05);
}

.ai-context {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8edf5;
}

.ai-context h2 { margin: 0; color: #1b2b46; font-size: 17px; }
.ai-context p { margin: 6px 0 0; color: #718099; font-size: 11px; line-height: 1.55; }
.ai-scope { flex: 0 0 auto; padding: 5px 8px; border-radius: 6px; background: #edf4ff; color: #2864ed; font-size: 10px; font-weight: 700; }

.conversation-scroll {
  height: clamp(200px, calc(100vh - 470px), 360px) !important;
  min-height: 200px !important;
  max-height: 360px !important;
  margin: 14px 0 12px;
  overflow: auto;
}

.ai-evidence h3 { margin: 0; color: #20304b; font-size: 14px; }
.evidence-subtitle { margin: 6px 0 12px; color: #7a879a; font-size: 10px; line-height: 1.5; }
.ai-evidence .evidence-card { display: block; margin: 0; padding: 12px 0; border-top: 1px solid #edf1f6; }
.ai-evidence .evidence-card b,
.ai-evidence .evidence-card span,
.ai-evidence .evidence-card q { display: block; }
.ai-evidence .evidence-card b { color: #31425d; font-size: 11px; }
.ai-evidence .evidence-card span { margin-top: 3px; color: #7a879a; font-size: 10px; }
.ai-evidence .evidence-card q { margin-top: 7px; color: #68768b; font-size: 11px; line-height: 1.6; }
.ai-evidence .evidence-card q::before,
.ai-evidence .evidence-card q::after { content: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 43, 69, 0.28);
}

.reason-modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #dfe7f4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(25, 45, 83, 0.22);
}

.reason-modal h2 { margin: 0; color: #152039; font-size: 18px; }
.reason-modal p { margin: 8px 0 0; color: #68778d; font-size: 12px; line-height: 1.65; }
.reason-modal textarea { display: block; width: 100%; min-height: 120px; margin-top: 16px; padding: 10px; border: 1px solid #d8e2f1; border-radius: 7px; outline: 0; resize: vertical; font: inherit; }

.ai-source-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #d6e3fb;
  border-radius: 7px;
  background: #f4f8ff;
}

.ai-source-context span { color: #2864ed; font-size: 10px; font-weight: 700; }
.ai-source-context b { overflow: hidden; color: #21314b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ai-source-context small { grid-column: 2; color: #748298; font-size: 10px; }
.ai-source-context button { grid-column: 3; grid-row: 1 / span 2; height: 28px; padding: 0 8px; border: 1px solid #d3dff4; border-radius: 6px; background: #fff; color: #536a90; cursor: pointer; font-size: 11px; }

.ai-composer { flex-wrap: wrap; }
.ai-composer-actions { display: flex; gap: 8px; align-items: stretch; }
.ai-model-picker { display: grid; gap: 3px; color: #68778d; font-size: 10px; font-weight: 700; }
.ai-model-picker select { min-width: 112px; height: 24px; border: 1px solid #d8e2f1; border-radius: 6px; background: #fff; color: #263650; font: inherit; font-size: 11px; }
.answer-bubble h3 { display: flex; align-items: center; gap: 8px; }
.answer-model { padding: 3px 6px; border-radius: 5px; background: #eef4ff; color: #2864ed; font-size: 10px; font-weight: 700; }
.ai-screenshot-button, .ai-screenshot-selected { display: inline-flex; align-items: center; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid #d8e2f1; border-radius: 6px; background: #fff; color: #526786; font-size: 11px; font-weight: 700; cursor: pointer; }
.ai-screenshot-button:hover { border-color: #a9c3f5; background: #f7faff; color: #2864ed; }
.ai-screenshot-selected { max-width: 190px; gap: 7px; overflow: hidden; color: #3e5f91; text-overflow: ellipsis; white-space: nowrap; }
.ai-screenshot-selected button { flex: 0 0 auto; height: auto; width: auto; padding: 0; border: 0; background: transparent; color: #2864ed; font: inherit; cursor: pointer; }
.chat-screenshot-name { display: block; margin-top: 7px; color: #61749a; font-size: 11px; }
.screenshot-ocr-result { margin-top: 12px; padding: 10px; border: 1px solid #e0e8f4; border-radius: 6px; background: #f8faff; color: #526178; font-size: 12px; line-height: 1.65; }
.screenshot-ocr-result summary { color: #2864ed; cursor: pointer; font-weight: 700; }
.screenshot-ocr-result p { margin: 8px 0 6px; color: #42536c; font-size: 12px; white-space: pre-wrap; }
.screenshot-ocr-result small { color: #7c899a; font-size: 10px; }

.context-evidence { margin: 0 0 10px; padding: 10px; border: 1px solid #dce6f7; border-radius: 7px; background: #f7faff; }
.context-evidence b,
.context-evidence span { display: block; }
.context-evidence b { color: #2864ed; font-size: 10px; }
.context-evidence span { margin-top: 4px; color: #58677d; font-size: 11px; line-height: 1.45; }

.ai-evidence { display: flex; flex-direction: column; gap: 16px; }
.ai-history { min-height: 0; }
.ai-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-history-head span { color: #7a879a; font-size: 11px; }
.ai-history-list { display: grid; gap: 5px; max-height: 220px; margin-top: 10px; overflow: auto; }
.ai-history-item { width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #53627a; cursor: pointer; text-align: left; }
.ai-history-item:hover, .ai-history-item.is-active { border-color: #d9e6fb; background: #f5f8ff; }
.ai-history-item b, .ai-history-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-history-item b { color: #34445e; font-size: 11px; }
.ai-history-item small { margin-top: 3px; color: #8793a5; font-size: 10px; }
.ai-current-evidence { min-height: 0; padding-top: 15px; border-top: 1px solid #e8edf5; }

@media (max-width: 900px) {
  .ai-workspace { grid-template-columns: 1fr; }
  .conversation-scroll { height: 300px !important; }
  .ai-evidence { display: none; }
  .ai-source-context { grid-template-columns: 1fr auto; }
  .ai-source-context small { grid-column: 1; }
  .ai-source-context button { grid-column: 2; grid-row: 1 / span 2; }
  .ai-composer-actions { width: 100%; justify-content: space-between; }
}