/* Shared tool UI — buttons, chips, switches, sheets, editor shell, camera, toast.
   Used by every tool page (timestamp, watermark, …) and by the privacy dialog.
   Uses the Material 3 colour tokens from common-min.css (--primary-color, --surface-color, …),
   so light / dark mode follow html[data-theme] exactly like the Document Scanner. */

#ts-root { position: relative; color: var(--text-color); }
.ts-screen { display: none; }
#ts-root[data-view="home"] #ts-screen-home,
#ts-root[data-view="camera"] #ts-screen-camera,
#ts-root[data-view="editor"] #ts-screen-editor { display: flex; }

/* Camera + editor take over the whole viewport (above header & menu) */
#ts-root[data-view="camera"] #ts-screen-camera,
#ts-root[data-view="editor"] #ts-screen-editor { position: fixed; inset: 0; z-index: 1100; }
body.ts-locked { overflow: hidden; }
/* Meanwhile the start screen keeps its place (invisibly), so the article behind never jumps: no layout shift. */
#ts-root[data-view="camera"] #ts-screen-home,
#ts-root[data-view="editor"] #ts-screen-home { display: flex; visibility: hidden; }
/* the hidden attribute must win over the display rules below */
#ts-root [hidden], .ts-toast[hidden], .ts-busy[hidden] { display: none !important; }

#ts-root .material-symbols-rounded { user-select: none; }
#ts-root button { font-family: inherit; -webkit-user-select: none; user-select: none; }

/* ---------- Buttons ---------- */
.ts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px;
    font: 500 .9375rem/1 var(--md-ref-typeface-plain); letter-spacing: .1px;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color .2s, box-shadow .2s, filter .2s, color .2s;
}
.ts-btn .material-symbols-rounded { font-size: 20px; }
.ts-btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.ts-btn--filled { background: var(--primary-color); color: var(--on-primary-color); }
.ts-btn--filled:hover { box-shadow: 0 2px 8px rgba(0,0,0,.18); filter: brightness(1.06); }
.ts-btn--tonal { background: var(--secondary-container-color); color: var(--on-secondary-container-color); }
.ts-btn--tonal:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12); filter: brightness(1.03); }
.ts-btn--outlined { background: transparent; color: var(--primary-color); border: 1px solid var(--outline-color); }
.ts-btn--outlined:hover, .ts-btn--text:hover { background: var(--surface-container-low-color); }
.ts-btn--text { background: transparent; color: var(--primary-color); padding: 0 12px; }
.ts-btn:disabled { opacity: .45; pointer-events: none; }

.ts-ico {
    position: relative; width: 48px; height: 48px; flex: 0 0 auto;
    display: inline-grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-color-secondary);
    cursor: pointer; transition: background-color .2s, color .2s;
}
.ts-ico:hover { background: var(--surface-container-color); color: var(--text-color); }
.ts-ico:disabled { opacity: .35; pointer-events: none; }
.ts-ico__badge {
    position: absolute; right: 4px; bottom: 6px; min-width: 16px;
    font: 700 10px/1 var(--md-ref-typeface-plain); text-align: center;
}

/* ---------- Home ---------- */
#ts-screen-home {
    min-height: calc(100vh - 64px); min-height: calc(100svh - 64px);
    align-items: center; justify-content: center; padding: 32px 16px 48px;
}
.ts-home { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ts-hero {
    position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
    border-radius: 28px; background: var(--surface-container-color);
    box-shadow: 0 1px 2px rgba(31,31,31,.08), 0 8px 24px rgba(11,87,208,.1);
}
.ts-hero canvas { display: block; width: 100%; height: 100%; }
.ts-hero__live, .ts-hero__name {
    position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff;
    font: 600 .75rem/1 var(--md-ref-typeface-plain); letter-spacing: .3px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ts-hero__live { left: 12px; text-transform: uppercase; }
.ts-hero__name { right: 12px; }
.ts-hero__name:empty { display: none; }
.ts-hero__live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5252; animation: tsPulse 1.6s ease-in-out infinite; }
@keyframes tsPulse { 50% { opacity: .25; } }

.ts-home__lead { margin: 0; font-size: 1.125rem; line-height: 1.4; color: var(--text-color-secondary); }
.ts-home__cta { display: grid; gap: 12px; width: 100%; }
@media (min-width: 520px) { .ts-home__cta { grid-template-columns: 1fr 1fr; } }
#ts-root[data-mode="upload"] #ts-cta-upload { order: -1; background: var(--primary-color); color: var(--on-primary-color); }
#ts-root[data-mode="upload"] #ts-cta-camera { background: var(--secondary-container-color); color: var(--on-secondary-container-color); }

.ts-dropzone {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px; border: 1.5px dashed var(--outline-color); border-radius: 20px;
    color: var(--text-color-secondary); font-size: .9375rem; line-height: 1.4; cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
.ts-dropzone:hover, .ts-dropzone:focus-visible, .ts-dropzone.is-over {
    border-color: var(--primary-color); background: var(--primary-container-color);
    color: var(--on-primary-container-color); outline: none; border-style: solid;
}
.ts-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: .875rem; color: var(--text-color-secondary); }
.ts-facts li { display: inline-flex; align-items: center; gap: 6px; }
.ts-facts .material-symbols-rounded { font-size: 18px; color: var(--primary-color); }

/* Phones: the whole start screen fits on one screen (shorter picture, no drag & drop box) */
@media (max-width: 599px) {
    .tool-start, #ts-screen-home { padding: 12px 16px 28px; }
    .tool-start__inner, .ts-home { gap: 16px; }
    .tool-hero, .ts-hero { aspect-ratio: 16 / 10; border-radius: 24px; }
    .tool-start__lead, .ts-home__lead { font-size: 1rem; }
    .tool-start .ts-dropzone, #ts-screen-home .ts-dropzone { display: none; }
}

/* ---------- Camera ---------- */
#ts-screen-camera { flex-direction: column; background: #000; color: #fff; }
#ts-screen-camera .ts-ico { color: #fff; }
#ts-screen-camera .ts-ico:hover { background: rgba(255,255,255,.12); color: #fff; }
#ts-screen-camera .ts-ico[aria-pressed="true"] { color: #ffd54f; }
.ts-cam-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ts-cam-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ts-cam-stage video.is-mirrored { transform: scaleX(-1); }
#ts-cam-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.ts-cam-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; gap: 2px;
    padding: max(6px, env(safe-area-inset-top)) 6px 18px;
    background: linear-gradient(rgba(0,0,0,.55), transparent);
}
.ts-cam-spacer { flex: 1; }
.ts-cam-status {
    position: absolute; z-index: 2; top: calc(max(6px, env(safe-area-inset-top)) + 54px); left: 50%; transform: translateX(-50%);
    max-width: calc(100% - 32px); margin: 0; padding: 6px 12px 6px 8px;
    display: flex; align-items: center; gap: 6px; border-radius: 999px;
    background: rgba(0,0,0,.5); font-size: .8125rem; line-height: 1.2;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ts-cam-status .material-symbols-rounded { font-size: 16px; color: #ffd54f; }
#ts-cam-status-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ts-cam-status__btn {
    flex: 0 0 auto; margin-inline-start: 4px; padding: 4px 10px; border: 0; border-radius: 999px;
    background: #ffd54f; color: #1a1c1e; font: 600 .75rem/1.2 var(--md-ref-typeface-plain); cursor: pointer;
}
.ts-cam-countdown {
    position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
    font: 700 28vmin/1 var(--md-ref-typeface-plain); color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.ts-cam-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.ts-cam-flash.is-on { animation: tsFlash .35s ease-out; }
@keyframes tsFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
.ts-cam-error { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px; text-align: center; background: #000; }
.ts-cam-error .material-symbols-rounded { font-size: 48px; opacity: .7; }
.ts-cam-error p { max-width: 340px; margin: 12px auto 20px; line-height: 1.5; color: rgba(255,255,255,.85); }

.ts-cam-templates { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 2px; background: #000; scrollbar-width: none; }
.ts-cam-templates::-webkit-scrollbar { display: none; }
.ts-cam-templates > :first-child { margin-inline-start: auto; }
.ts-cam-templates > :last-child { margin-inline-end: auto; }
.ts-cam-chip {
    flex: 0 0 auto; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.12); color: #fff; font: 500 .8125rem/1 var(--md-ref-typeface-plain); cursor: pointer;
}
.ts-cam-chip.is-active { background: #fff; color: #000; }
.ts-cam-bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: 12px 20px max(16px, env(safe-area-inset-bottom)); background: #000;
}
.ts-cam-side { display: flex; align-items: center; gap: 10px; }
.ts-cam-side.is-end { justify-content: flex-end; }
.ts-cam-thumb { display: none; width: 44px; height: 44px; border-radius: 10px; border: 2px solid rgba(255,255,255,.8); background: #222 center / cover no-repeat; }
.ts-cam-thumb.has-img { display: block; animation: tsPop .3s ease-out; }
@keyframes tsPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.ts-shutter { position: relative; width: 76px; height: 76px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.ts-shutter::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; transition: transform .12s; }
.ts-shutter:active::after { transform: scale(.86); }
.ts-shutter:disabled { opacity: .4; }
.ts-cam-done {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 18px;
    border: 0; border-radius: 999px; background: #d3e3fd; color: #041e49; font: 600 .9375rem/1 var(--md-ref-typeface-plain); cursor: pointer;
}
.ts-cam-done b { min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: #0b57d0; color: #fff; font-size: .8125rem; }

/* ---------- Editor ---------- */
#ts-screen-editor { flex-direction: column; background: var(--bg-color); }
.ts-ed-top {
    display: flex; align-items: center; gap: 2px; min-height: 56px;
    padding: max(4px, env(safe-area-inset-top)) 8px 4px;
    background: var(--surface-color); border-bottom: 1px solid var(--divider-color, var(--outline-variant-color));
}
.ts-ed-top__label { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-ed-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ts-ed-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ts-stage {
    position: relative; flex: 1; min-height: 140px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-container-low-color);
}
#ts-canvas { display: block; border-radius: 4px; box-shadow: 0 4px 18px rgba(0,0,0,.2); touch-action: none; }
#ts-canvas.is-grab { cursor: grab; }
#ts-canvas.is-dragging { cursor: grabbing; }
.ts-stage__hint {
    position: absolute; left: 50%; top: 12px; transform: translate(-50%, -8px);
    padding: 6px 12px; border-radius: 999px; background: var(--inverse-surface-color); color: var(--inverse-on-surface-color);
    font-size: .8125rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.ts-stage__hint.is-visible { opacity: .92; transform: translate(-50%, 0); }

.ts-strip-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-color); border-top: 1px solid var(--divider-color, var(--outline-variant-color)); }
.ts-strip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.ts-thumb {
    position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 0; overflow: hidden;
    border: 2px solid transparent; border-radius: 12px; background: var(--surface-container-low-color); cursor: pointer;
}
.ts-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ts-thumb.is-active { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-container-color); }
.ts-thumb b {
    position: absolute; left: 3px; top: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
}
.ts-strip-add {
    flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center;
    border: 1.5px dashed var(--outline-color); border-radius: 16px; background: transparent; color: var(--primary-color); cursor: pointer;
}
.ts-strip-add:hover { border-color: var(--primary-color); background: var(--primary-container-color); }

/* Panel: under the photo on phones, docked on the right on desktop, so the live preview stays visible */
.ts-panel {
    display: none; max-height: 46vh; max-height: 46svh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-color); border-top: 1px solid var(--divider-color, var(--outline-variant-color));
}
#ts-root.has-panel .ts-panel { display: block; }
@media (max-width: 959px) { #ts-root.has-panel .ts-strip-wrap { display: none; } }
@media (min-width: 960px) {
    .ts-ed-body { flex-direction: row; }
    .ts-panel { width: 380px; max-height: none; border-top: 0; border-inline-start: 1px solid var(--divider-color, var(--outline-variant-color)); }
}
.ts-sheet { display: none; padding: 0 16px 24px; }
.ts-sheet.is-open { display: block; animation: tsSheetIn .22s ease-out; }
@keyframes tsSheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ts-sheet__head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px;
    margin: 0 -16px; padding: 6px 4px 6px 16px; background: var(--surface-color);
}
.ts-sheet__title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; }
.ts-sheet__head .ts-btn--text { min-height: 36px; padding: 0 10px; font-size: .875rem; }

.ts-field { margin-top: 16px; }
.ts-field:first-of-type { margin-top: 4px; }
.ts-field__label { display: block; margin-bottom: 10px; font-size: .875rem; font-weight: 600; letter-spacing: .1px; color: var(--text-color); }
.ts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--outline-variant-color); border-radius: 8px; background: transparent; color: var(--text-color);
    font: 500 .875rem/1.2 var(--md-ref-typeface-plain); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.ts-chip .material-symbols-rounded { font-size: 18px; margin-inline-start: -4px; }
.ts-chip:hover { background: var(--surface-container-low-color); }
.ts-chip.is-active { border-color: transparent; background: var(--secondary-container-color); color: var(--on-secondary-container-color); }
.ts-chip--check.is-active::before { content: "check"; display: inline-block; width: 1em; height: 1em; overflow: hidden; line-height: 1; font-family: "Material Symbols Rounded"; font-size: 18px; margin-inline-start: -4px; font-feature-settings: "liga"; }

.ts-input {
    width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--outline-color); border-radius: 12px;
    background: var(--surface-color); color: var(--text-color); font: 400 1rem/1.4 var(--md-ref-typeface-plain);
}
.ts-input:focus { outline: 2px solid var(--primary-color); outline-offset: -1px; border-color: transparent; }
textarea.ts-input { min-height: 88px; resize: vertical; }
.ts-input[type="datetime-local"] { color-scheme: light; }
[data-theme="dark"] .ts-input[type="datetime-local"] { color-scheme: dark; }
.ts-custom-date { margin-top: 10px; }
.ts-note { margin: 8px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-color-secondary); }
.ts-gps-info { margin: 0 0 10px; font-size: .875rem; line-height: 1.45; }
.ts-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#ts-loc-body.is-off { opacity: .45; pointer-events: none; }

.ts-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-size: .9375rem; cursor: pointer; }
.ts-switch {
    -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 52px; height: 32px; margin: 0;
    border: 2px solid var(--outline-color); border-radius: 16px; background: var(--surface-container-low-color); cursor: pointer; transition: .2s;
}
.ts-switch::after {
    content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--outline-color); transform: translateY(-50%); transition: .2s;
}
.ts-switch:checked { border-color: var(--primary-color); background: var(--primary-color); }
.ts-switch:checked::after { left: 22px; width: 24px; height: 24px; background: var(--on-primary-color); }
.ts-switch:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.ts-range-row { display: flex; align-items: center; gap: 12px; }
.ts-range-row .material-symbols-rounded { font-size: 20px; color: var(--text-color-secondary); }
.ts-range-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--primary-color); }
.ts-range-row output { min-width: 44px; text-align: end; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--text-color-secondary); }

.ts-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ts-swatch {
    position: relative; width: 34px; height: 34px; padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid var(--outline-variant-color); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--surface-color);
}
.ts-swatch.is-active { border-color: var(--primary-color); box-shadow: inset 0 0 0 3px var(--surface-color), 0 0 0 2px var(--primary-container-color); }
.ts-swatch--custom { background: conic-gradient(#ff5252, #ffd54f, #69f0ae, #40c4ff, #7c4dff, #ff4081, #ff5252); }
.ts-swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

.ts-pos-field { display: flex; gap: 20px; align-items: flex-start; }
.ts-pos-margin { flex: 1; min-width: 0; }
.ts-posgrid { display: grid; grid-template-columns: repeat(3, 40px); gap: 6px; }
.ts-posgrid button { position: relative; height: 34px; padding: 0; border: 1px solid var(--outline-variant-color); border-radius: 8px; background: transparent; cursor: pointer; }
.ts-posgrid button::after {
    content: ""; position: absolute; width: 10px; height: 8px; border-radius: 2px; background: var(--outline-color);
    left: calc(5px + var(--x) * (100% - 20px)); top: calc(5px + var(--y) * (100% - 18px));
}
.ts-posgrid button:hover { background: var(--surface-container-low-color); }
.ts-posgrid button.is-active { border-color: var(--primary-color); background: var(--primary-container-color); }
.ts-posgrid button.is-active::after { background: var(--primary-color); }

.ts-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
@media (min-width: 960px) { .ts-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-template {
    display: flex; flex-direction: column; gap: 6px; padding: 6px; cursor: pointer;
    border: 2px solid transparent; border-radius: 16px; background: var(--surface-container-low-color); color: var(--text-color);
    font: 500 .8125rem/1.2 var(--md-ref-typeface-plain); text-align: center; transition: border-color .15s, background-color .15s;
}
.ts-template canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; background: #2b3440; }
.ts-template.is-active { border-color: var(--primary-color); background: var(--primary-container-color); color: var(--on-primary-container-color); }

.ts-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ts-logo-preview { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--outline-variant-color); }

.ts-menu { display: flex; flex-direction: column; gap: 2px; }
.ts-menu button {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 52px; padding: 0 12px;
    border: 0; border-radius: 12px; background: transparent; color: var(--text-color); font-size: 1rem; text-align: start; cursor: pointer;
}
.ts-menu button:hover { background: var(--surface-container-low-color); }
.ts-menu .material-symbols-rounded { color: var(--text-color-secondary); }
.ts-menu .is-danger, .ts-menu .is-danger .material-symbols-rounded { color: var(--error-color); }

.ts-export-head { display: flex; align-items: flex-end; gap: 14px; margin-top: 4px; }
.ts-export-preview { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; background: var(--surface-container-low-color) center / cover no-repeat; border: 1px solid var(--outline-variant-color); }
.ts-export-name { flex: 1; min-width: 0; }
.ts-name-input { display: flex; align-items: center; min-height: 52px; border: 1px solid var(--outline-color); border-radius: 12px; background: var(--surface-color); }
.ts-name-input:focus-within { outline: 2px solid var(--primary-color); outline-offset: -1px; border-color: transparent; }
.ts-name-input input { flex: 1; min-width: 0; height: 46px; padding: 0 0 0 14px; border: 0; background: transparent; color: var(--text-color); font: 400 1rem var(--md-ref-typeface-plain); outline: none; }
.ts-name-input span { padding: 0 14px 0 2px; color: var(--text-color-secondary); }
.ts-export-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ts-export-actions .ts-btn { min-height: 48px; padding: 0 24px; }

/* Bottom tool bar — Material 3 navigation-bar look */
.ts-actions {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    padding: 8px 6px max(8px, env(safe-area-inset-bottom));
    background: var(--surface-container-low-color); border-top: 0;
}
.ts-actions::-webkit-scrollbar { display: none; }
.ts-act {
    flex: 1 0 60px; max-width: 104px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 2px; border: 0; background: transparent; color: var(--text-color-secondary);
    font: 500 .75rem/1.2 var(--md-ref-typeface-plain); cursor: pointer;
}
.ts-act > .material-symbols-rounded { width: 64px; height: 32px; display: grid; place-items: center; border-radius: 16px; transition: background-color .2s, color .2s; }
.ts-act:hover > .material-symbols-rounded { background: var(--surface-container-high-color); }
.ts-act > span:last-child { white-space: nowrap; }
.ts-act.is-active { color: var(--text-color); font-weight: 600; }
.ts-act.is-active > .material-symbols-rounded { background: var(--secondary-container-color); color: var(--on-secondary-container-color); font-variation-settings: "FILL" 1; }
.ts-act--primary > .material-symbols-rounded, .ts-act--primary:hover > .material-symbols-rounded,
.ts-act--primary.is-active > .material-symbols-rounded { background: var(--primary-color); color: var(--on-primary-color); }
.ts-act--primary b { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: 8px; background: var(--primary-container-color); color: var(--on-primary-container-color); font-size: .6875rem; line-height: 16px; }
@media (max-width: 400px) { .ts-act--wide { display: none; } }
/* Phones: the tabs share the width instead of scrolling, so Export is always visible in every language. */
@media (max-width: 599px) {
    .ts-actions { overflow-x: hidden; gap: 0; padding-inline: 2px; }
    .ts-act { flex: 1 1 0; min-width: 0; max-width: none; font-size: .6875rem; }
    .ts-act > .material-symbols-rounded { width: min(64px, 100%); }
    .ts-act > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Toast & busy ---------- */
.ts-toast {
    position: fixed; left: 50%; bottom: 96px; z-index: 1300; max-width: calc(100% - 32px);
    padding: 14px 18px; border-radius: 12px; background: var(--inverse-surface-color); color: var(--inverse-on-surface-color);
    font-size: .875rem; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.ts-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ts-busy { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; background: rgba(0,0,0,.32); }
.ts-busy__card { min-width: 220px; padding: 28px; border-radius: 28px; background: var(--surface-color); color: var(--text-color); text-align: center; box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.ts-busy__card p { margin: 14px 0 0; font-size: .9375rem; }

@media (max-width: 768px) {
    .ts-ico { width: 44px; height: 44px; }
    .ts-templates { gap: 8px; }
    .ts-pos-field { flex-direction: column; gap: 12px; }
    .ts-pos-margin { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-sheet.is-open, .ts-cam-thumb.has-img, .ts-hero__live i { animation: none; }
}