:root {
--pr-bg:         #F0F0F0;
--pr-bdr-top:    #E2E2E2;
--pr-prompt:     #555555;
--pr-emo-bg:     #FFFFFF;
--pr-emo-bdr:    #E2E2E2;
--pr-note-bg:    #FFFFFF;
--pr-note-bdr:   #E2E2E2;
--pr-note-text:  #111111;
--pr-google-bg:  #FFFFFF;
}
[data-theme="dark"] {
--pr-bg:         #2E2E33;
--pr-bdr-top:    #333338;
--pr-prompt:     #9A9A9A;
--pr-emo-bg:     #242428;
--pr-emo-bdr:    #333338;
--pr-note-bg:    #242428;
--pr-note-bdr:   #333338;
--pr-note-text:  #EDEDEC;
--pr-google-bg:  #242428;
}
.pr-wrap {
background:    var(--mg-primary-soft);
border-radius: 10px;
margin:        4px 18px 18px;
padding:       12px 14px;
text-align:    center;
}
@media (max-width: 991px) {
.pr-wrap {
margin: 2px 9px 9px;
}
}
.pr-prompt {
font-size:   13px;
color:       var(--pr-prompt);
margin:      0 0 12px;
line-height: 1.4;
}
.pr-emojis {
display:         flex;
justify-content: center;
gap:             10px;
}
.pr-emo {
width:       40px;
padding:     6px 0;
font-size:   18px;
line-height: 1;
background:  var(--pr-emo-bg);
border:      1px solid var(--pr-emo-bdr);
border-radius: 10px;
cursor:      pointer;
transition:  transform .12s, border-color .15s, background .15s;
}
.pr-emo:active {
transform: scale(.93);
}
.pr-emo.pr-sel {
border-color: var(--mg-primary);
background:   var(--mg-primary-soft);
}
.pr-followup {
margin-top: 12px;
}
.pr-notebox {
display:     flex;
align-items: center;
gap:         10px;
padding:     8px 12px;
background:  var(--pr-google-bg);
border:      1px solid var(--mg-primary);
border-radius: 10px;
color:       var(--mg-primary);
transition:  opacity .15s;
}
.pr-note-icon {
font-size:   15px;
flex-shrink: 0;
color:       var(--mg-primary);
}
.pr-note {
flex:       1;
min-width:  0;
border:     none;
background: transparent;
outline:    none;
font-size:  13px;
color:      var(--pr-note-text);
padding:    0;
height:     auto;
}
.pr-note:disabled {
opacity: .65;
}
.pr-note::placeholder {
color: var(--pr-prompt);
}
.pr-send {
flex-shrink:     0;
width:           24px;
height:          24px;
display:         flex;
align-items:     center;
justify-content: center;
border:          none;
background:      transparent;
padding:         0;
color:           var(--mg-primary);
cursor:          pointer;
font-size:       17px;
line-height:     1;
}
.pr-send:disabled {
cursor:  default;
opacity: .6;
}
@keyframes pr-spin {
to { transform: rotate(360deg); }
}
.pr-send.is-loading i {
display: none;
}
.pr-send.is-loading::after {
content:          '';
display:          block;
width:            14px;
height:           14px;
border:           2px solid var(--mg-primary-soft);
border-top-color: var(--mg-primary);
border-radius:    50%;
animation:        pr-spin .7s linear infinite;
}
.pr-saved {
display:         flex;
align-items:     center;
justify-content: center;
gap:             4px;
height:          18px;
margin:          2px 0;
overflow:        hidden;
font-size:       11px;
color:           var(--pr-prompt);
opacity:         0;
transition:      opacity .4s ease;
}
.pr-saved i {
color: var(--mg-primary);
}
.pr-saved.is-shown {
opacity: 1;
}
.pr-google {
display:         none;
align-items:     center;
gap:             10px;
margin-top:      4px;
padding:         8px 12px;
background:      var(--pr-google-bg);
border:          1px solid var(--mg-primary);
border-radius:   10px;
color:           var(--mg-primary);
text-decoration: none;
font-size:       13px;
transition:      opacity .15s;
}
.pr-google.is-shown {
display:        flex;
pointer-events: auto;
}
.pr-google:hover {
opacity: .82;
color:   var(--mg-primary);
}
.pr-google i:first-child {
font-size:   16px;
flex-shrink: 0;
}
.pr-google span {
flex:       1;
text-align: left;
}
.pr-google i:last-child {
font-size:   14px;
flex-shrink: 0;
}