.viov-feedback,
.viov-feedback * {
    box-sizing: border-box;
}

.viov-feedback {
    /* BlazorBlueprint/shadcn design tokens. Fallbacks keep this reusable
       library functional in hosts that load their theme after the widget. */
    --viov-feedback-accent: var(--primary, #0f766e);
    --viov-feedback-accent-foreground: var(--primary-foreground, #ffffff);
    --viov-feedback-danger: var(--destructive, #dc2626);
    --viov-feedback-danger-foreground: var(--destructive-foreground, #ffffff);
    --viov-feedback-bg: var(--background, #ffffff);
    --viov-feedback-panel: var(--card, #f8fafc);
    --viov-feedback-text: var(--foreground, #0f172a);
    --viov-feedback-muted-surface: var(--muted, #f1f5f9);
    --viov-feedback-muted: var(--muted-foreground, #64748b);
    --viov-feedback-border: var(--border, #cbd5e1);
    --viov-feedback-input: var(--input, #cbd5e1);
    --viov-feedback-ring: var(--ring, #0f766e);
    --viov-feedback-radius: var(--radius, .5rem);
    --viov-feedback-shadow: var(--shadow-2xl, 0 24px 70px rgba(15, 23, 42, .28));
    color: var(--viov-feedback-text);
    font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.viov-feedback__launcher {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--viov-feedback-accent);
    border-radius: var(--viov-feedback-radius);
    background: var(--viov-feedback-accent);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(15, 23, 42, .18));
    color: var(--viov-feedback-accent-foreground);
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.viov-feedback__launcher:hover { background: color-mix(in srgb, var(--viov-feedback-accent) 90%, transparent); }
.viov-feedback__launcher:focus-visible { outline: 2px solid var(--viov-feedback-ring); outline-offset: 2px; }
.viov-feedback__launcher svg { width: 1.2rem; height: 1.2rem; }
.viov-feedback--failure .viov-feedback__launcher { border-color: var(--viov-feedback-danger); background: var(--viov-feedback-danger); color: var(--viov-feedback-danger-foreground); }
.viov-feedback--capturing { visibility: hidden !important; }

.viov-feedback__dialog {
    width: min(96vw, 96rem);
    max-width: none;
    height: min(94vh, 70rem);
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--viov-feedback-border);
    border-radius: calc(var(--viov-feedback-radius) + .5rem);
    background: var(--viov-feedback-bg);
    color: var(--viov-feedback-text);
    box-shadow: var(--viov-feedback-shadow);
}

.viov-feedback__dialog::backdrop { background: color-mix(in srgb, #000 70%, transparent); }
.viov-feedback__shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; margin: 0; }
.viov-feedback__header,
.viov-feedback__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-color: var(--viov-feedback-border); background: var(--viov-feedback-bg); }
.viov-feedback__header { border-bottom: 1px solid var(--viov-feedback-border); }
.viov-feedback__footer { border-top: 1px solid var(--viov-feedback-border); }
.viov-feedback__header h2 { margin: .1rem 0 0; color: var(--viov-feedback-text); font-size: 1.35rem; line-height: 1.25; }
.viov-feedback__eyebrow { margin: 0; color: var(--viov-feedback-accent); font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.viov-feedback__body { display: grid; grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); min-height: 0; overflow: hidden; }
.viov-feedback__details { min-width: 0; overflow-y: auto; padding: 1.25rem; border-right: 1px solid var(--viov-feedback-border); background: var(--viov-feedback-panel); }
.viov-feedback__label { display: block; margin-bottom: .45rem; font-weight: 500; }
.viov-feedback textarea,
.viov-feedback input[type="text"] { width: 100%; border: 1px solid var(--viov-feedback-input); border-radius: var(--viov-feedback-radius); background: var(--viov-feedback-bg); color: var(--viov-feedback-text); font: inherit; }
.viov-feedback textarea { min-height: 8rem; padding: .8rem; resize: vertical; }
.viov-feedback input[type="text"] { min-width: 11rem; padding: .48rem .65rem; }
.viov-feedback textarea:focus,
.viov-feedback input:focus,
.viov-feedback button:focus-visible { outline: 2px solid var(--viov-feedback-ring); outline-offset: 2px; }
.viov-feedback__hint,
.viov-feedback__privacy { margin: .55rem 0 0; color: var(--viov-feedback-muted); font-size: .78rem; line-height: 1.45; }
.viov-feedback__privacy { padding: .55rem .65rem; border-left: 3px solid var(--viov-feedback-accent); background: var(--viov-feedback-muted-surface); color: var(--viov-feedback-text); }
.viov-feedback__capture-actions { display: grid; gap: .55rem; margin-top: 1rem; }
.viov-feedback__file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.viov-feedback__button,
.viov-feedback__toolbar button,
.viov-feedback__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.35rem;
    padding: .5rem .78rem;
    border: 1px solid var(--viov-feedback-input);
    border-radius: var(--viov-feedback-radius);
    background: var(--viov-feedback-bg);
    color: var(--viov-feedback-text);
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 500;
}
.viov-feedback__button:hover,
.viov-feedback__toolbar button:hover,
.viov-feedback__icon-button:hover { background: var(--accent, var(--viov-feedback-muted-surface)); color: var(--accent-foreground, var(--viov-feedback-text)); }
.viov-feedback__button svg,
.viov-feedback__toolbar svg,
.viov-feedback__icon-button svg,
.viov-feedback__remove-shot svg { width: 1rem; height: 1rem; }
.viov-feedback__button--primary,
.viov-feedback__button--submit { border-color: var(--viov-feedback-accent); background: var(--viov-feedback-accent); color: var(--viov-feedback-accent-foreground); }
.viov-feedback__button--primary:hover,
.viov-feedback__button--submit:hover { background: color-mix(in srgb, var(--viov-feedback-accent) 90%, transparent); color: var(--viov-feedback-accent-foreground); }
.viov-feedback__button:disabled { cursor: wait; opacity: .6; }
.viov-feedback__icon-button { width: 2.5rem; padding: .5rem; border-color: transparent; background: transparent; }

.viov-feedback__screenshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.viov-feedback__screenshot-card { position: relative; min-width: 0; border: 2px solid transparent; border-radius: var(--viov-feedback-radius); background: var(--viov-feedback-bg); }
.viov-feedback__screenshot-card.is-active { border-color: var(--viov-feedback-accent); }
.viov-feedback__thumbnail { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: calc(var(--viov-feedback-radius) - 2px); background: var(--viov-feedback-muted-surface); cursor: pointer; aspect-ratio: 16 / 9; }
.viov-feedback__thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.viov-feedback__screenshot-card > span { position: absolute; left: .3rem; bottom: .3rem; min-width: 1.35rem; padding: .12rem .3rem; border-radius: 999px; background: rgba(15,23,42,.85); color: #fff; text-align: center; font-size: .7rem; }
.viov-feedback__remove-shot { position: absolute; top: .25rem; right: .25rem; display: grid; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 0; border-radius: calc(var(--viov-feedback-radius) - 2px); background: var(--viov-feedback-danger); color: var(--viov-feedback-danger-foreground); cursor: pointer; }

.viov-feedback__editor { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--viov-feedback-muted-surface); }
.viov-feedback__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .7rem; border-bottom: 1px solid var(--viov-feedback-border); background: var(--viov-feedback-bg); }
.viov-feedback__toolbar button { border-color: transparent; background: transparent; }
.viov-feedback__toolbar button.is-active { border-color: var(--viov-feedback-accent); background: var(--viov-feedback-accent); color: var(--viov-feedback-accent-foreground); }
.viov-feedback__color { display: inline-flex; align-items: center; gap: .35rem; color: var(--viov-feedback-muted); font-size: .75rem; }
.viov-feedback__color input { width: 2.3rem; height: 2.3rem; padding: .1rem; border: 1px solid var(--viov-feedback-input); border-radius: calc(var(--viov-feedback-radius) - 2px); background: transparent; }
.viov-feedback__zoom-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1px solid var(--viov-feedback-border); background: var(--viov-feedback-muted-surface); color: var(--viov-feedback-text); font-size: .78rem; }
.viov-feedback__zoom-row label { display: inline-flex; align-items: center; gap: .5rem; }
.viov-feedback__zoom-row input { width: min(13rem, 25vw); }
.viov-feedback__dimensions { margin-left: auto; color: var(--viov-feedback-muted); font-variant-numeric: tabular-nums; }
.viov-feedback__canvas-scroller { min-width: 0; min-height: 0; overflow: auto; padding: 1rem; text-align: center; }
.viov-feedback canvas { display: inline-block; max-width: none; background: #fff; box-shadow: 0 6px 25px rgba(0,0,0,.45); touch-action: none; vertical-align: top; }
.viov-feedback canvas[data-tool="rectangle"],
.viov-feedback canvas[data-tool="arrow"],
.viov-feedback canvas[data-tool="crop"] { cursor: crosshair; }
.viov-feedback canvas[data-tool="text"] { cursor: text; }
.viov-feedback canvas[data-tool="move"] { cursor: move; }

.viov-feedback__status { min-height: 1.25rem; color: var(--viov-feedback-muted); font-size: .82rem; }
.viov-feedback__status[data-kind="success"] { color: #059669; }
.viov-feedback__status[data-kind="warning"] { color: #d97706; }
.viov-feedback__status[data-kind="error"] { color: #dc2626; }
.viov-feedback__footer-actions { display: flex; gap: .55rem; margin-left: auto; }

@media (max-width: 850px) {
    .viov-feedback__dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .viov-feedback__body { display: block; overflow-y: auto; }
    .viov-feedback__details { overflow: visible; border-right: 0; border-bottom: 1px solid var(--viov-feedback-border); }
    .viov-feedback__editor { min-height: 65vh; }
    .viov-feedback__footer { align-items: flex-start; flex-direction: column; }
    .viov-feedback__footer-actions { width: 100%; margin-left: 0; }
    .viov-feedback__footer-actions .viov-feedback__button { flex: 1; }
    .viov-feedback__toolbar button span { display: none; }
    .viov-feedback__launcher span { display: none; }
    .viov-feedback__launcher { width: 3.2rem; height: 3.2rem; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .viov-feedback__launcher { transition: none; }
}