/* Act AiSpeak: partner / Japanese conversation / native-language translation. */
@media (min-width: 1001px) {
  .voice-app {
    grid-template-areas:
      "header header header"
      "settings settings settings"
      "stage log log"
      "controls log log";
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1800px;
  }

  .partner-stage {
    min-height: 420px;
    padding: 20px 14px;
  }

  .main-avatar {
    height: clamp(136px, 14vw, 190px);
    width: clamp(136px, 14vw, 190px);
  }

  .partner-line {
    line-height: 1.55;
    padding: 12px;
  }

  .compact-log {
    align-content: start;
    max-height: calc(100dvh - 32px);
    padding: 14px;
  }

  .log-heading {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .log-heading strong {
    padding-left: 72px;
  }

  .log-heading span {
    border-left: 1px solid #dbe4e8;
    padding-left: 14px;
  }

  .check-card {
    max-width: none;
    width: 100%;
  }

  .check-card.ai {
    grid-template-areas: "identity japanese translation";
    grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr);
  }

  .check-card.learner {
    grid-template-areas: "japanese identity translation";
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  }

  .check-card .check-section.translation {
    border-left-width: 2px;
    margin-left: 5px;
  }
}

.check-card {
  background: transparent;
  border: 0;
  gap: 7px 10px;
  padding: 4px 0;
}

.check-card .log-identity {
  align-self: start;
  grid-area: identity;
}

.check-card .check-section.japanese {
  grid-area: japanese;
}

.check-card .check-section.translation {
  grid-area: translation;
}

.check-card.ai .check-section {
  background: #edf8f5;
  border-color: #c8ebe3;
}

.check-card.ai .check-section.japanese {
  border-radius: 8px 8px 8px 2px;
}

.check-card.learner .check-section {
  background: #eef5ff;
  border-color: #c8daf6;
}

.check-card.learner .check-section.japanese {
  background: #0b5dad;
  border-color: #0b5dad;
  border-radius: 8px 8px 2px 8px;
}

.check-card.learner .check-section.japanese span,
.check-card.learner .check-section.japanese p {
  color: #fff;
}

.check-card.learner .check-section.translation {
  border-radius: 8px;
}

.talk-controls > .evaluation-panel {
  justify-self: stretch;
  margin-top: 2px;
  width: 100%;
}

@media (min-width: 761px) and (max-width: 1000px) {
  .voice-app {
    grid-template-areas:
      "header header"
      "settings settings"
      "stage log"
      "controls log";
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
    max-width: 1000px;
  }

  .compact-log {
    max-height: calc(100dvh - 32px);
  }

  .check-card {
    width: 100%;
  }

  .check-card.ai {
    grid-template-areas:
      "identity japanese"
      ". translation";
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .check-card.learner {
    grid-template-areas:
      "japanese identity"
      "translation .";
    grid-template-columns: minmax(0, 1fr) 52px;
  }
}

@media (max-width: 760px) {
  .voice-app {
    grid-template-areas:
      "header"
      "settings"
      "stage"
      "controls"
      "log";
    grid-template-columns: minmax(0, 1fr);
  }

  .check-card {
    width: 94%;
  }

  .check-card.ai {
    grid-template-areas:
      "identity japanese"
      ". translation";
    grid-template-columns: 50px minmax(0, 1fr);
    justify-self: start;
  }

  .check-card.learner {
    grid-template-areas:
      "japanese identity"
      "translation .";
    grid-template-columns: minmax(0, 1fr) 50px;
    justify-self: end;
  }
}