/* One shared translator window; original and result keep their own content. */
body:has(#translatorView.active){--header-height:56px;--nav-height:60px}
main:has(> #translatorView.active){display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0 12px 6px}
#translatorView.active{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;padding-top:6px;gap:6px}
#translatorView .section-head{margin:0;flex:0 0 auto}
#translatorView .section-head h1{font-size:20px;line-height:1.2;margin:0}
#translatorView .section-head p{display:none}
#translatorView #conversationStart{flex:0 0 auto;min-height:40px;height:40px;margin:0;padding:7px 12px;font-size:17px;line-height:1.2}
#translatorView .translator-grid{display:flex;flex-direction:column;flex:1;min-height:0;gap:6px;padding:9px;margin:0}
#translatorView .language-row{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);flex:0 0 auto;gap:5px}
#translatorView .language-row select,#translatorView .swap-btn{min-height:40px;height:40px;padding:6px;font-size:15px}
#translatorView .tone-select{flex:0 0 auto;min-height:38px;height:38px;padding:6px 10px;font-size:16px}
#translatorView .translator-window{display:flex;flex-direction:column;flex:1;min-height:100px;border:1px solid #49617b;border-radius:16px;overflow:hidden;background:#071a30}
#translatorView .translator-tabs{display:flex;flex:0 0 auto;gap:0;border-bottom:1px solid #49617b}
#translatorView .translator-tabs button{flex:1;min-width:0;min-height:38px;padding:7px 5px;background:#0a2038;border:0;border-radius:0;color:#bfcbd6;font-size:16px;font-weight:650}
#translatorView .translator-tabs button[aria-selected="true"]{color:#ffe3a0;background:#19344f;box-shadow:inset 0 -3px #e5bd70}
#translatorView .translator-window .translate-field{display:flex;flex:1;flex-direction:column;min-height:0;border:0;border-radius:0;outline-offset:-2px}
#translatorView .translator-window .translate-field-label{flex:0 0 auto;font-size:15px;line-height:1.25;padding:6px 10px;border-radius:0}
#translatorView .translator-window .translate-box{display:block;flex:1;min-height:0!important;height:100%;max-height:none!important;resize:none;padding:10px 12px;font-size:21px;line-height:1.45;border:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain}
#translatorView .translate-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:0 0 auto;gap:6px}
#translatorView .translate-actions>*{width:100%!important;grid-column:auto!important;min-height:42px;padding:7px 4px;font-size:15px;line-height:1.2}
#translatorView .translate-actions .voice-btn{font-size:23px}
#translatorView .translator-output-actions>*{min-height:36px;font-size:14px;padding:5px}
#translatorView .conversation-toggle{flex:0 0 auto;margin:0;font-size:14px;line-height:1.25;align-items:center;gap:6px}
#translatorView .conversation-toggle input{width:18px;height:18px;flex:0 0 18px;margin:0}
#translatorView .translation-status{flex:0 0 auto;min-height:17px;max-height:2.5em;overflow:auto;font-size:13px;line-height:1.25}
#translatorView [hidden]{display:none!important}
@media(max-height:700px){#translatorView .section-head{display:none}#translatorView #conversationStart{height:36px;min-height:36px;font-size:16px}#translatorView .translator-grid{padding:7px;gap:5px}#translatorView .language-row select,#translatorView .swap-btn{height:36px;min-height:36px}#translatorView .tone-select{height:34px;min-height:34px}#translatorView .translator-window .translate-box{font-size:19px}}
body.yoryi-keyboard-open #translatorView #conversationStart,body.yoryi-keyboard-open #translatorView .section-head,body.yoryi-keyboard-open #translatorView .conversation-toggle{display:none}
@media(max-height:440px){main:has(> #translatorView.active){overflow-y:auto}#translatorView.active{height:auto;min-height:100%}#translatorView .translator-window{flex:none;height:190px}}

/* v2.2.19: a single input action row returns the microphone row to the text area. */
#translatorView .translate-actions{
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  gap:8px;
}
#translatorView .translate-actions > *{
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  min-width:0;width:100%!important;
  min-height:52px;
  padding:8px 7px;
  border-radius:13px;
  font-size:clamp(17px,4.5vw,21px);
  font-weight:850;
  line-height:1.15;
  white-space:normal;
  text-align:center;
  overflow-wrap:normal;
}
#translatorView #voiceInput{
  grid-column:auto!important;
  min-height:52px;
  font-size:30px;
  line-height:1;
  padding:4px 8px;
}
#translatorView #clearTranslation{
  font-weight:900;
  -webkit-text-stroke:.3px currentColor;
}
#translatorView .translator-output-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
#translatorView .translator-output-actions > *{
  min-height:54px;
  gap:5px;
  font-size:clamp(19px,5.2vw,22px);
  font-weight:850;
}
#translatorView .translator-output-actions > * span[aria-hidden="true"]{
  display:inline-block;
  font-size:26px;
  line-height:1;
}
#translatorView .translator-output-actions > *:last-child{
  grid-column:1/-1!important;
  width:100%!important;
}
@media(min-width:680px){
  #translatorView .translate-actions{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:10px}
  #translatorView #voiceInput{grid-column:auto!important;min-height:54px;font-size:39px}
  #translatorView .translator-output-actions > *:last-child{grid-column:auto!important}
}
@media(max-height:700px){
  #translatorView .translate-actions{gap:5px}
  #translatorView .translate-actions > *{min-height:46px;padding:5px 6px;font-size:clamp(18px,5.3vw,21px)}
  #translatorView #voiceInput{min-height:46px;font-size:35px}
  #translatorView .translator-output-actions > *{min-height:46px;font-size:clamp(18px,5.1vw,20px)}
  #translatorView .translator-output-actions > * span[aria-hidden="true"]{font-size:24px}
}
@media(max-height:510px){
  #translatorView #voiceInput{grid-column:auto!important}
  #translatorView .translate-actions{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
  #translatorView .translate-actions > *{min-height:42px;font-size:clamp(15px,4.6vw,18px);padding:4px 2px}
  #translatorView #voiceInput{font-size:31px}
  #translatorView .translator-output-actions > *:last-child{grid-column:auto!important}
}

/* Readable tone names and a matching bold dropdown arrow. */
#translatorView .tone-select{
  appearance:none;-webkit-appearance:none;
  width:100%;min-height:44px;height:44px;padding:7px 36px 7px 12px;
  font-family:inherit;font-size:clamp(20px,5.3vw,23px);font-weight:900;line-height:1.2;
  color:#ffe3a0;-webkit-text-stroke:.3px currentColor;
  border-color:#c4a565;
  background-image:linear-gradient(45deg,transparent 50%,#ffe3a0 50%),linear-gradient(135deg,#ffe3a0 50%,transparent 50%);
  background-position:right 17px center,right 10px center;background-size:7px 7px;background-repeat:no-repeat;
}
#translatorView .tone-select option{font-family:inherit;font-size:20px;font-weight:900}
@media(max-height:510px){#translatorView .tone-select{min-height:40px;height:40px;font-size:19px;padding-top:5px;padding-bottom:5px}}

/* Compact automatic read-aloud switch; idle status needs no extra row. */
#translatorView .conversation-toggle{display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:32px;font-size:14px;line-height:1.2;white-space:nowrap;cursor:pointer}
#translatorView .conversation-toggle input{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;width:40px;height:24px;min-height:24px;flex:0 0 40px;margin:0;padding:0;border:1px solid #7890a5;border-radius:20px;background:#263c50;cursor:pointer}
#translatorView .conversation-toggle input::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#d5dfe8;transition:transform .15s}
#translatorView .conversation-toggle input:checked{background:#cda34d;border-color:#f2c66d}
#translatorView .conversation-toggle input:checked::before{transform:translateX(16px);background:#071a30}
#translatorView .conversation-toggle input:focus-visible{outline:2px solid #ffe3a0;outline-offset:3px}
#translatorView .translation-status:empty{display:none!important}