:root {
    --viov-feedback-accent: #0f766e;
    --viov-feedback-accent-hover: #115e59;
    --viov-feedback-danger: #e11d48;
    --viov-feedback-bg: #ffffff;
    --viov-feedback-panel: #f8fafc;
    --viov-feedback-text: #0f172a;
    --viov-feedback-muted: #64748b;
    --viov-feedback-border: #cbd5e1;
    --viov-feedback-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.dark .viov-feedback,
[data-theme="dark"] .viov-feedback {
    --viov-feedback-bg: #0f172a;
    --viov-feedback-panel: #111c2f;
    --viov-feedback-text: #f8fafc;
    --viov-feedback-muted: #94a3b8;
    --viov-feedback-border: #334155;
    --viov-feedback-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

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

.viov-feedback {
    color: var(--viov-feedback-text);
    font-family: 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: 3rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: var(--viov-feedback-accent);
    box-shadow: 0 12px 32px rgba(15, 118, 110, .35);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.viov-feedback__launcher:hover { background: var(--viov-feedback-accent-hover); transform: translateY(-2px); }
.viov-feedback__launcher:focus-visible { outline: 3px solid #5eead4; outline-offset: 3px; }
.viov-feedback__launcher svg { width: 1.2rem; height: 1.2rem; }
.viov-feedback--failure .viov-feedback__launcher { background: #b91c1c; box-shadow: 0 12px 34px rgba(185, 28, 28, .4); }
.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: 1rem;
    background: var(--viov-feedback-bg);
    color: var(--viov-feedback-text);
    box-shadow: var(--viov-feedback-shadow);
}

.viov-feedback__dialog::backdrop { background: rgba(2, 6, 23, .72); backdrop-filter: blur(3px); }
.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: 850; 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: 750; }
.viov-feedback textarea,
.viov-feedback input[type="text"] { width: 100%; border: 1px solid var(--viov-feedback-border); border-radius: .55rem; 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 #14b8a6; 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 #f59e0b; background: rgba(245, 158, 11, .08); 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-border);
    border-radius: .5rem;
    background: var(--viov-feedback-bg);
    color: var(--viov-feedback-text);
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
}
.viov-feedback__button:hover,
.viov-feedback__toolbar button:hover { background: color-mix(in srgb, var(--viov-feedback-accent) 10%, var(--viov-feedback-bg)); }
.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: #fff; }
.viov-feedback__button--primary:hover,
.viov-feedback__button--submit:hover { background: var(--viov-feedback-accent-hover); }
.viov-feedback__button:disabled { cursor: wait; opacity: .6; }
.viov-feedback__icon-button { width: 2.5rem; padding: .5rem; }

.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: .65rem; 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: .5rem; background: #0f172a; 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: .4rem; background: rgba(190, 18, 60, .92); color: #fff; cursor: pointer; }

.viov-feedback__editor { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; background: #0b1220; }
.viov-feedback__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .7rem; border-bottom: 1px solid #334155; background: var(--viov-feedback-bg); }
.viov-feedback__toolbar button.is-active { border-color: var(--viov-feedback-accent); background: var(--viov-feedback-accent); color: #fff; }
.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-border); border-radius: .4rem; background: transparent; }
.viov-feedback__zoom-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1px solid #334155; background: #111827; color: #e2e8f0; 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: #94a3b8; 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; }
}