/*
 * Multilingual layout resilience.
 *
 * Translated strings are often much longer than the original Chinese UI.
 * Keep these rules conservative: protect public/tool surfaces from overflow
 * without changing canvas, editor, media, or code-heavy tool behavior.
 */

html[lang] {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

html[lang] *,
html[lang] *::before,
html[lang] *::after {
    box-sizing: border-box;
}

html[lang] :where(
    .page-container,
    .main-content,
    .content-wrapper,
    .tool-content-container,
    #tool-content-container,
    .tool-container,
    .tool-wrapper,
    .tool-section,
    .tool-panel,
    .card,
    .modal-content,
    .dropdown-menu,
    .breadcrumb,
    .tool-breadcrumb,
    .article-content,
    .category-content,
    .search-results,
    .language-switcher
) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

html[lang] :where(
    .row,
    .d-flex,
    .display-flex,
    .input-group,
    .btn-group,
    .tool-grid,
    .tools-grid,
    .tool-card-grid,
    .tool-card-grid-homepage,
    .result-grid,
    .output-grid,
    .form-row,
    .form-grid
) > * {
    min-width: 0;
}

html[lang] :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    dt,
    dd,
    label,
    legend,
    summary,
    figcaption,
    .card-title,
    .card-text,
    .tool-header-title,
    .tool-header-desc,
    .section-title,
    .section-subtitle,
    .brand-name,
    .brand-subtitle,
    .related-tool-title,
    .related-tool-desc,
    .dropdown-item,
    .nav-link,
    .breadcrumb-item,
    .badge,
    .alert
) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html[lang] :where(
    button,
    .btn,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .auth-btn,
    .mobile-action-btn,
    .mobile-auth-btn,
    .tool-card-button,
    .tool-card-button-homepage,
    .dropdown-item
) {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

html[lang] :where(.btn, button, [role="button"]) :where(i, svg, .bi, .fa, .fas, .far, .fab) {
    flex: 0 0 auto;
}

html[lang] :where(input, textarea, select, .form-control, .form-select) {
    min-width: 0;
    max-width: 100%;
}

html[lang] :where(.dropdown-menu, .language-switcher .dropdown-menu) {
    max-width: min(92vw, 360px);
}

html[lang] :where(.dropdown-item, .language-switcher .dropdown-item) {
    line-height: 1.3;
}

html[lang] :where(.modern-dropdown .dropdown-item) {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

html[lang] .modern-dropdown {
    min-width: 260px;
    max-width: min(92vw, 340px);
}

html[lang] .modern-dropdown .dropdown-item {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

html[lang] .modern-dropdown .dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

html[lang] :where(
    .table-responsive,
    .result-table,
    .results-table,
    .output-table,
    .tool-results,
    .tool-output,
    .result-panel,
    .output-panel,
    [class*="result-list"],
    [class*="output-list"],
    [class*="result-table"],
    [class*="output-table"]
) {
    max-width: 100%;
    overflow-x: auto;
}

html[lang] :where(table) {
    max-width: 100%;
}

html[lang] :where(th, td) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

html[lang] :where(img, video, canvas, svg, iframe) {
    max-width: 100%;
}

html[lang] :where(pre, code, kbd, samp, textarea, .monospace, .code-output, .json-output, .xml-output) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

html[lang] :where(pre, .code-output, .json-output, .xml-output) {
    max-width: 100%;
    overflow: auto;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] :where(
    .modern-navbar,
    .modern-sidebar,
    .main-content,
    .tool-content-container,
    #tool-content-container,
    .card,
    .modal-content,
    .dropdown-menu,
    .breadcrumb,
    .tool-breadcrumb
) {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] :where(input, textarea, select, .form-control, .form-select) {
    text-align: right;
}

html[dir="rtl"] :where(
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[dir="ltr"],
    textarea[dir="ltr"],
    pre,
    code,
    kbd,
    samp,
    .monospace,
    .code-output,
    .json-output,
    .xml-output,
    .hash-output,
    .checksum-output,
    [class*="code"],
    [class*="json"],
    [class*="xml"],
    [class*="hash"],
    [class*="checksum"],
    [class*="url"]
) {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

html[dir="rtl"] :where(.dropdown-menu) {
    left: auto;
    right: 0;
}

html[dir="rtl"] :where(.text-start) {
    text-align: right !important;
}

html[dir="rtl"] :where(.text-end) {
    text-align: left !important;
}

html[dir="rtl"] :where(.me-1) {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}

html[dir="rtl"] :where(.me-2) {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

html[dir="rtl"] :where(.me-3) {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] :where(.ms-1) {
    margin-left: 0 !important;
    margin-right: .25rem !important;
}

html[dir="rtl"] :where(.ms-2) {
    margin-left: 0 !important;
    margin-right: .5rem !important;
}

html[dir="rtl"] :where(.ms-3) {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

@media (max-width: 768px) {
    html[lang] :where(.dropdown-menu, .language-switcher .dropdown-menu) {
        max-width: calc(100vw - 24px);
    }

    html[lang] :where(.btn, button, [role="button"], .dropdown-item, .nav-link) {
        min-height: 36px;
    }
}