/*
 * Translation share-image ONLY (.hobe-ti-*).
 * Does not affect Hobe app chrome / Bootstrap.
 */

@font-face {
    font-family: "Noto Naskh Arabic";
    src:
        url("../fonts/noto-naskh-arabic/NotoNaskhArabic-Regular.woff2") format("woff2"),
        url("../fonts/noto-naskh-arabic/NotoNaskhArabic-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans SC";
    src: url("../fonts/noto-sans-sc/NotoSansSC-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.hobe-ti-export-root {
    position: fixed;
    left: -10000px;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

/* Flat canvas — three floating panels, no outer nested card */
.hobe-ti-card {
    width: 400px;
    box-sizing: border-box;
    padding: 20px;
    font-size: 16px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hobe-ti-card[data-theme="light"] {
    background: #e8e8ed;
    color: #18181b;
}

.hobe-ti-card[data-theme="dark"] {
    background: #09090b;
    color: #fafafa;
}

/*
 * Floating panel. Prefer filter:drop-shadow over box-shadow —
 * html-to-image (SVG foreignObject) often drops box-shadow.
 */
.hobe-ti-panel {
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.14));
}

.hobe-ti-card[data-theme="dark"] .hobe-ti-panel {
    background: #18181b;
    border-color: #3f3f46;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

/* Text panels — white surface only, no grey well */
.hobe-ti-text-panel {
    padding: 16px 18px;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
}

.hobe-ti-ar {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    font-family: "Noto Naskh Arabic", serif;
}

.hobe-ti-zh {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    font-family: "Noto Sans SC", sans-serif;
}

.hobe-ti-qr-row {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
}

/* Tight panel hugging the QR image — fixed size so export cannot stretch it */
.hobe-ti-qr-panel {
    box-sizing: border-box;
    padding: 6px;
    line-height: 0;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
}

.hobe-ti-qr {
    width: 72px;
    height: 72px;
    display: block;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
}