.j-device {
  --j-inset: var(--spacingHorizontalL);
  --j-block: var(--spacingVerticalM);
  --j-stack: var(--spacingVerticalL);
  position: absolute;
  top: 50%;
  right: var(--device-right, 0px);
  transform: translateY(-50%);
  width: var(--device-width, 64%);
  height: calc(100% - 24px);
  max-height: calc(620px + 10px * var(--phone));
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: calc(1px + 5px * var(--phone)) solid
    color-mix(in srgb, #514b40 calc(100% * var(--phone)), var(--colorNeutralStroke2));
  border-radius: calc(6px + 24px * var(--phone));
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow8);
  opacity: var(--workspace-in);
  overflow: clip;
}
.j-space-bar {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  border-bottom: 1px solid var(--colorNeutralStroke2);
  padding: var(--j-block) var(--j-inset);
  flex: none;
}
.j-space-name {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--spacingVerticalXXS);
}
.j-space-bar small {
  display: block;
  color: #514b40;
  font-size: 10px;
  line-height: 14px;
}
.j-space-bar strong {
  font-size: 17px;
  font-weight: 600;
}
.j-space-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--colorBrandBackground2);
  color: var(--colorBrandForeground1);
  border-radius: var(--borderRadiusMedium);
}
.j-cloud-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11px;
  color: #514b40;
  white-space: nowrap;
}
.j-cloud-status .icon {
  width: 16px;
  height: 16px;
}
.j-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--j-stack);
  padding: var(--j-block) var(--j-inset);
  border-bottom: 1px solid var(--colorNeutralStroke2);
}
.j-library-label {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: var(--spacingVerticalXXS);
}
.j-library-toolbar b {
  font-size: 14px;
}
.j-library-toolbar small {
  display: block;
  font-size: 11px;
  color: #514b40;
}
#j-search {
  max-width: none;
  flex: 0 1 55%;
  min-width: 0;
  width: auto;
}
#journey[data-chapter="1"] #j-search {
  visibility: hidden;
}
.j-library-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(140px, 0.65fr) minmax(0, 1.5fr);
}
.j-reader {
  min-width: 0;
  padding: var(--j-inset);
  display: flex;
  flex-direction: column;
  gap: var(--j-stack);
}
.j-reader .prose {
  font-size: 15px;
  line-height: 1.7;
  gap: var(--j-stack);
}
.j-reader .prose p:first-child {
  opacity: var(--compose-first, 1);
}
.j-reader .prose p:nth-child(2) {
  opacity: var(--compose-second, 1);
}
.j-reader .citation {
  font-size: 10px;
}
#journey:is([data-scene="library"], [data-scene="search"], [data-scene="results"]) .j-library-body {
  grid-template-columns: minmax(0, 1fr);
}
#journey[data-scene="agent"] .j-library-body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#journey[data-scene="agent"] .j-reader .prose > p:first-child {
  background: var(--colorBrandBackground2);
  box-shadow: 0 0 0 8px var(--colorBrandBackground2);
}
.j-agent {
  border-left: 1px solid var(--colorNeutralStroke2);
  padding: var(--j-inset);
  display: flex;
  flex-direction: column;
  gap: var(--j-stack);
  min-width: 0;
}
.j-agent header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.j-agent header > .icon {
  color: var(--colorBrandForeground1);
}
.j-prompt {
  font-size: 14px;
  line-height: 1.55;
  padding: 12px;
  background: #eeeae1;
  border-radius: var(--borderRadiusMedium);
}
.j-agent-reading {
  display: flex;
  align-items: flex-start;
  gap: var(--spacingHorizontalS);
  font-size: 11px;
  color: #514b40;
}
.j-agent-reading > .icon {
  width: 14px;
  height: 14px;
}
.j-agent-response {
  opacity: var(--agent-reply);
  transform: translateY(calc(10px * (1 - var(--agent-reply))));
}
.j-agent-response small {
  display: block;
  color: #514b40;
  font-size: 9px;
  letter-spacing: 0.06em;
}
.j-agent-response p {
  font-size: 14px;
  line-height: 1.65;
}
.j-insight {
  grid-column: 1/-1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--j-inset);
  gap: var(--j-stack);
}
.j-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--j-stack);
}
.j-evidence article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--spacingVerticalS);
  padding: 14px;
  background: var(--colorNeutralBackground2);
  border-left: 2px solid var(--colorBrandStroke1);
}
.j-evidence article > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
.j-evidence article > span .icon {
  width: 16px;
  height: 16px;
}
.j-evidence .prose {
  font-size: 13px;
  line-height: 1.6;
}
.j-evidence .citation {
  font-size: 10px;
}
.j-evidence-plus {
  align-self: center;
  font-size: 24px;
  color: var(--colorBrandForeground1);
}
.j-insight-result {
  display: flex;
  flex-direction: column;
  gap: var(--j-stack);
  padding-top: var(--j-stack);
  border-top: 1px solid var(--colorNeutralStroke2);
  opacity: var(--insight-in);
}
.j-insight-label {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--colorBrandForeground1);
  font-size: 12px;
}
.j-insight-result h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.j-insight-result > p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 580px;
}
.j-insight-result > fluent-button {
  align-self: flex-start;
}
.j-confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--j-stack);
  padding-top: var(--j-stack);
  border-top: 1px solid var(--colorNeutralStroke2);
}
.j-confirmation header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #514b40;
}
.j-confirmation h2 {
  font-size: 22px;
}
.j-confirmation > p {
  font-size: 15px;
  line-height: 1.7;
}
.j-confirmation > small {
  font-size: 11px;
  color: #514b40;
}
#journey[data-chapter="4"] .j-library-body {
  grid-template-columns: minmax(0, 1fr);
}
.j-pending-action {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--colorNeutralStroke2);
  margin-top: auto;
  padding-top: 16px;
  color: var(--colorBrandForeground1);
}
.j-pending-action > span {
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalXXS);
  flex: 1;
  min-width: 0;
}
.j-pending-action strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.j-pending-action small {
  font-size: 11px;
  color: #514b40;
}
.j-device-status {
  display: none;
}
.j-home-indicator {
  display: none;
}
#journey[data-chapter="4"] .j-device-status {
  display: flex;
  justify-content: space-between;
  padding: 12px 22px 4px;
  font-size: 11px;
  opacity: var(--phone);
}
#journey[data-chapter="4"] .j-home-indicator {
  display: block;
  width: 80px;
  height: 3px;
  border-radius: 3px;
  background: #514b40;
  margin: 8px auto;
  opacity: var(--phone);
  flex: none;
}
#journey[data-chapter="4"] .j-reader {
  flex: 1;
}
#journey[data-chapter="4"] .j-cloud-status span {
  display: none;
}
#journey[data-chapter="4"] .j-reader .prose {
  font-size: 14px;
}

/* Shared portal rows and reader headings; the story only changes their density. */
.j-shelves {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--j-block) calc(var(--j-inset) - 8px);
  gap: var(--spacingVerticalXS);
  border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.j-shelf {
  flex: none;
  min-width: 0;
}
#journey:not([data-scene="library"], [data-scene="search"], [data-scene="results"]) .j-shelf {
  border: 0;
}
#journey:not([data-scene="library"], [data-scene="search"], [data-scene="results"])
  .j-shelf
  .collection-open {
  display: flex;
}
#journey:not([data-scene="library"], [data-scene="search"], [data-scene="results"])
  .j-shelf
  :is(.row-summary, .row-meta) {
  display: none;
}
#journey:is([data-scene="library"], [data-scene="search"], [data-scene="results"]) .j-shelves {
  border: 0;
}
.j-reader [data-document] {
  display: flex;
  flex-direction: column;
  gap: var(--j-stack);
}
.j-document-heading .eyebrow {
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
  color: var(--colorNeutralForeground2);
}
.j-agent-response {
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalS);
}
.j-agent header strong,
.j-confirmation header > span {
  flex: 1;
  min-width: 0;
}
.j-agent fluent-badge,
.j-confirmation header fluent-badge {
  margin-left: 0;
  flex: none;
}
.j-device-status > span:last-child {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
}
.j-device-status .icon {
  width: 14px;
  height: 14px;
}