/* C019 uses the live translation form and results, within the phone cascade. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body #research-app[data-research-page="translation"] {
        --mt-ink: #171821;
        --mt-muted: #827989;
        --mt-line: #e5e2e9;
        --mt-paper: #fff;
        --mt-tint: #ffffff70;
        --mt-upload-filter: grayscale(1) brightness(.5);
        --mt-blue: #3474d4;
        --mt-disabled: #edebf0;
        --mt-disabled-ink: #aba5b1;
        height: var(--mtranslation-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: radial-gradient(ellipse 83% 30% at 50% -3%, #f6bbd9, transparent),
            radial-gradient(ellipse 94% 32% at 0 0, #ddd0fb, transparent), var(--mt-paper) !important;
    }
    html body:is([data-ui-theme="dark"], [data-theme="dark"]) #research-app[data-research-page="translation"],
    html:is([data-ui-theme="dark"], [data-theme="dark"]) body #research-app[data-research-page="translation"] {
        --mt-ink: #f1f1f5;
        --mt-muted: #aaa2b5;
        --mt-line: #403b49;
        --mt-paper: #191a22;
        --mt-tint: #25222dcc;
        --mt-upload-filter: grayscale(1) brightness(0) invert(1);
        --mt-blue: #91b9fa;
        --mt-disabled: #34303c;
        --mt-disabled-ink: #98909f;
        background: radial-gradient(ellipse 83% 30% at 50% -3%, #73334888, transparent),
            radial-gradient(ellipse 94% 32% at 0 0, #45386388, transparent), var(--mt-paper) !important;
    }
    html body #research-app[data-research-page="translation"] > .creation-workspace {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }
    html body #research-app[data-research-page="translation"] [data-fuuvo-shared-topbar] {
        position: relative !important;
        display: flex !important;
        flex: 0 0 auto !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)) !important;
        justify-content: space-between !important;
        background: transparent !important;
        color: var(--mt-ink) !important;
    }
    html body #research-app[data-research-page="translation"] [data-fuuvo-shared-topbar]
        :is(.fuuvo-mobile-prototype-title, .fuuvo-mobile-prototype-new-chat) {
        display: none !important;
    }
    html body #research-app[data-research-page="translation"] [data-fuuvo-shared-topbar] .shell-topbar-center {
        display: contents !important;
    }
    html body #research-app[data-research-page="translation"] [data-fuuvo-shared-topbar] .shell-topbar-center > strong {
        display: none !important;
    }
    html body #research-app[data-research-page="translation"] [data-fuuvo-shared-topbar] .shell-topbar-right {
        display: flex !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
    }
    html body #research-app[data-research-page="translation"] .shell-topbar-right > :not(.mtranslation-language) { display: none !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-brand {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 99px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-brand img {
        display: block !important;
        width: 99px !important;
        height: auto !important;
        filter: none !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-brand span {
        position: absolute !important;
        left: calc(100% + 5px) !important;
        bottom: 6px !important;
        color: var(--mt-ink) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        width: auto !important;
        height: 16px !important;
        white-space: nowrap !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-language {
        display: flex !important;
        height: 36px !important;
        padding: 2px !important;
        gap: 1px !important;
        border: 1px solid #ffffff66 !important;
        border-radius: 10px !important;
        background: var(--mt-tint) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-language a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-width: 29px !important;
        height: 30px !important;
        padding: 0 5px !important;
        border-radius: 7px !important;
        color: var(--mt-muted) !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 400 !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-language :is(.active, [aria-current="page"]) {
        color: var(--mt-ink) !important;
        background: var(--mt-paper) !important;
        font-weight: 650 !important;
        box-shadow: 0 1px 4px #6551710d !important;
    }
    html body #research-app[data-research-page="translation"] [data-fuuvo-app-scroll] {
        display: block !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 12px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)) !important;
        margin: 0 !important;
        background: transparent !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: thin !important;
    }
    html body #research-app[data-research-page="translation"]
        :is(.research-detail-title, .research-detail-breadcrumb, [data-translation-form-title], .translation-tabs, .fuuvo-mobile-workspace-tabs, .fuuvo-ai-disclaimer) {
        display: none !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-heading {
        position: relative !important;
        margin: 0 0 16px !important;
        color: var(--mt-ink) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-heading h1 {
        margin: 0 !important;
        font-size: 28px !important;
        line-height: 36px !important;
        letter-spacing: -.8px !important;
        font-weight: 650 !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-heading p {
        margin: 1px 0 0 !important;
        font-size: 14px !important;
        line-height: 21px !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-history {
        position: absolute !important;
        top: -4px !important;
        right: -9px !important;
        width: 44px !important;
        height: 44px !important;
        display: grid !important;
        place-items: center !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"] :is(.mtranslation-modes, .mtranslation-modes .translation-tabs) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 4px !important;
        margin: 0 0 16px !important;
        border: 1px solid var(--mt-line) !important;
        border-radius: 15px !important;
        background: var(--mt-tint) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-modes button {
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 5px !important;
        border: 0 !important;
        border-radius: 11px !important;
        color: var(--mt-muted) !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-modes :is(.is-active, [aria-selected="true"]) {
        color: var(--mt-ink) !important;
        background: var(--mt-paper) !important;
        box-shadow: 0 2px 8px #5042560b !important;
    }
    html body #research-app[data-research-page="translation"] .creation-workspace svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        line-height: 0 !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-button-label {
        font: inherit !important;
        color: inherit !important;
        letter-spacing: inherit !important;
        white-space: nowrap !important;
    }
    html body #research-app[data-research-page="translation"] :is(.translation-detail-grid, .research-input-card) {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    html body #research-app[data-research-page="translation"][data-mobile-translation-view="result"] .research-input-card,
    html body #research-app[data-research-page="translation"][data-mobile-translation-view="input"] .translation-result-card {
        display: none !important;
    }
    html body #research-app[data-research-page="translation"] .language-row {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        min-height: 68px !important;
        margin: 0 0 14px !important;
        padding: 5px 6px !important;
        border: 1px solid var(--mt-line) !important;
        border-radius: 16px !important;
        background: var(--mt-paper) !important;
    }
    html body #research-app[data-research-page="translation"] .language-select {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        text-align: left !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-language-label {
        display: block !important;
        margin: 0 0 3px !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 16px !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"] .language-select select {
        display: block !important;
        min-height: 21px !important;
        height: 24px !important;
        width: 100% !important;
        padding: 0 18px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        color: var(--mt-ink) !important;
        font-size: 14px !important;
        font-weight: 550 !important;
        line-height: 21px !important;
        text-overflow: ellipsis !important;
        box-shadow: none !important;
        text-align: left !important;
        text-align-last: left !important;
        text-indent: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23827989' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
    }
    html body #research-app[data-research-page="translation"] :is(.research-language-icon, .language-arrow) {
        display: none !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-swap {
        width: 40px !important;
        height: 44px !important;
        display: grid !important;
        place-items: center !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mt-muted) !important;
        flex: 0 0 40px !important;
        padding: 0 !important;
    }
    html body #research-app[data-research-page="translation"] :is(.mtranslation-swap, .mtranslation-edit, .mtranslation-speak) .mtranslation-button-label {
        display: none !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-swap:disabled { opacity: .35 !important; }
    html body #research-app[data-research-page="translation"] .detail-textarea {
        border: 1px solid var(--mt-line) !important;
        border-radius: 19px !important;
        background: var(--mt-paper) !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
    }
    html body #research-app[data-research-page="translation"] .detail-textarea textarea {
        display: block !important;
        height: 210px !important;
        min-height: 210px !important;
        padding: 19px 18px 48px !important;
        border: 0 !important;
        border-radius: 19px !important;
        outline: none !important;
        resize: none !important;
        font-size: 18px !important;
        line-height: 1.6 !important;
        background: var(--mt-paper) !important;
        color: var(--mt-ink) !important;
        box-shadow: none !important;
    }
    html body #research-app[data-research-page="translation"] .detail-textarea textarea::placeholder { color: #a09aa8 !important; opacity: 1 !important; }
    html body #research-app[data-research-page="translation"] .detail-textarea small {
        right: auto !important;
        left: 18px !important;
        bottom: 17px !important;
        font-size: 11px !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-paste {
        position: absolute !important;
        right: 10px !important;
        bottom: 3px !important;
        min-height: 40px !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mt-muted) !important;
        font-size: 12px !important;
    }
    html body #research-app[data-research-page="translation"] :is(.transcription-guide, .fuuvo-mobile-upload-symbol) { display: none !important; }
    html body #research-app[data-research-page="translation"] :is(.detail-option-row, [data-translate-only] > h3, .transcription-settings > h3, .transcription-format-note, .research-input-card > [data-translation-submit]) { display: none !important; }
    html body #research-app[data-research-page="translation"] .translation-upload-zone {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) 36px !important;
        grid-template-rows: auto auto !important;
        column-gap: 11px !important;
        row-gap: 0 !important;
        min-height: 73px !important;
        margin: 0 !important;
        padding: 14px 13px !important;
        border: 1px solid var(--mt-line) !important;
        border-radius: 15px !important;
        background: var(--mt-paper) !important;
        text-align: left !important;
    }
    html body #research-app[data-research-page="translation"] .translation-upload-zone > img { display: block !important; align-self: center !important; grid-column: 1 !important; grid-row: 1 / 3 !important; width: 22px !important; height: 22px !important; filter: var(--mt-upload-filter) !important; opacity: .75 !important; }
    html body #research-app[data-research-page="translation"] .translation-upload-zone > strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        line-height: 21px !important;
        color: var(--mt-ink) !important;
    }
    html body #research-app[data-research-page="translation"] .translation-upload-zone > span:not(.fuuvo-mobile-upload-symbol) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 10.5px !important;
        line-height: 17px !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="translate"] .mtranslation-file-choose {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        width: 36px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="translate"] .mtranslation-file-choose .mtranslation-button-label { display: none !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-upload-state { display: none !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-audio-language {
        min-height: 68px !important;
        margin: 0 0 14px !important;
        padding: 5px 6px !important;
        border: 1px solid var(--mt-line) !important;
        border-radius: 16px !important;
        background: var(--mt-paper) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-audio-language > h3 {
        margin: 8px 10px 3px !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 16px !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-audio-language .language-select { padding-top: 0 !important; }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="transcribe"] .translation-upload-zone {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 237px !important;
        padding: 24px 18px !important;
        gap: 0 !important;
        border-style: dashed !important;
        border-radius: 19px !important;
        text-align: center !important;
    }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="transcribe"] .translation-upload-zone > img { width: 34px !important; height: 34px !important; margin-bottom: 18px !important; }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="transcribe"] .translation-upload-zone > strong { font-size: 17px !important; line-height: 25px !important; }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="transcribe"] .translation-upload-zone > span:not(.fuuvo-mobile-upload-symbol) { max-width: 250px !important; font-size: 12px !important; line-height: 19px !important; margin: 6px 0 17px !important; }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="transcribe"] .mtranslation-file-choose {
        min-height: 39px !important;
        padding: 8px 20px !important;
        border: 1px solid var(--mt-line) !important;
        border-radius: 11px !important;
        background: var(--mt-paper) !important;
        color: var(--mt-ink) !important;
        font-size: 13px !important;
    }
    html body #research-app[data-research-page="translation"][data-mobile-translation-mode="transcribe"] .mtranslation-file-choose .mtranslation-icon { display: none !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-setting-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 53px !important;
        margin: 8px 0 0 !important;
        gap: 12px !important;
        font-size: 12px !important;
        color: var(--mt-muted) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-setting-row select {
        width: auto !important;
        max-width: 66% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 20px 0 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        font-size: 12px !important;
        color: var(--mt-ink) !important;
        box-shadow: none !important;
    }
    html body #research-app[data-research-page="translation"] :is(.mtranslation-audio-note, .mtranslation-result-hint) { font-size: 12px !important; line-height: 19px !important; color: var(--mt-muted) !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-source {
        padding: 15px 17px !important;
        border: 1px solid var(--mt-line) !important;
        border-radius: 17px !important;
        margin: 0 0 13px !important;
        background: var(--mt-paper) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-source header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; font-size: 11px !important; color: var(--mt-muted) !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-source p { margin: 8px 0 0 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; color: var(--mt-muted) !important; font-size: 14px !important; line-height: 23px !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-source button { display: grid !important; place-items: center !important; width: 30px !important; height: 30px !important; margin: -5px -6px -3px 0 !important; padding: 7px !important; border: 0 !important; background: transparent !important; color: var(--mt-muted) !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-source button svg { width: 16px !important; height: 16px !important; }
    html body #research-app[data-research-page="translation"] .translation-result-card { display: block !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; }
    html body #research-app[data-research-page="translation"] :is([data-translation-result-title], .translation-result-head > button, .translation-actions) { display: none !important; }
    html body #research-app[data-research-page="translation"] .translation-result-head { padding: 17px 17px 0 !important; margin: 0 !important; border: 1px solid var(--mt-line) !important; border-bottom: 0 !important; border-radius: 18px 18px 0 0 !important; background: var(--mt-paper) !important; }
    html body #research-app[data-research-page="translation"] [data-translation-result-label] { color: var(--mt-blue) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 21px !important; }
    html body #research-app[data-research-page="translation"] .translation-output {
        min-height: 184px !important;
        margin: 0 !important;
        padding: 12px 17px 21px !important;
        border: 1px solid var(--mt-line) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
        background: var(--mt-paper) !important;
        color: var(--mt-ink) !important;
        font-size: 19px !important;
        line-height: 1.62 !important;
        letter-spacing: -.2px !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-height: 50px !important;
        padding: 1px 11px !important;
        border: 1px solid var(--mt-line) !important;
        border-top: 0 !important;
        border-radius: 0 0 18px 18px !important;
        background: var(--mt-paper) !important;
        position: relative !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-toolbar::before { content: ''; position: absolute; top: 0; left: 17px; right: 17px; border-top: 1px solid var(--mt-line); }
    html body #research-app[data-research-page="translation"] .mtranslation-toolbar button { min-height: 44px !important; display: flex !important; align-items: center !important; gap: 6px !important; padding: 9px !important; border: 0 !important; background: transparent !important; color: var(--mt-muted) !important; font-size: 12px !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-toolbar button svg { width: 18px !important; height: 18px !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-toolbar .mtranslation-speak { margin-left: auto !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-result-hint { margin: 13px 0 4px !important; text-align: center !important; font-size: 11px !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-footer {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 36 !important;
        margin-top: auto !important;
        padding: 15px 20px calc(12px + env(safe-area-inset-bottom)) !important;
        background: linear-gradient(0deg, var(--mt-paper) 80%, transparent) !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-footer :is(.mtranslation-submit, .mtranslation-new) {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        gap: 10px !important;
        border: 1px solid var(--mt-ink) !important;
        border-radius: 15px !important;
        background: var(--mt-ink) !important;
        color: var(--mt-paper) !important;
        font-size: 15px !important;
        font-weight: 550 !important;
        box-shadow: none !important;
    }
    html body #research-app[data-research-page="translation"] .mtranslation-footer .mtranslation-submit:disabled { border-color: var(--mt-disabled) !important; background: var(--mt-disabled) !important; color: var(--mt-disabled-ink) !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-footer .mtranslation-new { border-color: var(--mt-line) !important; background: var(--mt-paper) !important; color: var(--mt-ink) !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-legal { margin: 13px 0 0 !important; color: var(--mt-muted) !important; text-align: center !important; font-size: 10px !important; line-height: 15px !important; }
    html body #research-app[data-research-page="translation"] .mtranslation-legal a { display: block !important; color: inherit !important; text-decoration: none !important; }
    html body #research-app[data-research-page="translation"] .detail-live-status { margin: 12px 0 !important; font-size: 13px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; }
    html body #research-app[data-research-page="translation"] :is(button, a, select):focus-visible { outline: 2px solid var(--mt-blue) !important; outline-offset: 2px !important; }
    html body #research-app[data-research-page="translation"] [hidden],
    html body #research-app[data-research-page="translation"][data-mobile-translation-view][data-mobile-translation-mode] [hidden] { display: none !important; }
}
}