/* =====================================================================
 * src/css/translator.css
 * ---------------------------------------------------------------------
 * Styles shared by the public translation reader (Manhwa/readerpagee.php)
 * and the admin translation editor (admin/manga-translator/).
 *
 * The overlay block below is the ONLY place where translation boxes are
 * styled, so the admin preview and the public reader look identical.
 * ===================================================================== */

/* ------------------------------ fonts ------------------------------ */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../Vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ordibehesht';
    src: url('../ordibehesht.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --------------------- reader page (image + overlay) ---------------- */
/* Each page is a positioned wrapper so overlay percentages always follow
   the *rendered* image, at any screen size or zoom level.               */
.reader-page {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 75%;
    max-width: 100%;
    line-height: 0;
    --rp-w: 800px; /* rendered page width in px - updated by translator.js */
}

.reader-page > img.manhwa-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
}

/* --------------------------- overlay ------------------------------- */
.translation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    line-height: normal;
    pointer-events: none; /* the reader never blocks page interaction */
    overflow: visible;
}

.translation-overlay .tr-item,
.tr-item {
    position: absolute;
    box-sizing: border-box;
    line-height: normal;
}

.translation-overlay .tr-cover,
.tr-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* text is always painted ABOVE the blur / cover layer */
.translation-overlay .tr-text,
.tr-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: normal;
}

.translation-overlay .tr-text-inner,
.tr-text-inner {
    width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    direction: rtl;
    unicode-bidi: plaintext;
}

/* ---------------------- optional caption under a page --------------- */
.tr-page-caption {
    text-align: center;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 13px;
    color: #94a3b8;
    padding: 6px 0 14px;
}

/* ------------------------ translation badge ------------------------- */
.tr-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.tr-badge-published {
    background: #065f46;
    color: #6ee7b7;
    border: 1px solid #10b981;
}

.tr-badge-draft {
    background: #78350f;
    color: #fcd34d;
    border: 1px solid #f59e0b;
}

.tr-badge-none {
    background: #334155;
    color: #cbd5e1;
    border: 1px solid #64748b;
}

/* =====================================================================
 * ADMIN EDITOR (admin/manga-translator/editor.php)
 * Everything below is scoped under body.tr-editor so it can never leak
 * into the public reader.
 * ===================================================================== */
/*
 * The editor is a full height flex column: topbar (auto) + workspace (fills the
 * rest). 100dvh keeps the layout correct on mobile browsers whose address bar
 * hides/shows (100vh would push the last row of controls off screen).
 */
body.tr-editor {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

.tr-editor * {
    box-sizing: border-box;
}

/* ------------------------------- topbar ----------------------------- */
.tr-topbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    background: #1e293b;
    border-bottom: 2px solid #38bdf8;
    min-height: 56px;
}

.tr-topbar-title {
    font-weight: 700;
    color: #38bdf8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.tr-topbar-sep {
    width: 1px;
    height: 26px;
    background: #334155;
    margin: 0 4px;
}

.tr-spacer {
    flex: 1 1 auto;
}

.tr-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #0f172a;
    border: 1px solid #334155;
    color: #94a3b8;
    white-space: nowrap;
}

.tr-status.is-dirty {
    color: #fcd34d;
    border-color: #f59e0b;
}

.tr-status.is-saving {
    color: #7dd3fc;
    border-color: #38bdf8;
}

.tr-status.is-saved {
    color: #6ee7b7;
    border-color: #10b981;
}

.tr-status.is-error {
    color: #fca5a5;
    border-color: #ef4444;
}

/* ------------------------------ buttons ----------------------------- */
.tr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #e2e8f0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    white-space: nowrap;
}

.tr-btn:hover:not(:disabled) {
    background: #1e293b;
    border-color: #38bdf8;
    color: #7dd3fc;
}

.tr-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.tr-btn-primary {
    background: #0284c7;
    border-color: #38bdf8;
    color: #f8fafc;
}

.tr-btn-primary:hover:not(:disabled) {
    background: #0ea5e9;
    color: #0f172a;
}

.tr-btn-success {
    background: #047857;
    border-color: #10b981;
    color: #ecfdf5;
}

.tr-btn-success:hover:not(:disabled) {
    background: #10b981;
    color: #052e16;
}

.tr-btn-danger {
    border-color: #7f1d1d;
    color: #fca5a5;
}

.tr-btn-danger:hover:not(:disabled) {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #fee2e2;
}

.tr-btn.is-active {
    background: #1d4ed8;
    border-color: #60a5fa;
    color: #eff6ff;
}

.tr-btn-sm {
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 8px;
}

/* ------------------------------ layout ------------------------------ */
.tr-workspace {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;   /* lets the canvas and the panel scroll instead of growing */
    height: auto;
    overflow: hidden;
}

.tr-canvas-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #111827 repeating-linear-gradient(45deg, #0b1220 0 12px, #111827 12px 24px);
    padding: 16px;
    text-align: center;
    touch-action: pan-x pan-y;
}

.tr-panel {
    flex: 0 0 320px;
    width: 320px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #1e293b;
    border-right: 2px solid #334155;
    padding: 12px;
}

body.tr-editor.tr-preview .tr-panel,
body.tr-editor.tr-preview .tr-editor-layer,
body.tr-editor.tr-preview .tr-handle,
body.tr-editor.tr-preview .tr-draw-hint {
    display: none !important;
}

/* --------------------------- canvas / page -------------------------- */
.tr-page-stack {
    display: inline-block;
    position: relative;
    text-align: left;
    max-width: 100%;
}

.tr-canvas-page {
    position: relative;
    line-height: 0;
    margin: 0 auto 18px;
    box-shadow: 0 0 0 1px #334155, 0 10px 30px rgba(0, 0, 0, .5);
    background: #0b1220;
}

.tr-canvas-page > img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.tr-canvas-page.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
    padding: 20px;
}

/* the empty state message lives in data-empty-text (set by translator.js) */
.tr-canvas-page.is-empty::after {
    content: attr(data-empty-text);
    text-align: center;
    max-width: 420px;
}

.tr-draw-hint {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(2, 132, 199, .95);
    color: #f8fafc;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

/* --------------------------- editor layer --------------------------- */
.tr-editor-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    line-height: normal;
}

.tr-editor-layer.is-drawing {
    cursor: crosshair;
}

/* boxes are visible outlines only while editing */
.tr-editor-layer .tr-item {
    cursor: move;
    outline: 1px dashed rgba(56, 189, 248, .85);
    overflow: visible;
}

.tr-editor-layer .tr-item:hover {
    outline: 2px solid rgba(125, 211, 252, .9);
}

.tr-editor-layer .tr-item.is-selected {
    outline: 2px solid #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .25);
}

/* keep the Persian text selectable/editable in the editor */
.tr-editor-layer .tr-text {
    overflow: hidden;
}

.tr-editor-layer .tr-item:not(.is-selected) .tr-text-inner {
    pointer-events: none;
}

.tr-editor-layer .tr-item.is-selected .tr-text-inner {
    pointer-events: auto;
    cursor: text;
    outline: none;
}

/* --------------------------- resize handles -------------------------- */
.tr-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #22d3ee;
    border: 2px solid #0f172a;
    border-radius: 3px;
    z-index: 9999;
}

.tr-handle[data-dir="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
.tr-handle[data-dir="n"]  { top: -7px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.tr-handle[data-dir="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.tr-handle[data-dir="e"]  { top: 50%; right: -7px; margin-top: -6px; cursor: ew-resize; }
.tr-handle[data-dir="se"] { bottom: -7px; right: -7px; cursor: nwse-resize; }
.tr-handle[data-dir="s"]  { bottom: -7px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.tr-handle[data-dir="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.tr-handle[data-dir="w"]  { top: 50%; left: -7px; margin-top: -6px; cursor: ew-resize; }

.tr-size-tag {
    position: absolute;
    bottom: -24px;
    left: 0;
    background: rgba(15, 23, 42, .92);
    color: #7dd3fc;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    direction: ltr;
    z-index: 9999;
}

/* ---------------------------- side panel ---------------------------- */
.tr-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
    margin: 4px 0 10px;
}

.tr-group {
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: #172033;
}

.tr-group legend {
    font-size: 12px;
    color: #7dd3fc;
    padding: 0 6px;
}

.tr-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.tr-field > label {
    flex: 0 0 88px;
    color: #cbd5e1;
}

.tr-field input[type="text"],
.tr-field input[type="number"],
.tr-field select,
.tr-field textarea {
    flex: 1 1 auto;
    min-width: 0;
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
}

.tr-field input[type="color"] {
    width: 42px;
    height: 28px;
    padding: 0;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    cursor: pointer;
}

.tr-field input[type="range"] {
    flex: 1 1 auto;
    accent-color: #38bdf8;
}

.tr-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #38bdf8;
    cursor: pointer;
}

.tr-field-value {
    flex: 0 0 46px;
    text-align: center;
    color: #7dd3fc;
    direction: ltr;
}

.tr-textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    direction: rtl;
}

.tr-row-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tr-hint {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.9;
    margin-bottom: 8px;
}

.tr-empty-panel {
    color: #94a3b8;
    font-size: 12px;
    line-height: 2;
    text-align: center;
    padding: 18px 6px;
}

/* ------------------------- shared admin notice ---------------------- */
.tr-warn {
    background: #422006;
    border: 1px solid #f59e0b;
    color: #fcd34d;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.9;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

/* topbar form controls (editor) */
.tr-topbar select,
.tr-topbar input[type="number"] {
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: 12px;
}

.tr-topbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #cbd5e1;
}

.tr-topbar input[type="range"] {
    width: 90px;
    accent-color: #38bdf8;
}

.tr-topbar input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #38bdf8;
}

/* ======================== popup: list of boxes ====================== */
/* Used by the editor's «📋 لیست کادرها» button (editor.php) so a translator
   can jump between the boxes of a whole chapter.                        */
.tr-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

.tr-modal[hidden] {
    display: none !important;
}

.tr-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(2, 6, 23, .72);
}

.tr-modal-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    max-height: min(86vh, 780px);
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.tr-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #172033;
    border-bottom: 1px solid #334155;
}

.tr-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
}

.tr-modal-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid #334155;
}

.tr-modal-tools input[type="search"],
.tr-modal-tools select {
    flex: 1 1 200px;
    min-width: 0;
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
}

.tr-modal-tools select {
    flex: 0 0 auto;
}

.tr-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 12px;
}

.tr-list-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f172a;
    font-size: 12px;
}

.tr-list-row.is-current {
    border-color: #0369a1;
    background: #0f2231;
}

.tr-list-row.is-selected {
    border-color: #22d3ee;
    background: #11293b;
}

.tr-list-page,
.tr-list-index,
.tr-list-size {
    color: #7dd3fc;
    white-space: nowrap;
    direction: ltr;
}

.tr-list-index {
    color: #94a3b8;
}

.tr-list-text {
    min-width: 0;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-list-text.is-empty {
    color: #64748b;
    font-style: italic;
}

/* «برو به کادر» button of every row */
.tr-list-go {
    justify-content: center;
    white-space: nowrap;
}

.tr-list-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 26px 10px;
}

body.tr-modal-open {
    overflow: hidden;
}

/* --------------------------- small extras --------------------------- */
.tr-page-image {
    display: block;
    width: 100%;
    height: auto;
}

.tr-item-editing {
    cursor: move;
}

.tr-item.is-flash {
    outline: 3px solid #f59e0b !important;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, .35) !important;
}

.tr-newprofile-wrap {
    flex: 0 1 auto;
    max-width: 230px;
}

.tr-newprofile-wrap select {
    max-width: 150px;
}

.tr-autosave-count {
    color: #7dd3fc;
    font-size: 11px;
    direction: ltr;
}

.tr-group-profile {
    background: #16233a;
    border-color: #1d4ed8;
}

/* --------------------- admin dashboard tables ----------------------- */
.tr-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}

/* =====================================================================
 * RESPONSIVE LAYER
 * ---------------------------------------------------------------------
 * The editor must be usable on a phone, a tablet, a laptop and a wide
 * desktop:
 *   - > 1100px : canvas + fixed 320px side panel (the original layout)
 *   - <= 1100px: the side panel shrinks, the canvas gets the space back
 *   - <=  900px: the panel becomes a bottom drawer that slides over the
 *                canvas (opened by «🎛 پنل» or by selecting a box)
 *   - <=  640px: compact topbar/fields, phone tuned popup, touch targets
 * Everything is scoped to the editor (body.tr-editor) or to the popup, so
 * the public reader can never be affected by these rules.
 * ===================================================================== */

/* the drawer buttons only exist where the drawer exists */
.tr-panel-toggle,
.tr-panel-close {
    display: none;
    flex: 0 0 auto;
}

.tr-panel-close {
    white-space: nowrap;
}

/* ----------------------------- <= 1100px ---------------------------- */
@media (max-width: 1100px) {
    body.tr-editor .tr-panel {
        flex: 0 0 272px;
        width: 272px;
        padding: 10px;
    }

    body.tr-editor .tr-topbar-title {
        max-width: 220px;
    }

    body.tr-editor .tr-canvas-wrap {
        padding: 12px;
    }

    body.tr-editor .tr-field > label {
        flex: 0 0 78px;
    }
}

/* ------------------------------ <= 900px ---------------------------- */
/* tablet portrait + phones: the panel becomes a drawer above the canvas  */
@media (max-width: 900px) {
    .tr-panel-toggle,
    .tr-panel-close {
        display: inline-flex;
    }

    body.tr-editor .tr-workspace {
        position: relative;
        overflow: hidden;
    }

    body.tr-editor .tr-panel {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: auto;
        flex: 0 0 auto;
        max-height: 62dvh;
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 2px solid #38bdf8;
        border-right: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
        transform: translateY(102%);
        visibility: hidden;
        transition: transform .24s ease, visibility .24s ease;
        pointer-events: none;
    }

    body.tr-editor.tr-panel-open .tr-panel {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* grab handle of the drawer */
    body.tr-editor .tr-panel::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        width: 46px;
        height: 4px;
        margin-left: -23px;
        border-radius: 999px;
        background: #475569;
    }

    body.tr-editor .tr-panel-title {
        margin-top: 10px;
    }

    /* the canvas keeps the full width: the drawer floats above it */
    body.tr-editor .tr-canvas-wrap {
        padding: 10px 10px 16px;
    }

    body.tr-editor .tr-hint {
        font-size: 11px;
        line-height: 1.8;
    }
}

/* ------------------------------ <= 640px ---------------------------- */
@media (max-width: 640px) {
    body.tr-editor .tr-topbar {
        gap: 6px;
        padding: 6px 8px;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
        min-height: 0;
    }

    body.tr-editor .tr-topbar-title {
        max-width: 132px;
        font-size: 12px;
    }

    body.tr-editor .tr-topbar-sep {
        display: none;
    }

    body.tr-editor .tr-topbar label {
        font-size: 11px;
        gap: 4px;
    }

    body.tr-editor .tr-btn {
        padding: 7px 9px;
        font-size: 12px;
        border-radius: 9px;
    }

    body.tr-editor .tr-btn-sm {
        padding: 6px 8px;
        font-size: 11px;
    }

    body.tr-editor .tr-status {
        font-size: 11px;
        padding: 3px 8px;
    }

    body.tr-editor .tr-topbar input[type="range"] {
        width: 64px;
    }

    /* a phone must show the manga page at full width to stay readable */
    body.tr-editor .tr-page-stack {
        width: 100% !important;
    }

    body.tr-editor .tr-canvas-wrap {
        padding: 6px 6px 14px;
    }

    body.tr-editor .tr-canvas-page {
        margin-bottom: 14px;
    }

    body.tr-editor .tr-draw-hint {
        max-width: 92%;
        font-size: 11px;
        white-space: normal;
        text-align: center;
    }

    body.tr-editor .tr-size-tag {
        bottom: -20px;
        font-size: 10px;
        padding: 2px 5px;
    }

    body.tr-editor .tr-field {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.tr-editor .tr-field > label {
        flex: 0 0 62px;
    }

    body.tr-editor .tr-field-value {
        flex: 0 0 40px;
    }

    body.tr-editor .tr-textarea {
        min-height: 84px;
        font-size: 13px;
    }

    body.tr-editor .tr-group {
        padding: 8px;
        margin-bottom: 8px;
    }

    body.tr-editor .tr-newprofile-wrap {
        max-width: none;
    }

    body.tr-editor .tr-newprofile-wrap select {
        max-width: 128px;
    }
}

/* --------------------- touch devices (any width) -------------------- */
/* The resize handle stays 12px so it does not cover the artwork, but the
   finger gets a ~30px hit area through this invisible pseudo element.    */
@media (pointer: coarse) {
    .tr-handle::after {
        content: '';
        position: absolute;
        top: -9px;
        right: -9px;
        bottom: -9px;
        left: -9px;
    }

    body.tr-editor .tr-btn,
    body.tr-editor .tr-topbar select,
    body.tr-editor .tr-topbar input[type="number"] {
        min-height: 34px;
    }

    body.tr-editor .tr-field input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}

/* landscape phones: very little vertical room, keep the drawer short */
@media (max-height: 520px) and (max-width: 900px) {
    body.tr-editor .tr-panel {
        max-height: 78dvh;
    }

    .tr-modal-box {
        max-height: 94dvh;
    }
}

/* --------------------- popup «لیست کادرها» (phone) ------------------ */
@media (max-width: 640px) {
    .tr-modal {
        padding: 0;
        align-items: flex-end;
    }

    .tr-modal-box {
        width: 100%;
        max-height: 92dvh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .tr-modal-head {
        padding: 10px 12px;
    }

    .tr-modal-title {
        font-size: 13px;
    }

    .tr-modal-tools {
        padding: 8px 12px;
    }

    .tr-modal-tools input[type="search"],
    .tr-modal-tools select {
        flex: 1 1 100%;
    }

    /* one box per row: page/index/size on one line, the text below it */
    .tr-list-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        padding: 8px;
    }

    .tr-list-text {
        flex: 1 1 100%;
        overflow: visible;
        white-space: normal;
        line-height: 1.7;
        word-break: break-word;
    }

    .tr-list-go {
        flex: 1 1 100%;
    }

    .tr-list {
        padding: 8px;
    }
}

/* ---------------- admin dashboard (index.php) on small screens ------- */
@media (max-width: 900px) {
    .tr-table {
        font-size: 12px;
    }

    .tr-table th,
    .tr-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
}

/* -------------------- panel title row (all widths) ------------------ */
/* The title hugs the left edge and «✕ بستن» sits on the other side; the
   close button itself is only visible while the drawer is in use (<=900px). */
body.tr-editor .tr-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 10px;
}

/* ------------------ public reader: tablet / small laptop ------------ */
/* translator.css loads AFTER the inline reader styles, so this wins for the
   641px - 1000px range, where the default 75% page would look too narrow.
   Phones stay full bleed through the reader's own 100vw rule.           */
@media (min-width: 641px) and (max-width: 1000px) {
    #imageContainer .reader-page {
        width: 92%;
    }
}