/* ============================================================================= Body-level UI (siblings of .parkranger-chat-container, appended to ) ============================================================================= */ .chat-bell { position: fixed; right: 0.75rem; top: 4rem; width: 0.5cm; height: 0.5cm; border: none; border-radius: 999px; z-index: 1300; display: grid; place-items: center; color: var(--text-color-bright); background: var(--section-title-background-color); box-shadow: 0 0 0.25rem rgb(0 0 0 / 50%); cursor: pointer; animation: none; &::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 999px; background: white; z-index: -1; will-change: transform, opacity; opacity: 0; animation: none; } &.hidden { display: none; } &.is-pulsing { animation: chat-bell-main 1.2s infinite ease-in-out; &::after { animation: chat-bell-pulse-ring 1.2s infinite ease-in-out; } } &.is-pulse-once { animation: chat-bell-main 1.2s 1 ease-in-out; &::after { animation: chat-bell-pulse-ring 1.2s 1 ease-in-out; } } } @keyframes chat-bell-main { 0%, 100% { transform: scale(1); } 70% { transform: scale(1.1); } } @keyframes chat-bell-pulse-ring { 0% { transform: scale(1); opacity: 0.45; } 70% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } .parkranger-chat-settings { position: fixed; top: 4rem; right: 3rem; z-index: 1301; display: none; flex-direction: column; gap: 0.4rem; padding: 0.45rem; border-radius: 0.5rem; border: 1px solid var(--section-title-background-color); background: var(--article-background-color); box-shadow: 0 0.35rem 0.9rem rgb(0 0 0 / 35%); box-sizing: border-box; width: max-content; min-width: 13.5rem; max-width: min(22rem, calc(100vw - 1rem)); &.show { display: flex; } button { border: 1px solid var(--section-title-background-color); border-radius: 0.35rem; background: transparent; color: var(--text-color-medium-dark); display: inline-flex; align-items: flex-start; gap: 0.45rem; padding: 0.3rem 0.55rem; cursor: pointer; width: 100%; min-width: 0; text-align: left; justify-content: flex-start; overflow-wrap: break-word; word-break: normal; span { display: inline-block; flex: 1 1 auto; min-width: 0; white-space: normal; text-align: left; line-height: 1.2; } &[data-enabled="0"] { opacity: 0.72; } } } /* ============================================================================= Flyout: .parkranger-chat-container > .parkranger-chat-panel > … ============================================================================= */ .parkranger-chat-container { position: fixed; inset: 0; z-index: 1299; display: none; &.show { display: block; } .parkranger-chat-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 55%); } .parkranger-chat-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(42rem, 96vw); background: var(--article-background-color); border-radius: .5rem; box-shadow: -0.25rem 0 1rem rgb(0 0 0 / 40%); display: grid; /* Tags + chat-context are shrink-wrapped; flexible height goes to the message list. */ grid-template-rows: auto auto minmax(9rem, 1fr) auto auto; gap: 0.5rem; padding: 0.75rem; min-height: 0; } .chat-tag-chips { display: flex; gap: 0.5rem; overflow-x: auto; white-space: nowrap; padding-bottom: 0.25rem; padding-inline: 0.2rem; cursor: grab; user-select: none; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } &.is-dragging { cursor: grabbing; } button { border: 1px solid var(--section-title-background-color); background: transparent; color: var(--text-color-medium-dark); border-radius: 0.5rem; padding: 0.35rem 0.6rem; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: max-content; height: auto; aspect-ratio: unset; white-space: nowrap; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; &.active { transform: scale(1.25); box-shadow: 0 0 0.75rem rgb(0 0 0 / 35%); color: var(--text-color-bright); background: var(--section-title-background-color); &:first-child { transform-origin: left center; } &:last-child:not(:only-child) { transform-origin: right center; } } } .manual-approval-tag-icon { margin-right: 0.35rem; font-size: 0.9em; &.is-pulsing { animation: manual-approval-tag-icon-pulse 1.1s ease-in-out infinite; } } } .chat-context { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; min-width: 0; overflow: hidden; border: 1px solid rgb(125 125 125 / 30%); border-radius: 0.5rem; box-shadow: 0 0 7px 3px black; padding: 0.4rem 0.5rem; .chat-context-header { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; box-sizing: border-box; min-width: 0; strong { flex: 1 1 auto; min-width: 0; } .manual-approval-approve { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: max-content; white-space: nowrap; height: auto; aspect-ratio: unset; } button.manual-approval-approve:not(.client) { display: none; } } .manual-approval-media-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.25rem; button { border: 1px solid var(--section-title-background-color); border-radius: 0.35rem; background: transparent; color: var(--text-color-medium-dark); padding: 0.35rem; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: max-content; white-space: nowrap; height: auto; aspect-ratio: unset; &.active { background: var(--section-title-background-color); color: var(--text-color-bright); } } .manual-approval-tab-lock { margin-left: 0.25rem; } } .manual-approval-media-stage { flex: 0 1 auto; min-height: 10rem; max-height: 13rem; min-width: 0; position: relative; border-radius: 0.5rem; border: 1px dashed var(--section-title-background-color); display: grid; place-items: center; overflow: hidden; touch-action: none; img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: #e7e7e7; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; transition: opacity 180ms ease; } &.is-dragging img { cursor: grabbing; } &.is-loading-media img { opacity: 0.86; } &.is-refreshing-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgb(0 0 0 / 35%); pointer-events: none; } &.is-refreshing-media::before { content: "Updating photo…"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 0.35rem 0.65rem; border-radius: 0.35rem; background: rgb(0 0 0 / 72%); color: #fff; font-size: 0.85rem; pointer-events: none; white-space: nowrap; } .manual-approval-drag-label { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.78rem; letter-spacing: 0.02em; color: #fff; background: rgb(0 0 0 / 52%); pointer-events: none; text-transform: lowercase; z-index: 1; } .manual-approval-media-actions { position: absolute; right: 0.5rem; bottom: 0.5rem; display: flex; gap: 0.35rem; align-items: center; } .manual-approval-retake, .manual-approval-lock { border: none; border-radius: 0.35rem; background: rgb(0 0 0 / 65%); box-shadow: unset; color: #fff; padding: 0.3rem 0.45rem; display: inline-flex; align-items: center; justify-content: center; width: fit-content !important; min-width: max-content !important; white-space: nowrap !important; flex: 0 0 auto !important; cursor: pointer; &[disabled] { opacity: 0.5; cursor: not-allowed; } } button.manual-approval-lock:not(.client) { display: none; } } .manual-approval-identities-grid { font-size: 0.9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; .manual-approval-info-card { border: 1px solid rgb(125 125 125 / 30%); border-radius: 0.35rem; padding: 0.35rem 0.45rem; min-height: 4.5rem; margin: unset; box-sizing: border-box; width: 100%; } .manual-approval-info-title { margin: 0 0 0.2rem; font-size: 0.82rem; line-height: 1.1; color: var(--text-color-medium-dark); font-weight: 600; } .manual-approval-info-line { line-height: 1.2; color: #4f4f4f; overflow-wrap: anywhere; } } } .parkranger-chat { background-color: var(--background-color); border: 1px solid rgb(125 125 125 / 30%); border-radius: 0.5rem; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgb(125 125 125 / 55%) transparent; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; &::-webkit-scrollbar { width: 0.55rem; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: rgb(125 125 125 / 55%); border-radius: 999px; } .chat-line { font-size: 0.9rem; line-height: 1.25rem; color: #787878; .manual-approval-retake-microblink-btn { margin: 0.2rem 0 0; white-space: nowrap; display: inline-flex; width: fit-content; font-size: 0.78rem; line-height: 1.1; padding: 0.22rem 0.5rem; border-radius: 0.3rem; border: 1px solid var(--section-title-background-color); background: var(--section-title-background-color); color: #fff; cursor: pointer; } &.client { color: var(--section-title-background-color); } &.system { color: var(--text-color-medium-dark); font-style: italic; opacity: 0.85; } } .parkranger-chat-dateline { text-align: center; font-style: italic; color: var(--text-color-medium-dark); opacity: 0.82; padding: 0.15rem 0 0.05rem; font-size: 0.82rem; } .manual-approval-msg-initials { font-weight: 600; cursor: default; position: relative; } .chat-ts { width: 3.75rem; display: inline-block; color: var(--text-color-medium-dark); opacity: 0.8; font-family: monospace; } em { font-style: italic; } } .chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: max-content; white-space: nowrap; height: auto; aspect-ratio: unset; padding: 0.35rem 0.5rem; } } .manual-approval-actions { display: flex; justify-content: space-between; gap: 0.5rem; button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: max-content; white-space: nowrap; height: auto; aspect-ratio: unset; } button.manual-approval-approve:not(.client) { display: none; } } &.client-mode { @media (orientation: landscape) and (pointer: coarse) { .parkranger-chat-panel { width: 100vw; } .chat-context .manual-approval-media-stage { min-height: min(58vh, 28rem); height: min(58vh, 28rem); } } } } @keyframes manual-approval-tag-icon-pulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 0.7; } } /* ============================================================================= Payment page DL capture (outside flyout; toggled from chat lock state) ============================================================================= */ .dl-image-snapshot.manual-locked { pointer-events: none; filter: grayscale(0.6); opacity: 0.85; } /* Guard against global button sizing rules collapsing manual-approval controls. */ /* .parkranger-chat-container .chat-tag-chips button, .parkranger-chat-container .manual-approval-media-tabs button, .parkranger-chat-container .manual-approval-media-stage .manual-approval-retake, .parkranger-chat-container .manual-approval-media-stage .manual-approval-lock, .parkranger-chat-container .chat-compose button, .parkranger-chat-container .manual-approval-actions button, .parkranger-chat-container .chat-context-header .manual-approval-approve { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: max-content !important; max-width: none !important; height: auto !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } .parkranger-chat-container .chat-tag-chips button, .parkranger-chat-container .manual-approval-media-stage .manual-approval-retake, .parkranger-chat-container .manual-approval-media-stage .manual-approval-lock, .parkranger-chat-container .chat-compose button, .parkranger-chat-container .manual-approval-actions button, .parkranger-chat-container .chat-context-header .manual-approval-approve { flex: 0 0 auto !important; } */ /* Visitor Microblink retake: flat selectors + body hook (beats nested-CSS / pipeline quirks). */ body.parkranger-chat-microblink-mini .parkranger-chat-container.show, .parkranger-chat-container.show.is-microblink-mini { inset: unset !important; top: var(--chat-microblink-mini-top, 4rem) !important; right: var(--chat-microblink-mini-right, 0.75rem) !important; left: auto !important; bottom: auto !important; width: 1cm !important; height: 1cm !important; max-width: 1cm !important; max-height: 1cm !important; overflow: hidden !important; z-index: 1298 !important; pointer-events: none !important; transition: top 0.35s ease, right 0.35s ease, width 0.35s ease, height 0.35s ease, max-width 0.35s ease, max-height 0.35s ease; } body.parkranger-chat-microblink-mini .parkranger-chat-container.show .parkranger-chat-overlay, .parkranger-chat-container.show.is-microblink-mini .parkranger-chat-overlay { opacity: 0 !important; pointer-events: none !important; } body.parkranger-chat-microblink-mini .parkranger-chat-container.show .parkranger-chat-panel, .parkranger-chat-container.show.is-microblink-mini .parkranger-chat-panel { opacity: 0 !important; pointer-events: none !important; transform: scale(0.02) !important; transform-origin: top right !important; transition: opacity 0.25s ease, transform 0.35s ease; }