.annotation-canvas{border:1px solid var(--border);background:var(--muted);border-radius:16px;justify-content:center;display:flex;box-shadow:0 2px 12px #0000000a}.annotation-frame{width:fit-content;max-width:100%;position:relative}.annotation-frame>img{border-radius:15px;width:auto;max-width:100%;max-height:80vh;display:block}.annotation-target{cursor:crosshair;background:0 0;border:0;border-radius:15px;width:100%;height:100%;position:absolute;inset:0}.annotation-target:focus-visible{outline:2px solid var(--foreground);outline-offset:4px}.annotation-frame .flow-pin{z-index:2;background:var(--primary);width:32px;height:32px;color:var(--primary-foreground);cursor:grab;border:2px solid #fff;border-radius:50%;place-items:center;font-size:13px;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0003}.annotation-frame .flow-pin--draft{background:var(--foreground);color:var(--background)}.annotation-frame .flow-pin.is-active{outline:2px solid var(--foreground);outline-offset:2px}.annotation-frame .flow-pin.is-dragging{cursor:grabbing}.annotation-caption{color:var(--muted-foreground);flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:10px;font-size:12px;display:flex}.annotation-status:empty{display:none}.annotation-status{margin-top:6px;font-size:12px;display:block}.annotation-bubble{z-index:100;border:1px solid var(--border);background:var(--background);width:min(320px,100vw - 24px);max-height:calc(100dvh - 24px);color:var(--foreground);border-radius:18px;padding:16px;animation:.14s ease-out annotation-appear;position:fixed;overflow:auto;box-shadow:0 12px 40px #0002,0 2px 8px #0000000a}.annotation-bubble header{justify-content:space-between;align-items:center;margin:-5px -5px 8px 0;display:flex}.annotation-bubble header span{align-items:center;gap:6px;font-size:12px;font-weight:500;display:flex}.annotation-bubble header button{cursor:pointer;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.annotation-bubble header button:hover{background:var(--muted)}.annotation-bubble textarea{border:1px solid var(--border);resize:vertical;background:var(--background);border-radius:10px;width:100%;min-height:105px;padding:11px;font-size:14px;line-height:1.5;display:block}.annotation-bubble textarea:focus{outline:2px solid var(--ring);outline-offset:2px}.annotation-hint{color:var(--muted-foreground);margin:10px 0 14px;font-size:12px;line-height:1.5}.annotation-submit{background:var(--foreground);width:100%;min-height:42px;color:var(--background);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;font-size:13px;font-weight:500;display:flex}.annotation-submit:disabled{opacity:.45;cursor:default}.annotation-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}.annotation-delete{min-height:36px;color:var(--muted-foreground);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.annotation-error{color:var(--destructive);margin-top:10px;font-size:12px}.annotation-general-notes button{padding:8px 0;font-size:12px;text-decoration:underline}@keyframes annotation-appear{0%{opacity:0;translate:0 3px}to{opacity:1;translate:0}}@media (max-width:600px){.annotation-bubble{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);top:auto!important;left:12px!important}}@media (prefers-reduced-motion:reduce){.annotation-bubble{animation:none}}.annotation-canvas{position:relative}.annotation-intro{z-index:3;border:1px solid var(--border);background:var(--background);pointer-events:none;border-radius:14px;align-items:flex-start;gap:18px;max-width:calc(100% - 32px);padding:12px 12px 12px 16px;animation:.18s ease-out annotation-appear;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 16px #00000012}.annotation-intro>span{gap:3px;display:grid}.annotation-intro strong{font-size:13px;font-weight:600}.annotation-intro span span{color:var(--muted-foreground);font-size:12px;line-height:1.45}.annotation-intro button{pointer-events:auto;cursor:pointer;border-radius:50%;flex-shrink:0;place-items:center;width:28px;height:28px;display:grid}.annotation-intro button:hover{background:var(--muted)}.annotation-bubble header>span{font-size:15px;font-weight:600}.annotation-privacy{color:var(--muted-foreground);justify-content:center;align-items:center;gap:5px;margin-top:12px;font-size:10px;display:flex}@media (prefers-reduced-motion:reduce){.annotation-intro{animation:none}}.annotation-bubble{overflow:hidden auto}.annotation-bubble header>span{gap:6px;line-height:1.35}.annotation-frame[data-just-saved=true] .flow-pin.is-active{animation:.32s cubic-bezier(.2,.8,.2,1) annotation-pin-saved}@keyframes annotation-pin-saved{0%{scale:.85}65%{scale:1.08}to{scale:1}}@media (prefers-reduced-motion:reduce){.annotation-frame[data-just-saved=true] .flow-pin.is-active{animation:none}}.annotation-actions{grid-template-columns:1fr 1fr;align-items:center;gap:8px;margin-top:20px;display:grid}.annotation-actions .annotation-submit{border-radius:12px;width:100%;min-width:0;padding:0 14px}.annotation-actions .annotation-delete,.annotation-actions .annotation-cancel{border:1px solid var(--border);min-height:42px;color:var(--foreground);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:13px;font-weight:500;display:inline-flex}.annotation-actions .annotation-delete:hover{color:var(--destructive);border-color:var(--destructive);background:color-mix(in srgb,var(--destructive)5%,transparent)}.annotation-actions .annotation-cancel:hover{background:var(--muted)}.annotation-actions button:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}.annotation-actions button:disabled{opacity:.45;cursor:default}.annotation-footer{border-top:1px solid var(--border);margin-top:16px;padding-top:14px}.annotation-bubble .annotation-privacy{flex-wrap:wrap;justify-content:flex-start;gap:4px;margin:0;font-size:11px}.annotation-privacy a{color:var(--foreground);text-underline-offset:3px;text-decoration:underline}.annotation-connect{background:var(--muted);color:var(--foreground);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:12px;transition:background .15s;display:flex}.annotation-connect:hover{background:var(--secondary)}.annotation-connect>span{gap:4px;display:grid}.annotation-connect strong{font-size:13px;font-weight:600}.annotation-connect span span{color:var(--muted-foreground);font-size:11px;line-height:1.5}.annotation-connect>svg{flex-shrink:0}.annotation-footer a:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}
