.history-remaining {
    bottom: 190px;
}

.treat-panel-2 {
    top: 428px;
}

.speech-history-panel {
    position: absolute;
    left: 8px;
    top: 242px;
    bottom: 0;
    width: 500px;
    min-height: 184px;
    overflow: hidden;
    border: 1px solid #8ca1af;
    background: #eef5f1;
    color: #183449;
}

.speech-history-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 31px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px 3px 8px;
    border-bottom: 1px solid #8ca1af;
    background: #e7edf1;
    color: #004080;
    font-weight: bold;
    white-space: nowrap;
}

.speech-copy-button {
    width: 134px;
    height: 24px;
    margin-left: auto;
    padding: 1px 5px;
    border-color: #709783;
    background: linear-gradient(#fafffa, #d7eddd);
    color: #1c6241;
    font-weight: bold;
}

.speech-copy-button:focus,
.speech-control-button:focus,
.speech-transcript:focus {
    outline: 2px solid #d59a22;
    outline-offset: -2px;
}

.speech-editor-wrap {
    position: absolute;
    left: 6px;
    right: 151px;
    top: 36px;
    bottom: 6px;
    min-width: 0;
    min-height: 0;
}

.speech-transcript {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    resize: none;
    overflow: auto;
    padding: 6px 7px 25px;
    border: 1px solid #7798ad;
    background: #fff;
    color: #183449;
    font: inherit;
    font-size: 13px;
    line-height: 19px;
}

.speech-interim {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 23px;
    overflow: hidden;
    padding: 2px 6px;
    border-top: 1px dashed #b7c7d0;
    background: rgba(243, 250, 255, .96);
    color: #587184;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.speech-interim:empty::before {
    content: "辨識中的文字會暫時顯示在這裡";
    color: #8a979f;
}

.speech-controls {
    position: absolute;
    right: 6px;
    top: 36px;
    bottom: 6px;
    width: 138px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 7px;
    border-left: 1px dashed #aebcc4;
}

.speech-control-button {
    width: 100%;
    min-height: 28px;
    height: 28px;
    padding: 2px 5px;
}

.speech-toggle.is-listening {
    border-color: #a23b42;
    background: linear-gradient(#fff5f5, #f2cfd2);
    color: #8b1520;
    font-weight: bold;
}

.speech-status {
    min-height: 25px;
    padding: 4px 5px;
    border: 1px solid #adc3b5;
    background: #f7fff8;
    color: #3b5f4b;
    line-height: 16px;
}

.speech-status::before {
    content: "●";
    margin-right: 4px;
    color: #77878f;
}

.speech-status.is-listening::before {
    color: #1d9a50;
}

.speech-status.is-error {
    border-color: #d5a0a5;
    background: #fff3f3;
    color: #9f001f;
}

.speech-status.is-error::before {
    color: #b51f32;
}

.speech-help {
    margin: 0;
    color: #65737c;
    font-size: 10px;
    line-height: 14px;
}