.ticket-image-drafts { display: flex; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.ticket-image-symbol { display: inline-block; width: 18px; height: 18px; background: currentColor; mask: no-repeat center / contain; -webkit-mask: no-repeat center / contain; }
.ticket-image-drafts[hidden] { display: none; }
.ticket-image-draft { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
.ticket-image-draft img { display: block; width: 64px; height: 64px; object-fit: cover; border: 1px solid #87958c; border-radius: 4px; }
.ticket-image-remove, .ticket-image-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #87958c; border-radius: 4px; background: #fff; color: #242c28; cursor: pointer; }
.ticket-image-remove { position: absolute; top: -4px; right: -4px; }
.ticket-message-images:empty { display: none; }
.ticket-message-images { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ticket-message-image { display: grid; place-items: center; width: 100%; max-width: 280px; min-height: 48px; max-height: 280px; padding: 0; overflow: hidden; border: 1px solid #87958c; border-radius: 4px; background: #e9eeeb; color: #242c28; font-size: 12px; cursor: zoom-in; }
.ticket-message-image img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.ticket-image-spinner { box-sizing: border-box; width: 32px; height: 32px; border: 3px solid var(--ok-border, #d6ddd8); border-top-color: var(--ok-accent, #166b56); border-radius: 50%; animation: ticket-image-spin .8s linear infinite; }
@keyframes ticket-image-spin { to { transform: rotate(360deg); } }
.ticket-image-dialog { width: min(1100px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 1px solid #87958c; border-radius: 6px; background: #fff; color: #242c28; box-sizing: border-box; }
.ticket-image-dialog[open] { display: grid; grid-template-rows: 48px minmax(0, 1fr); }
.ticket-image-dialog::backdrop { background: #0009; }
.ticket-image-toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #d6ddd8; }
.ticket-image-tool { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #87958c; border-radius: 4px; background: #fff; color: #242c28; cursor: pointer; }
.ticket-image-toolbar .ticket-image-close { width: 32px; height: 32px; margin-left: auto; }
.ticket-image-tool:hover:not(:disabled) { background: #e9eeeb; }
.ticket-image-tool:disabled { opacity: .45; cursor: not-allowed; }
.ticket-image-tool:focus-visible { outline: 2px solid #166b56; outline-offset: 2px; }
.ticket-image-zoom { flex: 0 0 52px; width: 52px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.ticket-image-stage { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; background: #f4f6f5; touch-action: none; }
.ticket-image-stage > img { display: block; flex: none; width: auto; height: auto; max-width: none; max-height: none; user-select: none; -webkit-user-select: none; }