*{box-sizing:border-box}body{margin:0;background:#f3f6f9;color:#173044;font:16px/1.6 system-ui,sans-serif}header{background:#102d3d;padding:20px 5%;display:flex;justify-content:space-between;gap:16px}header a{color:white;text-decoration:none}header a:first-child{font-weight:800;letter-spacing:.15em}main{max-width:1240px;margin:auto;padding:25px 20px}h1,h2{line-height:1.3}h2{font-size:22px}h3{font-size:16px}.card{background:white;border:1px solid #d7e1e8;border-radius:13px;padding:22px;margin-bottom:18px}.workspace{display:grid;grid-template-columns:300px 1fr;gap:20px}aside{align-self:start}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{background:#146e68;color:white;border:0;padding:10px 15px;border-radius:7px;font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.secondary{background:#e8eff3;color:#173044}input:not([type=checkbox]),textarea{display:block;width:100%;font:inherit;padding:11px;border:1px solid #a7bbc8;border-radius:7px;margin-bottom:14px}label{display:block;margin:12px 0 6px}.check{display:flex;align-items:flex-start;gap:10px}.check input{margin-top:8px}textarea{min-height:110px;resize:vertical}.small{font-size:13px;color:#52687a}.notice{background:#fff3d4;padding:16px;border:1px solid #d6b868;border-radius:8px}#messages{min-height:180px;max-height:560px;overflow:auto}.msg{border:1px solid #dce5eb;padding:14px;border-radius:10px;margin:12px 0;overflow-wrap:anywhere}.msg.user{background:#edf6f3;margin-left:20px}.msg.assistant{background:#f5f8fc;margin-right:20px}.body{white-space:pre-wrap}.meta{font-size:12px;color:#52687a}#history{max-height:470px;overflow:auto}.history-item{display:block;width:100%;text-align:left;margin:8px 0;background:#f0f4f7;color:#173044;overflow-wrap:anywhere}.history-item.active{outline:2px solid #146e68}#status{min-height:30px}footer{text-align:center;padding:20px;color:#52687a}a{color:#146e68}summary{cursor:pointer;font-weight:650}[hidden]{display:none!important}:focus-visible{outline:3px solid #c58a2b;outline-offset:3px}@media(max-width:760px){.workspace{grid-template-columns:1fr}#history{max-height:200px}.card{padding:16px}}
/* Formatted AI responses */
.assistant .body.formatted {
  white-space: normal;
  line-height: 1.7;
}

.assistant .body.formatted > :first-child {
  margin-top: 0;
}

.assistant .body.formatted > :last-child {
  margin-bottom: 0;
}

.assistant .body.formatted p {
  margin: 0 0 12px;
}

.assistant .body.formatted h1,
.assistant .body.formatted h2,
.assistant .body.formatted h3,
.assistant .body.formatted h4,
.assistant .body.formatted h5,
.assistant .body.formatted h6 {
  font-size: 1.1rem;
  margin: 18px 0 8px;
}

.assistant .body.formatted ul,
.assistant .body.formatted ol {
  padding-left: 24px;
  margin: 8px 0 14px;
}

.assistant .body.formatted li {
  margin-bottom: 6px;
}

.assistant .body.formatted pre {
  white-space: pre;
  overflow-x: auto;
  background: #e8edf3;
  padding: 12px;
  border-radius: 8px;
}

.assistant .body.formatted code {
  font-family: monospace;
}

.assistant .body.formatted table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  max-width: 100%;
}

.assistant .body.formatted th,
.assistant .body.formatted td {
  border: 1px solid #cbd6df;
  padding: 8px 10px;
}

.assistant .body.formatted blockquote {
  border-left: 3px solid #9bb3c5;
  margin-left: 0;
  padding-left: 14px;
}
.site-header {
  display: block;
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid #dce3ec;
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.site-header .site-brand {
  color: #173044;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.site-header nav a {
  color: #344b60;
  text-decoration: none;
  font-size: 0.95rem;
}

.site-header nav a:hover {
  color: #176c65;
  text-decoration: underline;
}

.page-banner {
  background: linear-gradient(
    120deg,
    #102d43 0%,
    #1b4864 60%,
    #176c65 100%
  );
  color: #ffffff;
}

.page-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px;
}

.banner-label {
  margin: 0 0 10px;
  color: #b9e2df;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-banner h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.banner-description {
  max-width: 720px;
  margin: 0;
  color: #e0ebf4;
  font-size: 1.05rem;
}

@media (max-width: 650px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header nav {
    gap: 16px;
  }

  .page-banner-inner {
    padding: 32px 20px;
  }
}
#voice[aria-pressed="true"] {
  background: #a52b36;
  color: #ffffff;
  border-color: #a52b36;
}

#voiceStatus {
  min-height: 1.5em;
  margin-bottom: 6px;
}

#voicePrivacy {
  margin-top: 6px;
}

#prompt[readonly] {
  background: #f2f6f7;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo-img {
  height: 38px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

.auth-card {
  max-width: 540px;
  margin: 0 auto 24px;
}

.login-video-wrapper {
  margin: 0 0 20px;
  border-radius: 10px;
  overflow: hidden;
  background: #0a1726;
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 280px;
}

.login-video {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #0a1726;
}
.login-video-box {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 auto 20px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: #000;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.login-video-box video {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}
#auth .login-video-box {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #000000;
}

#auth .login-video-box video {
  display: block;
  width: 50%;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}
/* Video on the left; complete login area on the right */
#auth.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: center;

  width: 100%;
  max-width: 1000px;
  margin: 0 auto 20px;
  padding: 24px;
}

#auth .auth-details {
  min-width: 0;
}

#auth .login-video-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;
}

#auth .login-video-box video {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
}

/* On smaller screens, video goes above the login area */
@media (max-width: 760px) {
  #auth.auth-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px;
  }
}

#inlineAnalysisPanels {
  width: 100%;
  min-width: 0;
}

#inlineAnalysisPanels:empty {
  display: none;
}

#inlineAnalysisPanels .inline-analysis-panel[open] {
  display: block;
  position: static;
  overflow-wrap: anywhere;
}

#inlineAnalysisPanels .inline-analysis-panel textarea {
  box-sizing: border-box;
  max-width: 100%;
}

#inlineAnalysisPanels .inline-analysis-panel pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#inlineAnalysisPanels .inline-analysis-panel button {
  margin: 6px 6px 0 0;
}

#inlineAnalysisPanels .inline-analysis-panel details {
  margin: 12px 0;
}

/* Shared width for the AI-chat page */
main {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
  padding-inline: clamp(12px, 2vw, 32px);
}

/* Let the reports fill their available container */
#conversationReports {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
}

/* Keep the report content and graph flexible */
#paired-report-content,
#conversationReports .cn,
#conversationReports .cn-stage,
#conversationReports .cn-canvas {
  min-width: 0;
}

/* AI responses only: no background, border, or shadow. */
body.signed-in .msg.assistant {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove any background applied to the response body itself. */
body.signed-in .msg.assistant > .body {
  background: transparent !important;
}

/* Report heading and compact PDF button. */
.report-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.report-heading h3 {
  margin: 0;
}

.report-heading .report-pdf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  padding: 5px 10px;

  background: #ffffff;
  color: #000000;
  border: 1px solid #b9cebf;
  border-radius: 6px;

  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;

  cursor: pointer;
}

.report-heading .report-pdf-button:hover:not(:disabled) {
  background: #e5f0e8;
}

.report-heading .report-pdf-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.source-review {
  margin-top: 18px;
  padding: 14px;

  background: #ffffff;
  color: #111111;

  border: 1px solid #b9cebf;
  border-radius: 8px;
}

.source-review > summary {
  font-weight: 600;
  cursor: pointer;
}

.source-review-note {
  color: #526459;
  font-size: 0.9rem;
  line-height: 1.5;
}

.source-review label {
  display: block;
  margin-top: 14px;
}

.source-review .source-review-select {
  display: block;

  width: 100%;
  max-width: 100%;
  min-height: 40px;

  margin-top: 6px;
  padding: 8px;

  background: #ffffff;
  color: #111111;

  border: 1px solid #b9cebf;
  border-radius: 6px;

  font: inherit;
}

.source-review-content {
  margin-top: 16px;
}

.source-review-content h4 {
  margin: 16px 0 8px;
}

.source-review-content dl {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 8px 12px;

  margin: 14px 0;
}

.source-review-content dt {
  font-weight: 600;
}

.source-review-content dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.source-review-evidence {
  margin-top: 12px;
  padding: 12px;

  border: 1px solid #dbe6dd;
  border-radius: 6px;

  background: #f8fbf9;
}

.source-review-attribution {
  margin-top: 0;
  font-weight: 600;
}

.source-review-evidence blockquote {
  margin: 10px 0;
  padding-left: 12px;

  border-left: 3px solid #80b491;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source-review-match {
  color: #285b40;
  font-size: 0.85rem;
}

.source-review-warning {
  color: #8b421e;
  font-size: 0.85rem;
}

.source-review-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .source-review-content dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .source-review-content dd {
    margin-bottom: 10px;
  }
}

.cn-stage {
  grid-template-columns: minmax(0, 1fr) 330px;
}

.cn-comment-badge {
  cursor: pointer;
}

.cn-comment-badge:focus > rect {
  stroke: #b66a00;
  stroke-width: 3;
}

.cn-review-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.cn-review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.cn-review-tabs button[aria-pressed="true"] {
  background: #17643b;
  color: #ffffff;
}

.cn-review-messages {
  max-height: 270px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}

.cn-review-message {
  margin: 0 0 10px;
  padding: 10px;

  border: 1px solid #dbe6dd;
  border-radius: 8px;

  background: #f6faf7;
}

.cn-review-message.is-own {
  background: #eaf4ed;
}

.cn-review-message.is-reply {
  margin-left: 12px;
  border-left: 3px solid #80b491;
}

.cn-review-message .cn-review-author {
  margin-top: 0;
  font-size: 11px;
  font-weight: 600;
}

.cn-review-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cn-review-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dbe6dd;
}

.cn-review-form label {
  display: block;
  margin: 8px 0;
}

.cn-review-form textarea {
  box-sizing: border-box;
  display: block;

  width: 100%;
  min-height: 95px;

  margin-top: 5px;
  padding: 9px;

  border: 1px solid #a8bdb0;
  border-radius: 6px;

  background: #ffffff;
  color: #111111;

  font: inherit;
  resize: vertical;

  user-select: text;
  -webkit-user-select: text;
}

.cn-review-form button[type="submit"] {
  background: #17643b;
  color: #ffffff;
}

@media (max-width: 800px) {
  .cn-stage {
    grid-template-columns: 1fr;
  }

  .cn-drawer {
    max-height: 600px;
  }
}