@charset "UTF-8";
:root {
  --ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
  --ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  --ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
  --ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  --ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
  --ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
  --ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
  --ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
  --ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
  --ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  --ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  --ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  --ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
  --ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
  --ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

:root {
  --c-purple-light: #EDE8F4;
  --c-purple: #D7CAE8;
  --c-purple-med: #B2A5C2;
  --c-gray-light: #EBEBEB;
  --c-purple-frame: #A259FF;
  --c-ok: #5DE066;
  --easing-easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Imprima, "Microsoft Jhenghei", sans-serif;
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

.appPane {
  position: relative;
}

textarea {
  font-family: inherit;
}

body.indexPage {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.indexPage .container {
  width: 600px;
}
body.indexPage .container .header {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
body.indexPage .container .modeList {
  display: flex;
  gap: 30px;
}
body.indexPage .container .modeItem {
  flex: 1 1 33.33%;
  gap: 10%;
}
body.indexPage .container .modeItem a {
  display: block;
}
body.indexPage .container .modeItem a i {
  display: block;
  width: 100%;
  font-size: 8rem;
  margin-bottom: 1rem;
  text-align: center;
}
body.indexPage .container .modeItem a i::before {
  display: block;
  font-size: 8rem;
  line-height: 12rem;
}
body.indexPage .container .modeItem a span {
  display: block;
  font-size: 1.5rem;
  text-align: center;
}

body.examAppPage {
  display: flex;
}
body.examAppPage .mainPane {
  flex: 0 0 900px;
  display: flex;
  flex-direction: column;
  background: #EFEEEE;
}
body.examAppPage .mainPane .appTitlebar {
  position: relative;
  flex: 0 0 50px;
  display: flex;
  background-color: var(--c-purple-light);
}
body.examAppPage .mainPane .appTitlebar .appIcon {
  flex: 0 0 60px;
  background-color: var(--c-purple-med);
  background-image: url(../img/appIcon.png);
}
body.examAppPage .mainPane .appTitlebar .appTitleText {
  flex: 1 1 auto;
  line-height: 24px;
  font-size: 24px;
  display: flex;
  align-items: center;
}
body.examAppPage .mainPane .appTitlebar .appTitleText span {
  display: block;
  padding: 0 10px;
}
body.examAppPage .mainPane .appTitlebar .appTitleText span + span {
  border-left: 1px solid #000;
}
body.examAppPage .mainPane .mainContentPane {
  position: relative;
  flex: 1 1 auto;
  display: flex;
}
body.examAppPage .mainPane .personaThumbListPane {
  flex: 0 0 60px;
}
body.examAppPage .mainPane .personaThumbListPane .personaThumbList {
  padding: 0 10px;
}
body.examAppPage .mainPane .personaThumbListPane .personaThumbItem {
  width: 40px;
  margin-top: 10px;
  aspect-ratio: 1/1;
  border-radius: 100px;
  background-color: var(--c-purple-med);
  overflow: hidden;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
body.examAppPage .mainPane .personaThumbListPane .personaThumbItem .personaItemIcon {
  display: block;
  color: #fff;
}
body.examAppPage .mainPane .personaThumbListPane .personaThumbItem .personaItemIcon.-fa {
  font-size: 20px;
  line-height: 40px;
  width: 40px;
  text-align: center;
}
body.examAppPage .mainPane .personaThumbListPane .personaThumbItem .personaItemIcon.-photo {
  width: 100%;
  height: 100%;
  background-image: url(../img/personaThumbDefault.png);
  background-size: cover;
  background-position: center;
}
body.examAppPage .mainPane .personaInfoPane {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
}
body.examAppPage .mainPane .personaInfoPane .personaInfoPaneScroller {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--c-purple) transparent;
  background-color: #fff;
}
body.examAppPage .mainPane .personaInfoPane .personaInfoPaneContent {
  padding: 10px;
}
body.examAppPage .mainPane .personaInfoPane .row {
  display: flex;
  height: calc(50% - 15px);
  max-height: 330px;
  width: 100%;
  gap: 10px;
}
body.examAppPage .mainPane .personaInfoPane .row-2 {
  margin-top: 10px;
}
body.examAppPage .mainPane .personaInfoPane .cell {
  position: relative;
  border: 1px solid #EAE9E9;
  border-radius: 10px;
}
body.examAppPage .mainPane .personaInfoPane .cell .header {
  font-size: 16px;
  line-height: 39px;
  display: flex;
}
body.examAppPage .mainPane .personaInfoPane .cell .header .label {
  flex: 1 1 auto;
  padding-left: 10px;
  color: var(--c-purple-med);
}
body.examAppPage .mainPane .personaInfoPane .cell .header .editIcon {
  flex: 0 0 39px;
  text-align: center;
  cursor: pointer;
  color: var(--c-purple);
}
body.examAppPage .mainPane .personaInfoPane .cell .header .editIcon::before {
  line-height: 39px;
}
body.examAppPage .mainPane .personaInfoPane .cell .header .editIcon:hover {
  color: var(--c-purple-med);
}
body.examAppPage .mainPane .personaInfoPane .cell .header .saveIcon {
  flex: 0 0 39px;
  text-align: center;
  cursor: pointer;
  color: var(--c-ok);
  display: none;
}
body.examAppPage .mainPane .personaInfoPane .cell .header .saveIcon::before {
  line-height: 39px;
}
body.examAppPage .mainPane .personaInfoPane .cell .content {
  display: block;
  position: absolute;
  left: 0px;
  top: 40px;
  right: 0px;
  bottom: 0px;
}
body.examAppPage .mainPane .personaInfoPane .cell .display {
  padding: 0 10px 10px;
  font-size: 16px;
  line-height: 25px;
}
body.examAppPage .mainPane .personaInfoPane .cell > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--easing-easeOutExpo);
}
body.examAppPage .mainPane .personaInfoPane .cell > img.-active {
  opacity: 1;
  transition: opacity 2.5s var(--easing-easeOutExpo);
}
body.examAppPage .mainPane .personaInfoPane .cell[w-cell-type=PHOTO] {
  overflow: hidden;
}
body.examAppPage .mainPane .personaInfoPane .cell .input {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
body.examAppPage .mainPane .personaInfoPane .cell .input textarea {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 10px 10px;
  font-size: 16px;
  line-height: 25px;
  resize: none;
  background-color: transparent;
  outline: 0;
}
body.examAppPage .mainPane .personaInfoPane .cell.-editing::before {
  content: "";
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  display: block;
  position: absolute;
  z-index: 100;
  border: 3px solid var(--c-ok);
  border-radius: 10px;
  pointer-events: none;
}
body.examAppPage .mainPane .personaInfoPane .cell.-editing .editIcon {
  display: none;
}
body.examAppPage .mainPane .personaInfoPane .cell.-editing .saveIcon {
  display: block;
}
body.examAppPage .mainPane .personaInfoPane .cell.-editing .input {
  display: block;
}
body.examAppPage .mainPane .personaInfoPane .cell.-editing .display {
  display: none;
}
body.examAppPage .mainPane .personaInfoPane .cell ol {
  list-style-position: outside;
  list-style-type: decimal;
  padding-left: 20px;
}
body.examAppPage .mainPane .personaInfoPane .cell ol li {
  margin: 5px;
}
body.examAppPage .mainPane .personaInfoPane .quoteCell .content {
  top: 40px;
  bottom: 40px;
}
body.examAppPage .mainPane .personaInfoPane .quoteCell .display {
  height: 100%;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  align-content: center;
}
body.examAppPage .mainPane .personaInfoPane .quoteCell textarea {
  height: 100%;
  font-size: 20px !important;
  line-height: 30px !important;
  text-align: center;
  align-content: center;
}
body.examAppPage .mainPane .personaInfoPane .quoteCell .deco {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
body.examAppPage .mainPane .personaInfoPane .quoteCell .deco::before, body.examAppPage .mainPane .personaInfoPane .quoteCell .deco::after {
  content: "“";
  font-family: times;
  font-size: 64px;
  line-height: 64px;
  width: 32px;
  position: absolute;
  display: block;
  text-align: center;
  color: var(--c-purple-med);
}
body.examAppPage .mainPane .personaInfoPane .quoteCell .deco::before {
  left: 9px;
  top: 0;
}
body.examAppPage .mainPane .personaInfoPane .quoteCell .deco::after {
  transform: rotate(180deg);
  right: 9px;
  bottom: 0;
}
body.examAppPage .mainPane .personaInfoPane .col-1 {
  aspect-ratio: 1/1;
}
body.examAppPage .mainPane .personaInfoPane .col-2 {
  flex: 1 1 auto;
}
body.examAppPage .mainPane .personaInfoPane .cellgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.examAppPage .mainPane .personaInfoPane .cellgroup > .cell {
  flex: 1 1 50%;
}
body.examAppPage .mainPane .selectFrame {
  position: absolute;
  z-index: 10000;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(300% + 24px);
  border: 2px solid var(--c-purple-frame);
  border-radius: 9px;
  opacity: 0;
  transition: opacity 0.5s 0.25s var(--easing-easeOutExpo);
}
body.examAppPage .mainPane .selectFrame .fa {
  position: absolute;
  top: calc(50% - 1.5rem);
  width: 2rem;
  height: 4rem;
  background-color: var(--c-purple-frame);
  color: #fff;
  cursor: pointer;
}
body.examAppPage .mainPane .selectFrame .fa::before {
  line-height: 4rem;
  text-align: center;
}
body.examAppPage .mainPane .selectFrame .-action-left {
  left: 0rem;
  border-radius: 0 100px 100px 0;
}
body.examAppPage .mainPane .selectFrame .-action-right {
  right: 0rem;
  border-radius: 100px 0 0 100px;
}
.cell.-active .selectFrame:hover {
  opacity: 1;
  transition: opacity 0.5s var(--easing-easeOutExpo);
}

body.examAppPage .aiPane {
  flex: 1 1 auto;
  background: #716C78;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body.examAppPage .aiPane .aiDiagPane {
  flex: 0 0 50px;
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
body.examAppPage .aiPane .aiDiagPane .titleBar {
  flex: 0 0 40px;
  display: flex;
  left: 0;
  top: 0;
  right: 0;
  color: #000;
  border-radius: 10px 10px 0 0;
  background-color: var(--c-purple);
}
body.examAppPage .aiPane .aiDiagPane .titleBar .icon {
  flex: 0 0 40px;
}
body.examAppPage .aiPane .aiDiagPane .titleBar .icon::before {
  line-height: 40px;
}
body.examAppPage .aiPane .aiDiagPane .titleBar .label {
  flex: 1 1 auto;
  line-height: 40px;
  font-size: 16px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane {
  flex: 1 1 auto;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--c-purple) transparent;
}
body.examAppPage .aiPane .aiDiagPane .chatPane::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  height: 20px;
  background-image: linear-gradient(to bottom, #fff, #fff 12%, transparent);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent {
  position: relative;
  padding: 20px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem {
  position: relative;
  max-width: calc(100% - 50px);
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.5s var(--easing-easeOutExpo);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem .chatItemContent {
  display: inline-block;
  padding: 10px;
  font-size: 14px;
  line-height: 24px;
  border-radius: 10px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem .chatItemContent::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 40px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--easing-easeOutExpo), transform 0.5s var(--easing-easeOutExpo);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-left .chatItemContent {
  background-color: var(--c-purple-light);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-left .chatItemContent::before {
  left: -10px;
  background-image: url(../img/bubbledeco-l.png);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-left + .chatItem.-left {
  margin-top: 10px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-left + .chatItem.-right {
  margin-top: 20px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-right {
  text-align: right;
  margin-left: auto;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-right .chatItemContent {
  background-color: var(--c-gray-light);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-right .chatItemContent::before {
  right: -10px;
  background-image: url(../img/bubbledeco-r.png);
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-right + .chatItem.-left {
  margin-top: 20px;
}
body.examAppPage .aiPane .aiDiagPane .chatPane .chatPaneContent .chatItem.-right + .chatItem.-right {
  margin-top: 10px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane {
  flex: 0 0 50px;
  border-top: 1px solid #EAE9E9;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagSelectPane {
  gap: 10px;
  padding: 10px 20px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagSelectPane .label {
  margin-bottom: 5px;
  line-height: 25px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagSelectPane .tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagSelectPane .tagList .wPill.-selected {
  background-color: var(--c-purple);
  color: #000;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagSelectPane .buttonPane {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagDisplayPane {
  display: flex;
  gap: 10px;
  padding: 10px 20px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagDisplayPane .label {
  flex: 0 0 auto;
  line-height: 30px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagDisplayPane .tagList {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
body.examAppPage .aiPane .aiDiagPane .tagPane #tagDisplayPane .tagList .wPill.-selected {
  background-color: var(--c-purple);
  color: #000;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane {
  flex: 0 0 50px;
  border-top: 1px solid #EAE9E9;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane > * {
  display: flex;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .fileInputPane .fileInput {
  position: relative;
  flex: 1 1 auto;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .fileInputPane .fileInput input {
  width: 100%;
  height: 100%;
  opacity: 0;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .fileInputPane .fileInput .display {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  pointer-events: none;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .textInputPane .textInput {
  position: relative;
  flex: 1 1 auto;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .textInputPane .textInput textarea {
  width: 100%;
  height: 50px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  line-height: 30px;
  resize: none;
  background-color: transparent;
  outline: 0;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .sendButton {
  flex: 0 0 50px;
  padding: 10px;
  cursor: pointer;
}
body.examAppPage .aiPane .aiDiagPane .chatInputPane .sendButton i {
  display: block;
  width: 30px;
  text-align: center;
  line-height: 30px;
  background-color: var(--c-purple);
  border-radius: 50%;
}
body.examAppPage .wPill {
  padding: 0 10px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
body.examAppPage .wPill.-bordered {
  padding: 0 9px;
  font-size: 14px;
  line-height: 28px;
  background: none;
  border: 1px solid var(--c-purple);
}
body.examAppPage .wPill.-button {
  width: 80px;
  cursor: pointer;
}

.wPill {
  display: inline-block;
  padding: 0 10px;
  text-align: center;
  border-radius: 100px;
  background-color: var(--c-purple);
  cursor: pointer;
}

.wPillGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.wPillGroup .wPill {
  flex: 0 0 auto;
}

.wSelectionGroup {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.wSelection {
  flex: 1 1 10%;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
.wSelection .selNo {
  font-weight: bold;
}
.wSelection .selText {
  font-size: 12.5px;
  line-height: 20px;
}
.wSelection .selText ol {
  list-style-position: inside;
  list-style-type: decimal;
}
.wSelection .selText ol li {
  margin: 5px;
}
.wSelection .selImg img {
  width: 100%;
}
.wSelection .selButton {
  display: block;
  width: 50px;
  margin: 10px auto 0;
}

.cfApp {
  --content-width: 640px;
  --content-padding: 50px;
}
.cfApp .appIcon {
  position: absolute;
  width: 60px;
  height: 50px;
  background-image: url(../img/appIcon.png);
}
.cfApp .appPane .aiDiagPane {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cfApp .appPane .chatPane {
  flex: 1 1 auto;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--c-purple) transparent;
}
.cfApp .appPane .chatPane .chatPaneContent {
  position: relative;
  width: var(--content-width);
  padding: 20px 0;
  margin-left: auto;
  margin-right: auto;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem {
  position: relative;
  max-width: calc(100% - var(--content-padding));
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.5s var(--easing-easeOutExpo);
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem .chatItemContent {
  display: inline-block;
  padding: 10px 16px;
  font-size: 16px;
  line-height: 32px;
  border-radius: 10px;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem .chatItemContent::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 40px;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--easing-easeOutExpo), transform 0.5s var(--easing-easeOutExpo);
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-left .chatItemContent {
  background-color: var(--c-purple-light);
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-left .chatItemContent::before {
  left: -10px;
  background-image: url(../img/bubbledeco-l.png);
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-left + .chatItem.-left {
  margin-top: 10px;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-left + .chatItem.-right {
  margin-top: 20px;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-right {
  text-align: right;
  margin-left: auto;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-right .chatItemContent {
  background-color: var(--c-gray-light);
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-right .chatItemContent::before {
  right: -10px;
  background-image: url(../img/bubbledeco-r.png);
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-right + .chatItem.-left {
  margin-top: 20px;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-right + .chatItem.-right {
  margin-top: 10px;
}
.cfApp .appPane .chatPane .chatPaneContent .chatItem.-completed textarea {
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  box-shadow: none;
}
.cfApp .appPane .chatInputPane {
  flex: 0 0 auto;
  padding: 20px 0;
}
.cfApp .appPane .chatInputPane > * {
  display: flex;
}
.cfApp .appPane .chatInputPane .fileInputPane {
  position: relative;
  flex: 1 1 auto;
  width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  height: 50px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cfApp .appPane .chatInputPane .fileInputPane .fileInput {
  position: relative;
  flex: 1 1 auto;
}
.cfApp .appPane .chatInputPane .fileInputPane .fileInput input {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.cfApp .appPane .chatInputPane .fileInputPane .fileInput .display {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  pointer-events: none;
}
.cfApp .appPane .chatInputPane .textInputPane {
  position: relative;
  flex: 1 1 auto;
  width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  height: 50px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cfApp .appPane .chatInputPane .textInputPane .textInput {
  position: relative;
  flex: 1 1 auto;
}
.cfApp .appPane .chatInputPane .textInputPane .textInput textarea {
  width: 100%;
  height: 50px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  line-height: 30px;
  resize: none;
  background-color: transparent;
  outline: 0;
}
.cfApp .appPane .chatInputPane .textInputPane input {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 10px;
  font-size: 16px;
  line-height: 30px;
  resize: none;
  background-color: transparent;
}
.cfApp .appPane .chatInputPane .sendButton {
  flex: 0 0 50px;
  padding: 10px;
  cursor: pointer;
}
.cfApp .appPane .chatInputPane .sendButton i {
  display: block;
  width: 30px;
  text-align: center;
  line-height: 30px;
  background-color: var(--c-purple);
  border-radius: 50%;
}
.cfApp .appPane .chatInputPane.-active {
  transform: translateY(0);
}
.cfApp .wSelectionGroup {
  gap: 10px;
  padding: 10px 0;
}
.cfApp .wSelection .selText {
  font-size: 15px;
  line-height: 25px;
}
.cfApp .wSelection .selText ol {
  list-style-position: inside;
  list-style-type: decimal;
}
.cfApp .wSelection .selText ol li {
  margin: 5px;
}
.cfApp .wSelection .selButton {
  width: 64px;
}
.cfApp .wInDialogEdit .editField {
  margin-bottom: 10px;
}
.cfApp .wInDialogEdit .editField textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #D9D9D9;
  padding: 9px;
  height: 95px;
  font-size: 16px;
  line-height: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  resize: none;
}
.cfApp .wInDialogEdit .editButton {
  margin-left: auto;
  width: 64px;
  display: block;
}
.cfApp .personaDataResult {
  padding: 10px 0;
}
.cfApp .personaDataResult .personaDataItemPhoto {
  display: flex;
}
.cfApp .personaDataResult .personaDataItemPhoto b {
  flex: 0 0 7em;
  font-weight: bold;
}
.cfApp .personaDataResult .personaDataItemPhoto > div {
  margin-left: 10px;
  flex: 1 1 auto;
}
.cfApp .personaDataResult .personaDataItemPhoto img {
  width: 12rem;
  border-radius: 10px;
}
.cfApp .personaDataResult .personaDataItem {
  display: flex;
}
.cfApp .personaDataResult .personaDataItem b {
  flex: 0 0 7em;
  font-weight: bold;
}
.cfApp .personaDataResult .personaDataItem > div {
  margin-left: 10px;
  flex: 1 1 auto;
}
.cfApp .personaCardImagePreview {
  width: 20rem;
  border-radius: 10px;
}

#imageCanvasTemp {
  position: fixed;
  left: -1000px;
  top: 0;
}

#imageCanvasOpt {
  position: fixed;
  top: 0;
  left: -1000px;
  width: 960px;
  height: 720px;
  z-index: 1000;
  background-color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  opacity: 0.9;
}

.imageCanvas {
  position: fixed;
  top: 0;
  left: -1000px;
  width: 960px;
  height: 720px;
  z-index: 1000;
  background-color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  opacity: 0.9;
  font-family: "Microsoft Jhenghei", sans-serif !important;
}
.imageCanvas > div {
  position: absolute;
  border: 1px solid #EAE9E9;
  font-size: 15px;
  border-radius: 10px;
}
.imageCanvas > div .label {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 100%;
  height: 20px;
  font-weight: bold;
  color: var(--c-purple-med);
}
.imageCanvas > div .content {
  position: absolute;
  left: 19px;
  right: 19px;
  top: 34px;
  bottom: 9px;
  font-size: 20px;
  line-height: 30px;
}
.imageCanvas > div .deco {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.imageCanvas > div .deco::before, .imageCanvas > div .deco::after {
  content: "“";
  font-family: serif;
  font-size: 64px;
  line-height: 64px;
  width: 32px;
  position: absolute;
  display: block;
  text-align: center;
  color: var(--c-purple-med);
}
.imageCanvas > div .deco::before {
  left: 9px;
  top: 0;
}
.imageCanvas > div .deco::after {
  transform: rotate(180deg);
  right: 9px;
  bottom: 0;
}
.imageCanvas .photoBlock {
  left: 25px;
  top: 25px;
  width: 330px;
  height: 330px;
  overflow: hidden;
}
.imageCanvas .photoBlock .content {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.imageCanvas .photoBlock img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.imageCanvas .infoBlock {
  left: 25px;
  top: 365px;
  width: 330px;
  height: 160px;
}
.imageCanvas .traitBlock {
  left: 25px;
  top: 535px;
  width: 330px;
  height: 160px;
}
.imageCanvas .needBlock {
  left: 365px;
  top: 25px;
  width: 570px;
  height: 160px;
}
.imageCanvas .sayBlock {
  left: 365px;
  top: 195px;
  width: 570px;
  height: 160px;
  font-size: 20px;
  line-height: 30px;
}
.imageCanvas .sayBlock .content {
  top: 9px;
  text-align: center;
  align-content: center;
}
.imageCanvas .goalBlock {
  left: 365px;
  top: 365px;
  width: 570px;
  height: 160px;
}
.imageCanvas .painBlock {
  left: 365px;
  top: 535px;
  width: 570px;
  height: 160px;
}