/*** reader styles ***/

.icon-button[role=button] {
  background: none;
}

.page-header .header-left .title {
  font-family: 'Roboto';
  font-weight: 100;
  font-size: 1.2rem;
  color: var(--color-3);
  margin-left: 1rem;
  display: inline-block;
  line-height: 2rem;
  vertical-align: middle;
}

#reader {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  margin: 0;
  padding: 0;
}

#reader .reader-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background-2);
  border-radius: 0.5rem;
  min-height: 0;
  margin: 0;
}

#reader .copilot-pane {
  margin: 0 0 0 0.5rem;
  width: 25rem;
  background: var(--background-1);
}

.reader-pane .reader-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.reader-area .toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: var(--background-3);
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem;
}

.reader-area .toolbar > * {
  margin: 0.125rem;
}

.reader-area .toolbar select {
  background-color: var(--background-1);
}

.reader-area .toolbar select:not(:focus) {
  border-color: transparent;
}

.reader-area .toolbar .icon-button {
  font-size: 0.8rem;
}

#select-file {
  width: 10rem;
}

#select-view {
  width: 5rem;
  margin-right: auto;
}

#view-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.file-view {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: auto;
  min-height: 0;
}

.file-view field {
  display: flex;
}

.file-view field label {
  margin-right: 1rem;
  font-weight: bold;
}

.file-view iframe {
  flex: 1;
}

.file-view .file-page {
  border-bottom: 3pt solid #666;
}

.file-view .file-page .read-out {
  display: inline-block;
  font-size: 0.8rem;
  border-radius: 50%;
  background: var(--background-3);
}

.file-view .file-page .read-out .loader-1::after {
  background: var(--background-3);
}

.file-view .file-page .read-out:hover .loader-1::after {
  background: var(--color-3);
}

.file-view .file-page .read-out.playing svg[data-icon=play],
.file-view .file-page .read-out:not(.playing) svg[data-icon=pause],
.file-view .file-page .read-out:not(.playing) .loader-1 {
  display: none;
}

.file-view .file-page .read-out[aria-busy=true] {
  padding: 0.2rem 0.35rem;
}

.file-view .file-page .read-out[aria-busy=true] svg {
  display: none;
}

.file-view .file-page-header {
  border-bottom: 1pt solid #666;
  background: #333;
  padding: 0.5rem 0.25rem 0.25rem 1rem;
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
}

.file-view .file-page-header .read-out {
  float: right;
  margin-top: -0.35rem;
}

.file-view .file-page-body {
  padding: 0.5rem 0.25rem 0.25rem 1rem;
}

.file-view .file-page-body .read-out {
  margin: -0.1rem 0 0 0;
}

.file-view .elm-text {
  margin: 1rem 0;
}
.file-view .translator {
  font-size: 0.8rem;
  padding: 0 0.75rem;
  margin-left: 0.25rem;;
  border-radius: 0.5rem;
  color: #ffb6c1;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
}

.file-view .translator:hover {
  background: #ffb6c133;
}

.file-view .elm-text.current-paragraph {
  background: var(--background-1);
  box-shadow: var(--background-1) 0 0 0.5rem 0.5rem;
}

.file-view .elm-image {
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
}

.file-view .elm-image:not(.broken) {
  min-height: 50vh;
}

#view-area:not([data-view=info]) #file-view-info {
  display: none;
}

#view-area:not([data-view=original]) #file-view-original {
  display: none;
}

#view-area:not([data-view=text]):not([data-view=visual]):not([data-view=composite]) #file-view-content {
  display: none;
}

#view-area:not([data-view=text]):not([data-view=composite]) .elm-text {
  display: none;
}

#view-area:not([data-view=visual]):not([data-view=composite]) .elm-image {
  display: none;
}


/*** copilot styles ***/

@media not screen and (max-width:1100px) {
  #reader.copilot-active .open-copilot,
  #reader.copilot-active-maybe .open-copilot,
  #reader:not(.copilot-active,.copilot-active-maybe) .close-copilot,
  #reader:not(.copilot-active,.copilot-active-maybe) .copilot-pane { display: none; }
}

@media screen and (max-width:1100px) {
  #reader {
    flex-direction: column;
  }

  #reader.copilot-active .open-copilot,
  #reader:not(.copilot-active) .close-copilot { display: none; }

  #reader .reader-pane,
  #reader .copilot-pane {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
  }

  #reader:not(.copilot-active) .reader-pane { z-index:2; }
  #reader.copilot-active .copilot-pane { z-index:2; }
}

#copilot-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#copilot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#copilot .copilot-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#copilot .copilot-content iframe {
  flex: 1;
  border-radius: 0.5rem;
}

#copilot-ui-context-selector {
  display: flex;
  background: var(--background-3);
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

#copilot-ui-context-selector select {
  flex: 1;
  max-width: unset;
  margin: 0;
  background-color: var(--background-1);
}

#copilot-ui-context-selector input {
  margin: 0 0 0 0.25rem;
  padding: 0.25rem;
  font-size: 0.7rem;
  text-align: center;
  background-color: var(--background-1);
}

#copilot-ui-context-selector select:not(:focus),
#copilot-ui-context-selector input:not(:focus) {
  border-color: transparent;
}