/* A quiet, intimate shift into the one-to-one thread. All colors stay inside
   the phone or the explicitly marked transcript segments. */
.journey-phone.journey-side-conversation {
  --side-ink: #ffffff;
  --side-muted: #ffffff;
  --side-charcoal: #000000;
  --side-panel: #1c1c1e;
  --side-rule: #454549;
  --side-gold: #ffffff;
  --side-thay: #1763cc;
  --side-alisha: #242426;
}

.journey-phone.journey-side-conversation .journey-screen {
  background: var(--side-charcoal);
  color: var(--side-ink);
}

.journey-phone.journey-side-conversation .journey-status,
.journey-phone.journey-side-conversation .journey-contact {
  background: #000000;
  color: var(--side-ink);
}

.journey-phone.journey-side-conversation .journey-status {
  border-bottom: 1px solid var(--side-rule);
}

.journey-phone.journey-side-conversation .journey-status-icons svg {
  color: var(--side-ink);
}

.journey-phone.journey-side-conversation .journey-contact {
  border-bottom-color: var(--side-rule);
}

.journey-phone.journey-side-conversation .journey-contact .journey-side-contact {
  display: block;
}

.journey-phone.journey-side-conversation .journey-contact > [hidden],
.journey-contact .journey-side-contact[hidden],
.journey-contact > .journey-side-contact[hidden] {
  display: none !important;
}

.journey-side-contact .journey-side-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 7px;
  padding-left: 5px;
}

.journey-side-contact .journey-person-portrait {
  position: relative;
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-left: -5px;
  overflow: hidden;
  border: 2px solid #000000;
  border-radius: 50%;
  background: #242426;
}

.journey-side-contact .journey-person-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.journey-side-contact .journey-thay-portrait img {
  object-position: 88% 27%;
  transform: scale(1.7);
  transform-origin: 70% 27%;
}

.journey-return-family {
  min-height: 44px;
  margin-top: 5px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.journey-side-shortcut {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #ffffff;
  border-radius: 5px;
  color: #ffffff;
  background: #000000;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.journey-return-family:focus-visible,
.journey-side-shortcut:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.journey-thread-segment[hidden] {
  display: none;
}

.journey-phone.journey-side-conversation .journey-contact .journey-side-contact strong {
  color: var(--side-ink);
}

.journey-phone.journey-side-conversation .journey-contact .journey-side-contact small {
  color: var(--side-muted);
}

.journey-phone.journey-side-conversation .journey-back-symbol {
  color: var(--side-gold);
}

.journey-phone.journey-side-conversation .journey-thread {
  background: var(--side-charcoal);
  color: var(--side-ink);
}

.journey-phone.journey-side-conversation .journey-date {
  color: #ffffff;
}

.journey-phone.journey-side-conversation .journey-sender,
.journey-phone.journey-side-conversation .journey-stamp {
  color: var(--side-muted);
}

.journey-phone.journey-side-conversation .journey-message.outgoing .journey-bubble {
  background: var(--side-thay);
  color: #ffffff;
}

.journey-phone.journey-side-conversation .journey-message:not(.outgoing) .journey-bubble {
  background: var(--side-alisha);
  color: #ffffff;
}

.journey-phone.journey-side-conversation .journey-typing {
  color: var(--side-muted);
}

.journey-phone.journey-side-conversation .journey-typing b {
  background: var(--side-panel);
  color: var(--side-ink);
}

.journey-phone.journey-side-conversation .journey-composer {
  background: #000000;
  border-top-color: var(--side-rule);
  color: var(--side-muted);
}

.journey-phone.journey-side-conversation .journey-composer > span:last-child {
  border-color: #454549;
  background: #242426;
  color: #ffffff;
}

.journey-phone.journey-side-conversation .journey-keyboard {
  background: var(--side-panel);
  border-top-color: var(--side-rule);
}

.journey-phone.journey-side-conversation .journey-key {
  background: #454549;
  color: #ffffff;
  box-shadow: 0 1px 0 var(--side-rule);
}

.journey-phone.journey-side-conversation .journey-key.utility {
  background: #303034;
  color: #ffffff;
}

.journey-phone.journey-side-conversation .journey-key.is-pressed {
  background: #67676c;
  color: #ffffff;
  box-shadow: none;
}

.journey-phone.journey-side-conversation .journey-home-indicator {
  background: #ffffff;
}

/* Transcript sections retain their own mode styling after the live phone
   has moved on to the family thread. No background-color tweening is used. */
.journey-thread-segment.journey-side-block {
  box-sizing: border-box;
  padding: 14px 12px 12px;
  border: 0;
  border-radius: 16px;
  background: #000000;
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-date {
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-sender,
.journey-thread-segment.journey-side-block .journey-stamp {
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-message.outgoing .journey-bubble {
  background: #1763cc;
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-message:not(.outgoing) .journey-bubble {
  background: #242426;
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-card {
  background: #242426;
  border-color: #454549;
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-card-eyebrow {
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-card p {
  color: #ffffff;
}

.journey-thread-segment.journey-side-block .journey-thread-transition {
  color: #ffffff;
  border-bottom-color: #454549;
}

.journey-thread-transition {
  margin: 0 0 14px;
  padding: 0 0 9px;
  border-bottom: 1px solid currentColor;
  color: #c9b991;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.journey-thread-segment.journey-family-block {
  color: #202124;
}

.journey-thread-segment.journey-family-block .journey-thread-transition {
  color: #88704b;
}

.journey-thread-segment.journey-family-block .journey-date {
  color: #787880;
}

.journey-thread-segment.journey-family-block .journey-sender,
.journey-thread-segment.journey-family-block .journey-stamp {
  color: #777780;
}

.journey-thread-segment.journey-family-block .journey-message:not(.outgoing) .journey-bubble {
  background: #e7e7ec;
  color: #202124;
}

.journey-thread-segment.journey-family-block .journey-message.outgoing .journey-bubble {
  background: #1763cc;
  color: #fff;
}

.journey-thread-segment.journey-family-block .journey-card {
  background: #fff;
  border-color: #dedee3;
  color: #202124;
}

.journey-thread-segment.journey-family-block .journey-card-eyebrow {
  color: #88704b;
}

.journey-thread-segment.journey-family-block .journey-card p {
  color: #71717a;
}

@media (prefers-reduced-motion: no-preference) {
  .journey-phone.journey-side-conversation .journey-status,
  .journey-phone.journey-side-conversation .journey-contact,
  .journey-phone.journey-side-conversation .journey-composer,
  .journey-phone.journey-side-conversation .journey-key {
    transition: color 220ms ease, border-color 220ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-phone.journey-side-conversation .journey-message {
    animation: none;
  }
}