/*
    TotmMultiCamera - the in-app multi-shot camera. See Mobile-MultiShotCamera-Design.md.

    Always dark, under every theme: it is a viewfinder, and every phone's own camera is dark for
    the same reason (a white frame would glare and fight the picture). So these are fixed colours,
    not Tokens.css variables, and the screen is deliberately outside the Classic/Light x Dark
    matrix. Every control has its own totm-cam-* class and none carries .ui-btn, so no Theme.css or
    Dark.css rule can reach it.
*/

.totm-cam {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Above jQuery Mobile popups and the picker sheet (3000/3001). */
    z-index: 3100;
    background: #000;
    color: #fff;
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.totm-cam.totm-open {
    display: block;
}

/* The page underneath must not scroll or take taps through the overlay. */
body.totm-cam-open {
    overflow: hidden;
}

body.totm-cam-open > .ui-page {
    visibility: hidden;
}

.totm-cam-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    /* Pinch zoom is ours (TotmMultiCamera bindPinch), not the browser's page zoom. */
    touch-action: none;
}

.totm-cam-flash {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.totm-cam-flash.totm-flashing {
    animation: totm-cam-flash 120ms ease-out;
}

@keyframes totm-cam-flash {
    from { opacity: 0.85; }
    to { opacity: 0; }
}

/* ---- Top bar ---------------------------------------------------------------------------- */

.totm-cam-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.totm-cam-close {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    /* !important only to beat Mobile.css's global `button { font-size: 16px !important }`. */
    font-size: 22px !important;
    line-height: 48px;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Beside the X rather than centred: with the torch and Phone camera on the right, a centred count
   collides with the torch on a 390px-wide phone. */
.totm-cam-count {
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.totm-cam-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.totm-cam-torch {
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    /* !important only to beat Mobile.css's global `button { font-size: 16px !important }`. */
    font-size: 22px !important;
    line-height: 48px;
    cursor: pointer;
}

.totm-cam-torch.totm-on {
    background: #ffd54f;
    color: #111;
}

.totm-cam-phone {
    height: 40px;
    padding: 0 14px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    white-space: nowrap;
    cursor: pointer;
}

/* .5 / 1x lens buttons, as in the iPhone's own camera. Only shown where the lenses can be told apart. */
.totm-cam-lenses {
    display: none;
    justify-content: center;
    gap: 10px;
    padding: 10px 0 0;
}

.totm-cam-lenses.totm-open {
    display: flex;
}

.totm-cam-lens {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    /* !important only to beat Mobile.css's global `button { font-size: 16px !important }`. */
    font-size: 13px !important;
    font-weight: 600;
    cursor: pointer;
}

.totm-cam-lens.totm-on {
    background: rgba(0, 0, 0, 0.55);
    color: #ffd54f;
}

/* Pinch-zoom level, shown while zooming and briefly after. */
.totm-cam-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 18px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 200ms ease-out;
    pointer-events: none;
}

.totm-cam-zoom.totm-open {
    opacity: 1;
}

/* ---- Starting / failure message --------------------------------------------------------- */

.totm-cam-message {
    display: none;
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    padding: 20px;
    border-radius: 12px;
    background: rgba(30, 30, 30, 0.92);
    text-align: center;
}

.totm-cam-message.totm-open {
    display: block;
}

.totm-cam-message p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
}

.totm-cam-fallback {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 20px;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Bottom: thumbnail strip and controls ----------------------------------------------- */

.totm-cam-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(0, 0, 0, 0.55);
}

.totm-cam-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 72px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.totm-cam-strip::-webkit-scrollbar {
    display: none;
}

.totm-cam-hint {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    white-space: normal;
}

.totm-cam-thumb {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: #222;
    cursor: pointer;
    animation: totm-cam-thumb-in 150ms ease-out;
    transition: transform 150ms ease-in, opacity 150ms ease-in;
}

.totm-cam-thumb.totm-selected {
    border: 2px solid #fff;
}

/* Deleted in review: shrinks away before it is removed. */
.totm-cam-thumb.totm-removing {
    transform: scale(0.4);
    opacity: 0;
    pointer-events: none;
}

.totm-cam-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes totm-cam-thumb-in {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* A thin ring while the full photo behind the thumbnail is still being saved. */
.totm-cam-thumb.totm-pending::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: totm-cam-spin 0.8s linear infinite;
}

@keyframes totm-cam-spin {
    to { transform: rotate(360deg); }
}

.totm-cam-limit {
    display: none;
    padding: 10px 16px 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.35;
    color: #ffd54f;
    white-space: normal;
}

.totm-cam-limit.totm-open {
    display: block;
}

.totm-cam-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 16px;
}

.totm-cam-spacer,
.totm-cam-done {
    flex: 0 0 96px;
}

.totm-cam-shutter {
    width: 72px;
    height: 72px;
    padding: 0;
    margin: 0;
    border: 4px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 3px #000;
    cursor: pointer;
}

.totm-cam-shutter:active {
    background: #fff;
    transform: scale(0.94);
}

.totm-cam-shutter:disabled {
    opacity: 0.35;
    cursor: default;
}

.totm-cam-done {
    height: 48px;
    padding: 0 8px;
    margin: 0;
    border: 0;
    border-radius: 24px;
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.totm-cam-done:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---- Review: one photo large, Delete / Keep --------------------------------------------- */

.totm-cam-review {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    background: #000;
}

.totm-cam-review.totm-open {
    display: flex;
}

.totm-cam-review-top {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.totm-cam-review-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    /* Hand horizontal swipes to our pointer handlers rather than the browser. */
    touch-action: none;
}

.totm-cam-review-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Swipes belong to the stage. Left to the image, a drag starts the browser's own image drag
       (which cancels the pointer gesture), and a long-press on iOS pops the save-image menu. */
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.totm-cam-review-prev,
.totm-cam-review-next {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 64px;
    margin-top: -32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    /* !important only to beat Mobile.css's global `button { font-size: 16px !important }`. */
    font-size: 36px !important;
    line-height: 60px;
    cursor: pointer;
}

.totm-cam-review-prev {
    left: 8px;
}

.totm-cam-review-next {
    right: 8px;
}

.totm-cam-review-prev:disabled,
.totm-cam-review-next:disabled {
    visibility: hidden;
}

.totm-cam-review-actions {
    display: flex;
    gap: 12px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.totm-cam-delete,
.totm-cam-keep,
.totm-cam-confirm-keep,
.totm-cam-confirm-discard {
    flex: 1;
    height: 48px;
    margin: 0;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.totm-cam-delete,
.totm-cam-confirm-discard {
    border: 2px solid #ef5350;
    background: transparent;
    color: #ef9a9a;
}

.totm-cam-keep,
.totm-cam-confirm-keep {
    border: 0;
    background: #fff;
    color: #111;
}

/* ---- The X's Keep / Discard prompt ------------------------------------------------------ */

.totm-cam-confirm {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
}

.totm-cam-confirm.totm-open {
    display: flex;
}

.totm-cam-confirm-box {
    width: 100%;
    max-width: 360px;
    padding: 20px;
    border-radius: 12px;
    background: #1e1e1e;
    text-align: center;
}

.totm-cam-confirm-box p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.4;
    white-space: normal;
}

.totm-cam-confirm-buttons {
    display: flex;
    gap: 12px;
}

/* ==== TotmVideoRecorder and TotmVideoPlayer ================================================
   See Mobile-VideoUpload-Design.md. Both sit in the camera's .totm-cam shell above (full screen,
   on <body>, always dark for the same reason), so only what differs from the camera is here. */

.totm-vid-size {
    margin-left: auto;
    padding-right: 4px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.85;
}

.totm-vid-timer {
    font-variant-numeric: tabular-nums;
}

/* A red dot beside the clock while recording - the one thing on screen that must be unmissable. */
.totm-vid-recording .totm-vid-timer::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e53935;
    animation: totm-vid-pulse 1.2s ease-in-out infinite;
}

@keyframes totm-vid-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .totm-vid-recording .totm-vid-timer::before {
        animation: none;
    }
}

.totm-vid-notice {
    min-height: 20px;
    padding: 10px 16px 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

/* A ring with a red disc that becomes a rounded square while recording, as on a phone's camera. */
.totm-vid-record {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    margin: 0;
    border: 4px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.totm-vid-record::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e53935;
    transform: translate(-50%, -50%);
    transition: width 120ms ease-out, height 120ms ease-out, border-radius 120ms ease-out;
}

.totm-vid-record.totm-recording::after {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.totm-vid-record:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---- Review: play it back, then Discard / Retake / Use video ----------------------------- */

.totm-vid-review {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #000;
}

.totm-vid-review.totm-open {
    display: flex;
}

.totm-vid-review-video {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #000;
}

.totm-vid-review-actions {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
}

.totm-vid-discard,
.totm-vid-retake,
.totm-vid-use {
    flex: 1 1 0;
    height: 48px;
    padding: 0 8px;
    margin: 0;
    border-radius: 24px;
    /* !important only to beat Mobile.css's global `button { font-size: 16px !important }`. */
    font-size: 16px !important;
    font-weight: 600;
    cursor: pointer;
}

.totm-vid-discard {
    border: 1px solid #ef9a9a;
    background: transparent;
    color: #ef9a9a;
}

.totm-vid-retake {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.totm-vid-use {
    border: 0;
    background: #fff;
    color: #111;
}

/* ---- Player ------------------------------------------------------------------------------ */

.totm-vid-player-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

/* The file name can be long; the X must stay reachable. */
.totm-vid-title {
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Above the video element, whose own controls would otherwise take the taps. */
.totm-vid-player .totm-cam-top,
.totm-vid-player .totm-cam-message {
    z-index: 1;
}

.totm-vid-download {
    text-decoration: none;
}