:root{
  --ai-font-color:#353535;
  --ai-post-bg: #f1f3f8;
  --ai-content-bg: #fff;
  --ai-content-border: 1px solid #e3e8f7;
  --ai-border:1px solid #e3e8f7bd;
  --ai-tag-bg:rgba(48, 52, 63, 0.80);
  --ai-cursor: #333;
  --ai-btn-bg: rgba(48, 52, 63, 0.75);
  --ai-title-color: #4c4948;
  --ai-btn-color: #fff;
  --ai-speech-content: #fff;
}
[data-theme=dark], .theme-dark, body.dark, body.dark-theme {
  --ai-font-color:rgba(255,255,255,0.9);
  --ai-post-bg:#30343f;
  --ai-content-bg: #1d1e22;
  --ai-content-border: 1px solid #42444a;
  --ai-border:1px solid #3d3d3f;
  --ai-tag-bg:#1d1e22;
  --ai-cursor: rgb(255, 255, 255, 0.9);
  --ai-btn-bg: #1d1e22;
  --ai-title-color: rgba(255,255,255,0.86);
  --ai-btn-color: rgb(255, 255, 255, 0.9);
  --ai-speech-content: #1d1e22;
}
#post-ai.post-ai{
  background: var(--ai-post-bg);
  border-radius: 12px;
  padding: 10px 12px 11px;
  line-height: 1.3;
  border: var(--ai-border);
  margin-top: 10px;
  margin-bottom: 6px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
#post-ai .ai-title{
  display: flex;
  color: var(--ai-title-color);
  border-radius: 8px;
  align-items: center;
  padding: 0 6px;
  position: relative;
}
#post-ai .ai-title i{
  font-weight: 800;
}
#post-ai .ai-title-text{
  font-weight: bold;
  margin-left: 8px;
  font-size: 17px;
}
#post-ai .ai-tag{
  font-size: 12px;
  background-color: var(--ai-tag-bg);
  color: var(--ai-btn-color);
  border-radius: 4px;
  margin-left: auto;
  line-height: 1;
  padding: 4px 5px;
  border: var(--ai-border);
}
#post-ai .ai-explanation{
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--ai-content-bg);
  border-radius: 8px;
  border: var(--ai-content-border);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ai-font-color);
}
#post-ai .ai-cursor{
  display: inline-block;
  width: 7px;
  background: var(--ai-cursor);
  height: 16px;
  margin-bottom: -2px;
  opacity: 0.95;
  margin-left: 3px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
#post-ai .ai-btn-box{
  font-size: 15.5px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#post-ai .ai-btn-item{
  padding: 5px 10px;
  margin: 10px 16px 0px 5px;
  width: fit-content;
  line-height: 1;
  background: var(--ai-btn-bg);
  border: var(--ai-border);
  color: var(--ai-btn-color);
  border-radius: 6px 6px 6px 0;
  -webkit-border-radius: 6px 6px 6px 0;
  -moz-border-radius: 6px 6px 6px 0;
  -ms-border-radius: 6px 6px 6px 0;
  -o-border-radius: 6px 6px 6px 0;
  user-select: none;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  cursor: pointer;
}
#post-ai .ai-btn-item:hover{
  background: #49b0f5dc;
}
#post-ai .ai-recommend{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#post-ai .ai-recommend-item{
  width: 50%;
  margin-top: 2px;
}
#post-ai .ai-recommend-item a{
  border-bottom: 2px solid #4c98f7;
  padding: 0 .2em;
  color: #4c98f7;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
#post-ai .ai-recommend-item a:hover{
  background-color: #49b1f5;
  border-bottom: 2px solid #49b1f5;
  color: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 768px){
  #post-ai .ai-btn-box{
    justify-content: center;
  }
}
#post-ai .ai-title>svg {
  width: 21px;
  height: 21px;
}
#post-ai .ai-title>svg path{
  fill: var(--ai-font-color);
}
#post-ai .ai-Toggle{
  font-size: 12px;
  border: var(--ai-border);
  background: var(--ai-btn-bg);
  color: var(--ai-btn-color);
  padding: 3px 4px;
  border-radius: 4px;
  margin-left: 6px;
  cursor: pointer;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
  font-weight: bolder;
  pointer-events: none;
  opacity: 0;
}
#post-ai .ai-Toggle:hover{
  background: #49b0f5dc;
}
#post-ai .ai-speech-box{
  width: 21px;
  height: 21px;
  background: var(--ai-font-color);
  margin-left: 7px;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  pointer-events:none;
  opacity:0;
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  -ms-transition:.3s;
  transition:.3s;
  cursor: pointer;
}
#post-ai .ai-speech-content{
  width: 8px;
  background: var(--ai-speech-content);
  height: 8px;
  border-radius: 50%;
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  -ms-transition:.3s;
  transition:.3s;
}
#post-ai .ai-speech-box:hover .ai-speech-content{
  background: #49b0f5;
}
@keyframes ai_breathe {
  0% {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
}