@comty.io/core 0.1.3 → 0.1.5

package/comty-sdk.js

@@ -13,7 +13,8 @@ function getComtyStyle() {
         --comty-muted: var(--comty-toolbar-muted);
         --comty-accent: #55aaf5;
         --comty-error: #ef7676;
-        --comty-outline: oklch(0.62 0.18 255);
+        --comty-outline: var(--comty-toolbar-muted);
+        --comty-comment-focus: var(--comty-toolbar-muted);
         --comty-paper: #fff;
         --comty-ink: #171717;
         --comty-border: #434649;
@@ -37,6 +38,10 @@ function getComtyStyle() {
         --comty-magnifier-gray: #999;
         --comty-magnifier-shadow: 0 .0625rem .375rem rgb(0 0 0 / .5);
         --comty-property-width: 16rem;
+        --comty-inspector-width: 18rem;
+        --comty-inspector-label-width: 5rem;
+        --comty-inspector-row-height: 1.5rem;
+        --comty-copy-size: 1.5rem;
         --comty-property-swatch: 2rem;
         --comty-property-font-size: .6875rem;
         --comty-property-row-height: 1.375rem;
@@ -50,7 +55,6 @@ function getComtyStyle() {
         --comty-dialog-ink: var(--comty-foreground);
         --comty-dialog-soft: var(--comty-muted);
         --comty-dialog-field: var(--comty-field-surface);
-        --comty-dialog-line: var(--comty-border);
         --comty-dialog-backdrop: rgb(0 0 0 / .4);
         --comty-dialog-radius: 2rem;
         --comty-dialog-width: 32rem;
@@ -325,11 +329,11 @@ function getComtyStyle() {
       .comty-pin {
         position: fixed;
         z-index: 2147483645;
-        width: 34px;
-        height: 34px;
+        width: 28px;
+        height: 28px;
         padding: 0;
         border: none;
-        border-radius: 999px 999px 999px 12px;
+        border-radius: 999px 999px 999px 10px;
         background: #0078FF;
         color: white;
         display: grid;
@@ -339,17 +343,17 @@ function getComtyStyle() {
         transform: translate(-50%, -50%);
         appearance: none;
         font-family: sans-serif;
-        filter: drop-shadow(0 8px 18px rgba(0, 120, 255, .28));
+        filter: drop-shadow(0 8px 16px rgba(0, 120, 255, .28));
         display: none;
         overflow: visible;
       }
 
-      #comty-root > .comty-temp-pin { pointer-events: none; }
+      #comty-root > .comty-temp-pin { pointer-events: none; z-index: 2147483647; }
 
       .comty-pin-icon {
         display: block;
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         pointer-events: none;
       }
 
@@ -358,11 +362,11 @@ function getComtyStyle() {
         top: -4px;
         right: -4px;
         display: inline-flex;
-        width: 12px;
-        height: 12px;
+        width: 10px;
+        height: 10px;
         border: 1px solid rgba(255,255,255,.82);
         border-radius: 999px;
-        box-shadow: 0 8px 18px rgba(15,23,42,.18);
+        box-shadow: 0 8px 16px rgba(15,23,42,.18);
         pointer-events: none;
       }
 
@@ -370,7 +374,7 @@ function getComtyStyle() {
         background: var(--comty-surface);
         color: var(--comty-foreground);
         border: 2px solid var(--comty-border);
-        box-shadow: 0 2px 6px rgba(0,0,0,.18);
+        box-shadow: 0 2px 4px rgba(0,0,0,.18);
         filter: none;
         transition:
           border-color 160ms ease,
@@ -420,14 +424,14 @@ function getComtyStyle() {
         background: var(--comty-surface);
         color: var(--comty-foreground);
         border: 0;
-        box-shadow: 0 10px 28px rgba(0,0,0,.2);
+        box-shadow: 0 8px 24px rgba(0,0,0,.2);
         padding: 0;
-        border-radius: 14px;
-        width: min(360px, calc(100vw - 32px));
+        border-radius: 12px;
+        width: min(288px, calc(100vw - 24px));
         overflow: hidden;
         box-sizing: border-box;
         font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        font-size: 14px;
+        font-size: 12px;
         display: none;
         animation: comty-bubble-in 200ms cubic-bezier(.23,1,.32,1) forwards;
         transform-origin: top left;
@@ -455,37 +459,53 @@ function getComtyStyle() {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
-        min-height: 40px;
-        padding: 0 16px;
-        border-bottom: 1px solid var(--comty-border);
-      }
-
-      .comty-bubble-title {
-        margin: 0;
-        color: var(--comty-foreground);
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 1;
-      }
-
-      .comty-bubble-header-actions {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        margin-left: auto;
+        gap: 10px;
+        min-height: 1.5rem;
+        padding: .625rem .625rem 0;
       }
 
       .comty-bubble-content {
         flex: 1;
         color: var(--comty-foreground);
-        font-size: 14px;
+        font-size: .75rem;
         line-height: 1.45;
         overflow-wrap: anywhere;
         cursor: text;
         white-space: pre-wrap;
       }
 
+      .comty-bubble-content a {
+        color: var(--comty-comment-focus);
+        text-decoration: underline;
+        text-underline-offset: .15em;
+      }
+
+      .comty-bubble-content a:focus-visible {
+        outline: .125rem solid var(--comty-comment-focus);
+        outline-offset: .125rem;
+      }
+
+      .comty-comment-link {
+        display: inline-block;
+        box-sizing: border-box;
+        max-width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        padding: .375rem .625rem;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
+        font: .75rem/1.25 var(--comty-font);
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .comty-thread-item .comty-comment-link,
+      .comty-capture-annotation .comty-comment-link { margin-top: .5rem; }
+      .comty-comment-link:hover { text-decoration: underline; }
+      .comty-comment-link:focus-visible { outline: .125rem solid var(--comty-comment-focus); outline-offset: .125rem; }
+
       .comty-bubble-content-editor {
         display: block;
         flex: 1;
@@ -497,7 +517,7 @@ function getComtyStyle() {
         background: transparent;
         color: var(--comty-foreground);
         cursor: text;
-        font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: .75rem/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         outline: none;
         resize: none;
         overflow: hidden;
@@ -507,15 +527,15 @@ function getComtyStyle() {
       }
 
       .comty-thread {
-        padding: 18px 16px 16px;
+        padding: .625rem;
       }
 
       .comty-thread-list {
         display: grid;
         width: 100%;
         min-width: 0;
-        gap: 20px;
-        max-height: min(360px, calc(100vh - 152px));
+        gap: 16px;
+        max-height: min(288px, calc(100vh - 120px));
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -528,9 +548,9 @@ function getComtyStyle() {
         display: grid;
         width: 100%;
         min-width: 0;
-        grid-template-columns: 24px minmax(0, 1fr);
+        grid-template-columns: 1.5rem minmax(0, 1fr);
         align-items: start;
-        gap: 12px;
+        gap: 10px;
       }
 
       .comty-thread-item-body {
@@ -545,15 +565,15 @@ function getComtyStyle() {
         display: flex;
         align-items: center;
         min-width: 0;
-        min-height: 20px;
-        gap: 7px;
+        min-height: 16px;
+        gap: 6px;
       }
 
       .comty-comment-author-name {
         min-width: 0;
         overflow: hidden;
         color: var(--comty-foreground);
-        font-size: 14px;
+        font-size: .75rem;
         font-weight: 600;
         line-height: 1.25;
         text-overflow: ellipsis;
@@ -563,7 +583,7 @@ function getComtyStyle() {
       .comty-comment-time {
         flex: 0 0 auto;
         color: var(--comty-muted);
-        font-size: 13px;
+        font-size: .6875rem;
         font-weight: 400;
         line-height: 1.25;
       }
@@ -571,13 +591,13 @@ function getComtyStyle() {
       .comty-comment-avatar {
         display: grid;
         place-items: center;
-        width: 24px;
-        height: 24px;
+        width: 1.5rem;
+        height: 1.5rem;
         overflow: hidden;
         border-radius: 50%;
         background: var(--comty-field-surface);
         color: var(--comty-foreground);
-        font-size: 10px;
+        font-size: 8px;
         font-weight: 600;
         line-height: 1;
       }
@@ -589,8 +609,8 @@ function getComtyStyle() {
       }
 
       .comty-pin-avatar {
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
       }
 
       .comty-thread-item .comty-bubble-content,
@@ -605,12 +625,12 @@ function getComtyStyle() {
       .comty-icon-button {
         display: inline-grid;
         place-items: center;
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
         flex: 0 0 auto;
         padding: 0;
         border: 0;
-        border-radius: 6px;
+        border-radius: 4px;
         background: transparent;
         color: var(--comty-foreground);
         cursor: pointer;
@@ -640,24 +660,24 @@ function getComtyStyle() {
       }
 
       .comty-icon-button svg {
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         pointer-events: none;
       }
 
       .comty-status-trigger {
         display: inline-flex;
         align-items: center;
-        gap: 6px;
-        min-height: 28px;
+        gap: 4px;
+        min-height: 24px;
         padding: 0 8px;
         border: 0;
-        border-radius: 6px;
+        border-radius: 4px;
         background: transparent;
         color: var(--comty-foreground);
         cursor: pointer;
         appearance: none;
-        font: 600 12px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: 600 .6875rem/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         transition:
           background-color 160ms ease,
           transform 140ms ease-out;
@@ -686,14 +706,14 @@ function getComtyStyle() {
       }
 
       .comty-thread-more {
-        width: 24px;
-        height: 24px;
-        margin: -2px -4px -2px auto;
+        width: 20px;
+        height: 20px;
+        margin: 0 0 0 auto;
       }
 
       .comty-thread-more svg {
-        width: 16px;
-        height: 16px;
+        width: 12px;
+        height: 12px;
       }
 
       .comty-entry-actions-popover {
@@ -712,38 +732,57 @@ function getComtyStyle() {
 
       .comty-reply-form {
         display: grid;
-        grid-template-columns: 24px minmax(0, 1fr);
+        grid-template-columns: 1.5rem minmax(0, 1fr);
         align-items: center;
-        gap: 12px;
-        margin-top: 20px;
+        gap: 10px;
+        margin-top: 16px;
       }
 
       .comty-reply-field {
         display: flex;
         align-items: center;
-        min-height: 36px;
-        padding: 4px 8px 4px 16px;
-        border-radius: 14px;
+        min-height: 1.875rem;
+        padding: .25rem .25rem .25rem .625rem;
+        border-radius: 1.25rem;
         background: var(--comty-field-surface);
         box-sizing: border-box;
-        transition: box-shadow 160ms ease;
+        transition: border-radius var(--comty-motion-duration) var(--comty-ease-in-out), box-shadow 160ms ease;
+      }
+
+      .comty-reply-field.comty-reply-expanded { border-radius: .75rem; }
+
+      .comty-reply-form:has(.comty-reply-expanded) > .comty-comment-avatar {
+        align-self: start;
+      }
+
+      .comty-reply-expanded .comty-reply-button {
+        align-self: flex-end;
       }
 
       .comty-reply-field:focus-within {
-        box-shadow: inset 0 0 0 1px #a3a3a3;
+        box-shadow: inset 0 0 0 .0625rem var(--comty-comment-focus);
       }
 
       .comty-reply-input {
         min-width: 0;
+        min-height: 0;
         flex: 1;
         padding: 0;
         border: 0;
+        height: 1.125rem;
+        max-height: 5rem;
         background: transparent;
         color: var(--comty-foreground);
-        font: 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: .6875rem/1.125rem Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         outline: none;
+        resize: none;
+        overflow-y: hidden;
+        box-sizing: border-box;
+        transition: height var(--comty-motion-duration) var(--comty-ease-in-out);
       }
 
+      .comty-reply-expanded .comty-reply-input { overflow-y: auto; }
+
       .comty-reply-input::placeholder {
         color: var(--comty-muted);
       }
@@ -751,14 +790,14 @@ function getComtyStyle() {
       .comty-reply-button {
         display: inline-grid;
         place-items: center;
-        width: 28px;
-        height: 28px;
+        width: 1.375rem;
+        height: 1.375rem;
         flex: 0 0 auto;
         padding: 0;
         border: 0;
         border-radius: 50%;
-        background: #0d99ff;
-        color: #fff;
+        background: var(--comty-foreground);
+        color: var(--comty-surface);
         cursor: pointer;
         transition:
           background-color 160ms ease,
@@ -767,7 +806,7 @@ function getComtyStyle() {
       }
 
       .comty-reply-button:hover:not(:disabled) {
-        background: #0b87e3;
+        background: var(--comty-muted);
       }
 
       .comty-reply-button:active:not(:disabled) {
@@ -775,13 +814,14 @@ function getComtyStyle() {
       }
 
       .comty-reply-button:disabled {
+        color: var(--comty-muted);
         background: var(--comty-hover-surface);
         cursor: default;
       }
 
       .comty-reply-button svg {
-        width: 16px;
-        height: 16px;
+        width: 12px;
+        height: 12px;
       }
 
       .comty-reply-form-guest { display: block; }
@@ -789,20 +829,20 @@ function getComtyStyle() {
       .comty-sign-in-reply {
         display: block;
         width: 100%;
-        min-height: 36px;
-        padding: 4px 16px;
+        min-height: 32px;
+        padding: 4px 12px;
         border: 0;
-        border-radius: 14px;
+        border-radius: 12px;
         background: var(--comty-field-surface);
-        color: #0d99ff;
+        color: var(--comty-foreground);
         text-align: left;
-        font: 600 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: 600 12px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         cursor: pointer;
         transition: background-color 160ms ease;
       }
 
       .comty-sign-in-reply:hover { background: var(--comty-hover-surface); }
-      .comty-sign-in-reply:focus-visible { outline: 2px solid #0d99ff; outline-offset: 2px; }
+      .comty-sign-in-reply:focus-visible { outline: .0625rem solid var(--comty-comment-focus); outline-offset: .0625rem; }
 
       .comty-hover-bubble {
         width: min(240px, calc(100vw - 32px));
@@ -828,10 +868,6 @@ function getComtyStyle() {
         height: 24px;
       }
 
-      .comty-hover-bubble .comty-comment-author-name {
-        font-size: 12px;
-      }
-
       .comty-hover-bubble .comty-comment-author {
         min-height: 0;
       }
@@ -840,11 +876,6 @@ function getComtyStyle() {
         font-size: 12px;
       }
 
-      .comty-hover-bubble .comty-thread-item .comty-bubble-content {
-        margin-top: 0;
-        font-size: 12px;
-      }
-
       .comty-auth-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 1rem; background: var(--comty-dialog-backdrop); font-family: var(--comty-font); }
       .comty-auth-dialog { box-sizing: border-box; width: min(var(--comty-dialog-width), 100%); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.75rem; border: 0; border-radius: var(--comty-dialog-radius); background: var(--comty-dialog-surface); color: var(--comty-dialog-ink); box-shadow: var(--comty-dialog-shadow); text-align: left; outline: none; }
       .comty-auth-dialog *, .comty-auth-dialog *::before, .comty-auth-dialog *::after { box-sizing: border-box; }
@@ -855,13 +886,23 @@ function getComtyStyle() {
       .comty-auth-header svg { width: 1.25rem; height: 1.25rem; }
       .comty-auth-dialog h2 { margin: 0; color: inherit; font: 600 1.5rem/1.25 var(--comty-font); letter-spacing: -.025em; }
       .comty-auth-dialog p { margin: 1rem 0 0; color: var(--comty-dialog-soft); font: 400 .875rem/1.65 var(--comty-font); }
-      .comty-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: .0625rem solid var(--comty-dialog-line); }
+      .comty-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.75rem; }
       .comty-auth-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; margin: 0; padding: .625rem 1rem; border: 0; border-radius: 999rem; background: transparent; color: var(--comty-dialog-soft); font: 500 .875rem/1.25 var(--comty-font); cursor: pointer; }
       .comty-auth-actions button:hover, .comty-auth-close:hover { background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
       .comty-auth-actions .comty-auth-primary { border-color: transparent; background: var(--comty-dialog-ink); color: var(--comty-dialog-surface); }
       .comty-auth-actions .comty-auth-primary:hover { background: var(--comty-dialog-soft); color: var(--comty-dialog-surface); }
       .comty-auth-dialog button:focus-visible { outline: .125rem solid var(--comty-dialog-ink); outline-offset: .1875rem; }
       .comty-auth-dialog button:disabled { opacity: .5; cursor: wait; }
+      .comty-guest-form { display: grid; gap: .5rem; margin-top: 1.5rem; }
+      .comty-guest-form label { color: var(--comty-dialog-soft); font: 500 .875rem/1.5 var(--comty-font); }
+      .comty-guest-form input { width: 100%; height: 2.75rem; padding: 0 1rem; border: .0625rem solid var(--comty-border); border-radius: .75rem; background: var(--comty-dialog-field); color: var(--comty-dialog-ink); font: 400 .875rem/1.5 var(--comty-font); outline: none; }
+      .comty-guest-form input::placeholder { color: var(--comty-dialog-soft); }
+      .comty-guest-form input:focus-visible { border-color: var(--comty-dialog-ink); box-shadow: 0 0 0 .0625rem var(--comty-dialog-ink); }
+      .comty-guest-form [role="alert"] { margin: 0; color: var(--comty-error); }
+      .comty-guest-actions { display: grid; justify-content: stretch; gap: .75rem; margin-top: 1rem; }
+      .comty-guest-actions button { width: 100%; }
+      .comty-guest-actions [data-comty-login] { background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
+      .comty-auth-or { color: var(--comty-dialog-soft); font: .75rem/1.5 var(--comty-font); text-align: center; }
       .comty-distance-layer { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--comty-measure); }
       .comty-distance-line, .comty-distance-extension { stroke: currentColor; stroke-width: 1; fill: none; shape-rendering: crispEdges; }
       .comty-distance-extension { stroke-dasharray: 3 3; opacity: .65; }
@@ -927,8 +968,6 @@ function getComtyStyle() {
         justify-content: space-between;
         gap: 8px;
         margin-top: 12px;
-        padding-top: 10px;
-        border-top: 1px solid var(--comty-border);
       }
 
       .comty-status-label {
@@ -1010,6 +1049,12 @@ function getComtyStyle() {
         transform-origin: top right;
       }
 
+      .comty-popover.comty-comment-popover {
+        background: var(--comty-field-surface);
+        border: .0625rem solid var(--comty-border);
+        box-shadow: var(--comty-floating-shadow);
+      }
+
       .comty-popover-item {
         display: flex;
         align-items: center;
@@ -1125,11 +1170,11 @@ function getComtyStyle() {
       .comty-property-row button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
       .comty-property-row button[aria-label^="Copy Colour"] > span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .375rem; border: .0625rem solid var(--comty-border); border-radius: .1875rem; background: var(--comty-picked-color); vertical-align: -.0625rem; }
       .comty-property-copy-icon { position: relative; flex: 0 0 .75rem; width: .75rem; height: .75rem; color: var(--comty-muted); opacity: .65; }
-      .comty-property-row button:hover .comty-property-copy-icon, .comty-property-row button[data-copied] .comty-property-copy-icon { opacity: 1; }
+      .comty-property-row button:hover .comty-property-copy-icon, .comty-property-row button[data-copied] .comty-property-copy-icon, .comty-inspector-copy:hover .comty-property-copy-icon, .comty-inspector-copy[data-copied] .comty-property-copy-icon { opacity: 1; }
       .comty-property-copy-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 150ms var(--comty-ease-out), transform 150ms var(--comty-ease-out); }
-      .comty-property-copy-icon svg:last-child { opacity: 0; transform: scale(.5); }
-      .comty-property-row button[data-copied] svg:first-child { opacity: 0; transform: scale(.5); }
-      .comty-property-row button[data-copied] svg:last-child { opacity: 1; transform: scale(1); }
+      .comty-property-copy-icon svg:last-child { opacity: 0; transform: scale(.9); }
+      .comty-property-row button[data-copied] svg:first-child, .comty-inspector-copy[data-copied] svg:first-child { opacity: 0; transform: scale(.9); }
+      .comty-property-row button[data-copied] svg:last-child, .comty-inspector-copy[data-copied] svg:last-child { opacity: 1; transform: scale(1); }
       @media (prefers-reduced-motion: reduce) { .comty-property-copy-icon svg { transition: none; } }
       .comty-property-row button[disabled] { cursor: default; opacity: .5; }
       .comty-property-strip { display: flex; align-items: center; justify-content: center; gap: .375rem; }
@@ -1180,29 +1225,29 @@ function getComtyStyle() {
       .comty-inspect-gap { --comty-spacing-color: var(--comty-gap-fill); }
       .comty-inspect-spacing span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-inline: .2rem; border-radius: .2rem; background: var(--comty-spacing-color); color: var(--comty-foreground); font: 600 .625rem/1.3 ui-monospace, monospace; white-space: nowrap; }
       .comty-inspector {
-        position: fixed; width: 15rem; max-width: calc(100vw - 1rem);
-        padding-block: .5rem; border-radius: .5rem;
-        color: var(--comty-foreground); background: var(--comty-surface);
-        box-shadow: var(--comty-floating-shadow); font: .625rem/1.5 ui-sans-serif, system-ui, sans-serif;
+        position: fixed; width: var(--comty-inspector-width); max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem);
+        padding: .25rem; border-radius: .75rem; overflow-y: auto;
+        color: var(--comty-foreground); background: var(--comty-toolbar-group);
+        box-shadow: var(--comty-floating-shadow); font: var(--comty-property-font-size)/1.4 var(--comty-font);
         pointer-events: none; box-sizing: border-box;
       }
       .comty-inspector[data-selected] { pointer-events: auto; user-select: text; }
-      .comty-inspector-head, .comty-inspector-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-inline: .5rem; }
-      .comty-inspector-head { margin-bottom: .5rem; }
-      .comty-inspector-head button:last-child { flex-shrink: 0; }
-      .comty-inspector-head button:first-child { flex: 1; font-family: ui-monospace, monospace; font-weight: 500; text-align: left; }
-      .comty-inspector-row span { color: var(--comty-muted); flex-shrink: 0; }
-      .comty-inspector button { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; }
-      .comty-inspector button:hover { text-decoration: underline; }
+      .comty-inspector-head { display: flex; align-items: center; gap: .25rem; padding: 0 .125rem 0 .375rem; min-height: 1.75rem; }
+      .comty-inspector-selector { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--comty-muted); font-family: ui-monospace, monospace; }
+      .comty-inspector-details { padding: .25rem .25rem .25rem .5rem; border-radius: .5rem; background: var(--comty-toolbar-surface); }
+      .comty-inspector-row { display: grid; grid-template-columns: var(--comty-inspector-label-width) minmax(0, 1fr) var(--comty-copy-size); align-items: center; gap: .25rem; min-height: var(--comty-inspector-row-height); }
+      .comty-inspector-label, .comty-inspector-secondary { color: var(--comty-muted); }
+      .comty-inspector-label { overflow-wrap: anywhere; }
+      .comty-inspector button { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
       .comty-inspector button:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
-      .comty-inspector-value { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
-      .comty-inspector-value > button, .comty-inspector-tokens button { max-width: 100%; }
-      .comty-inspector-picker { display: inline-flex; align-items: center; gap: .25rem; }
-      .comty-inspector-swatch { display: inline-block; flex: 0 0 .625rem; width: .625rem; height: .625rem; border: .0625rem solid var(--comty-border); border-radius: .1875rem; }
-      .comty-inspector-tokens { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; }
-      .comty-inspector-tokens button { font-family: ui-monospace, monospace; color: var(--comty-muted); }
-      .comty-inspector-details { max-height: 50vh; overflow-y: auto; }
-      .comty-inspector .comty-inspector-expand { display: block; margin: .5rem auto 0; color: var(--comty-muted); }
+      .comty-inspector-value { display: flex; align-items: center; gap: .3125rem; min-width: 0; padding-block: .125rem; text-align: left; font-variant-numeric: tabular-nums; }
+      .comty-inspector button.comty-inspector-value { padding-block: .125rem; }
+      .comty-inspector-text { min-width: 0; overflow-wrap: anywhere; }
+      .comty-inspector-text:has(.comty-inspector-tokens) { display: flex; flex-wrap: wrap; gap: 0 .3125rem; }
+      .comty-inspector-swatch { display: inline-block; flex: 0 0 .6875rem; width: .6875rem; height: .6875rem; border-radius: .1875rem; }
+      .comty-inspector .comty-inspector-copy { display: grid; place-items: center; flex: 0 0 var(--comty-copy-size); width: var(--comty-copy-size); height: var(--comty-copy-size); border-radius: .375rem; }
+      @media (hover: hover) and (pointer: fine) { .comty-inspector-copy:hover { background: var(--comty-hover-surface); } }
+      @media (pointer: coarse) { .comty-inspector { --comty-copy-size: 2.75rem; } }
       .comty-measure-line { position: fixed; background: var(--comty-outline); pointer-events: none; }
       .comty-measure-tag { position: fixed; padding: .125rem .375rem; border-radius: .25rem; background: var(--comty-ink); color: var(--comty-paper); font: .625rem/1.4 ui-monospace, monospace; white-space: nowrap; pointer-events: none; }
 
@@ -1211,85 +1256,235 @@ function getComtyStyle() {
         z-index: 2147483647;
         background: var(--comty-surface);
         border: 0;
-        box-shadow: 0 4px 20px rgba(0,0,0,.1);
-        border-radius: 999px;
-        width: 320px;
-        font-family: sans-serif;
-        display: flex;
-        align-items: center;
-        padding: 4px 4px 4px 16px;
-        gap: 8px;
+        box-shadow: var(--comty-floating-shadow);
+        border-radius: 1.125rem;
+        width: min(16rem, calc(100vw - 1rem));
+        height: 2.25rem;
+        overflow: hidden;
+        font: .75rem/1.25rem var(--comty-font);
         box-sizing: border-box;
-        animation: comty-bubble-in 220ms cubic-bezier(.2,.8,.2,1) forwards;
+        animation: comty-bubble-in 200ms var(--comty-ease-out) forwards;
         transform-origin: top left;
+        transition: height var(--comty-motion-duration) var(--comty-ease-in-out), border-radius var(--comty-motion-duration) var(--comty-ease-in-out), box-shadow 160ms var(--comty-ease-out);
       }
 
-      .comty-create-bubble.comty-bubble-left {
-        animation-name: comty-bubble-in-left;
-        transform-origin: top right;
+      .comty-create-bubble.comty-create-expanded {
+        height: 5.75rem;
+        border-radius: .75rem;
       }
 
+      .comty-create-bubble.comty-create-has-attachment { height: 7.5rem; }
+      .comty-create-bubble.comty-bubble-left { transform-origin: top right; }
+
       .comty-create-textarea {
-        flex: 1;
-        height: 24px;
-        min-height: 24px;
-        max-height: 150px;
+        position: absolute;
+        top: .5rem;
+        left: .75rem;
+        width: calc(100% - 3.25rem);
+        height: 1.25rem;
         border: none;
         padding: 0;
-        font-family: inherit;
-        font-size: 14px;
-        line-height: 24px;
+        font: inherit;
         resize: none;
         box-sizing: border-box;
         outline: none;
         background: transparent;
-        overflow-y: auto;
+        overflow-y: hidden;
         color: var(--comty-foreground);
         scrollbar-width: thin;
-        scrollbar-color: gray transparent;
+        scrollbar-color: var(--comty-muted) transparent;
+        transition: width var(--comty-motion-duration) var(--comty-ease-in-out), height var(--comty-motion-duration) var(--comty-ease-in-out);
+      }
+
+      .comty-create-expanded .comty-create-textarea {
+        width: calc(100% - 1.5rem);
+        height: 2.5rem;
+        overflow-y: auto;
+      }
+
+      .comty-create-attachment {
+        position: absolute;
+        top: 3.25rem;
+        left: .75rem;
+        right: .75rem;
+        display: none;
+        min-width: 0;
       }
 
-      .comty-create-textarea::placeholder {
+      .comty-create-has-attachment .comty-create-attachment { display: flex; }
+      .comty-create-attachment-chip {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+        max-width: 100%;
+        padding: .125rem .125rem .125rem 0;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+      }
+      .comty-create-attachment .comty-comment-link { flex: 0 1 auto; padding: 0 .5rem; line-height: 1.25rem; background: transparent; }
+      .comty-create-attachment button {
+        flex: 0 0 auto;
+        width: 1.25rem;
+        height: 1.25rem;
+        padding: 0;
+        border: 0;
+        border-radius: .25rem;
+        background: transparent;
         color: var(--comty-muted);
+        cursor: pointer;
       }
 
+      .comty-create-textarea::placeholder { color: var(--comty-muted); }
+
       .comty-create-actions {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
         display: flex;
         align-items: center;
+        justify-content: space-between;
+        height: 2.25rem;
+        padding: .375rem .375rem .375rem .5rem;
+        box-sizing: border-box;
+        pointer-events: none;
+      }
+      .comty-create-actions::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: .0625rem;
+        background: var(--comty-border);
+        opacity: 0;
+        transition: opacity 110ms var(--comty-ease-out);
+      }
+      .comty-create-expanded .comty-create-actions::before { opacity: 1; transition-delay: 110ms; }
+      .comty-create-actions > button { pointer-events: auto; }
+
+      .comty-create-link-button {
+        display: grid;
+        place-items: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0;
+        border: 0;
+        border-radius: .375rem;
+        background: transparent;
+        color: var(--comty-muted);
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(.25rem);
+        transition: opacity 110ms var(--comty-ease-out), transform 110ms var(--comty-ease-out), visibility 0s linear 110ms;
+      }
+      .comty-create-expanded .comty-create-link-button {
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        transition-delay: 110ms, 110ms, 0s;
+      }
+      .comty-create-link-button svg { width: .75rem; height: .75rem; }
+
+      @media (hover: hover) and (pointer: fine) {
+        .comty-create-link-button:hover,
+        .comty-create-link-editor button:hover,
+        .comty-create-attachment button:hover {
+          background: var(--comty-hover-surface);
+          color: var(--comty-foreground);
+        }
+      }
+      .comty-create-link-button:focus-visible,
+      .comty-create-link-editor button:focus-visible,
+      .comty-create-attachment button:focus-visible,
+      .comty-btn-submit:focus-visible {
+        outline: .0625rem solid var(--comty-comment-focus);
+        outline-offset: .0625rem;
+      }
+
+      .comty-create-link-editor {
+        position: absolute;
+        inset: .375rem;
+        display: flex;
+        align-items: center;
+        gap: .375rem;
+        background: var(--comty-surface);
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(.25rem);
+        pointer-events: none;
+        transition: opacity 160ms var(--comty-ease-out), transform 160ms var(--comty-ease-out), visibility 0s linear 160ms;
+      }
+      .comty-create-link-open .comty-create-link-editor {
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        pointer-events: auto;
+        transition-delay: 0s;
+      }
+      .comty-create-link-field { position: relative; flex: 1; min-width: 0; }
+      .comty-create-link-editor input {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        height: 1.5rem;
+        padding: 0 1.75rem 0 .5rem;
+        border: 0;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
+        font: inherit;
+        outline: none;
+      }
+      .comty-create-link-editor input:focus-visible { background: var(--comty-hover-surface); }
+      .comty-create-link-editor input[aria-invalid="true"] { box-shadow: inset 0 0 0 .0625rem var(--comty-error); }
+      .comty-create-link-editor button {
         flex: 0 0 auto;
+        height: 1.5rem;
+        padding: 0 .5rem;
+        border: 0;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
+        font: inherit;
+        cursor: pointer;
       }
+      .comty-create-link-field button {
+        position: absolute;
+        top: .125rem;
+        right: .125rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        padding: 0;
+        background: transparent;
+      }
+      .comty-create-link-open .comty-create-link-button,
+      .comty-create-link-open .comty-btn-submit { opacity: 0; visibility: hidden; pointer-events: none; }
 
       .comty-btn-submit {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 32px;
-        height: 32px;
+        width: 1.5rem;
+        height: 1.5rem;
         padding: 0;
         border-radius: 50%;
         background: var(--comty-border);
-        color: white;
+        color: var(--comty-muted);
         border: none;
         cursor: pointer;
-        transition: background 150ms ease, opacity 150ms ease;
+        transition: background-color 160ms var(--comty-ease-out), color 160ms var(--comty-ease-out), opacity 160ms var(--comty-ease-out);
       }
+      .comty-btn-submit svg { width: .875rem; height: .875rem; }
+      .comty-btn-submit.comty-btn-active { background: var(--comty-foreground); color: var(--comty-surface); }
+      .comty-btn-submit:disabled { opacity: .6; cursor: not-allowed; }
 
-      .comty-btn-submit svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .comty-btn-submit.comty-btn-active {
-        background: #0078FF;
-      }
-
-      .comty-btn-submit.comty-btn-active:hover {
-        background: #0062d1;
-      }
-
-      .comty-btn-submit:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
+      @media (prefers-reduced-motion: reduce) {
+        .comty-create-bubble, .comty-create-actions::before, .comty-create-textarea, .comty-create-link-button, .comty-create-link-editor, .comty-reply-field, .comty-reply-input {
+          transition-duration: 0ms;
+          transition-delay: 0ms;
+        }
+        .comty-create-bubble { animation: none; }
       }
     `;
 }
@@ -1642,516 +1837,421 @@ function createAnchorMatcher({
         .filter((candidate) => !isComtyNode(candidate));
       const top = stack[0];
       if (!top) return null;
-      if (top === el || el.contains(top) || top.contains(el)) return null;
-      return top;
-    }
-
-    function getVisibleAnchorPoint(el, relX, relY, activeModal) {
-      if (!el || !Number.isFinite(relX) || !Number.isFinite(relY) || isElementTreeHidden(el)) return null;
-
-      const rect = el.getBoundingClientRect();
-      if (rect.width < 0.1 || rect.height < 0.1) {
-        return null;
-      }
-
-      const clientX = Math.min(
-        Math.max(rect.left + relX * rect.width, rect.left + 0.01),
-        rect.right - 0.01,
-      );
-      const clientY = Math.min(
-        Math.max(rect.top + relY * rect.height, rect.top + 0.01),
-        rect.bottom - 0.01,
-      );
-      const viewport = getViewportBounds();
-      if (!pointIsInsideRect(clientX, clientY, viewport)) {
-        return null;
-      }
-
-      if (isPointClipped(el, clientX, clientY)) return null;
-
-      if (activeModal && !activeModal.contains(el)) {
-        return null;
-      }
-
-      if (getOccludingElement(el, clientX, clientY)) return null;
-
-      return { clientX, clientY };
-    }
-
-    return { matchesAnchorContext, resolveByAnchorContext, isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint };
-}
-
-function createScreenshotCapture() {
-    function nextAnimationFrame() {
-      return new Promise((resolve) => {
-        requestAnimationFrame(() => resolve());
-      });
-    }
-
-    async function waitForPaint() {
-      await nextAnimationFrame();
-      await nextAnimationFrame();
-    }
-
-    async function waitForCustomElements(el, timeout = 1600) {
-      if (
-        !(el instanceof Element) ||
-        !window.customElements ||
-        typeof window.customElements.whenDefined !== "function"
-      ) {
-        return;
-      }
-
-      const names = new Set();
-      let current = el;
-      while (current && current instanceof Element) {
-        const tagName = current.tagName.toLowerCase();
-        if (tagName.includes("-")) {
-          names.add(tagName);
-        }
-        current = current.parentElement;
-      }
-
-      if (names.size === 0) return;
-
-      const definitions = [...names].map((name) =>
-        window.customElements.whenDefined(name).catch(() => undefined),
-      );
-      await Promise.race([
-        Promise.all(definitions),
-        new Promise((resolve) => setTimeout(resolve, timeout)),
-      ]);
-    }
-
-    function syncFormValues(sourceRoot, cloneRoot) {
-      const sourceFields = sourceRoot.querySelectorAll(
-        "input, textarea, select",
-      );
-      const clonedFields = cloneRoot.querySelectorAll(
-        "input, textarea, select",
-      );
-
-      sourceFields.forEach((sourceField, index) => {
-        const clonedField = clonedFields[index];
-        if (!clonedField) return;
-
-        if (sourceField instanceof HTMLTextAreaElement) {
-          clonedField.textContent = sourceField.value;
-          clonedField.setAttribute("value", sourceField.value);
-          return;
-        }
-
-        if (sourceField instanceof HTMLInputElement) {
-          clonedField.setAttribute("value", sourceField.value);
-          if (sourceField.checked) {
-            clonedField.setAttribute("checked", "");
-          } else {
-            clonedField.removeAttribute("checked");
-          }
-          return;
-        }
-
-        if (sourceField instanceof HTMLSelectElement) {
-          Array.from(sourceField.options).forEach((option, optionIndex) => {
-            const clonedOption = clonedField.options[optionIndex];
-            if (!clonedOption) return;
-            if (option.selected) {
-              clonedOption.setAttribute("selected", "");
-            } else {
-              clonedOption.removeAttribute("selected");
-            }
-          });
-        }
-      });
-    }
-
-    function toAbsoluteUrl(value) {
-      if (!value || value.startsWith("data:") || value.startsWith("blob:")) {
-        return value;
-      }
-
-      try {
-        return new URL(value, window.location.href).toString();
-      } catch {
-        return value;
-      }
-    }
-
-    function isExportSafeUrl(value) {
-      if (!value || value.startsWith("data:")) return true;
-
-      try {
-        const url = new URL(value, window.location.href);
-        return url.origin === window.location.origin;
-      } catch {
-        return false;
-      }
-    }
-
-    function blobToDataUrl(blob) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-      });
-    }
-
-    async function urlToDataUrl(value) {
-      const absoluteUrl = toAbsoluteUrl(value);
-      if (!absoluteUrl || absoluteUrl.startsWith("data:")) return absoluteUrl;
-      if (absoluteUrl.startsWith("blob:")) return "";
-
-      try {
-        const response = await fetch(absoluteUrl, {
-          credentials: isExportSafeUrl(absoluteUrl) ? "same-origin" : "omit",
-          mode: "cors",
-        });
-        if (!response.ok) return "";
-        return await blobToDataUrl(await response.blob());
-      } catch {
-        return "";
-      }
-    }
-
-    async function inlineImageResources(clone) {
-      const images = Array.from(clone.querySelectorAll("img"));
-      await Promise.all(
-        images.map(async (image) => {
-          const dataUrl = await urlToDataUrl(image.getAttribute("src") ?? "");
-          if (!dataUrl) {
-            image.removeAttribute("src");
-            image.removeAttribute("srcset");
-            image.style.visibility = "hidden";
-            return;
-          }
-          image.setAttribute("src", dataUrl);
-          image.removeAttribute("srcset");
-        }),
-      );
-
-      clone.querySelectorAll("source").forEach((source) => {
-        source.removeAttribute("src");
-        source.removeAttribute("srcset");
-      });
-    }
-
-    function convertViewportUnits(value, viewportWidth, viewportHeight) {
-      return value.replace(
-        /(-?\d*\.?\d+)(dvh|svh|lvh|vh|dvw|svw|lvw|vw|vmin|vmax)\b/gi,
-        (_, amount, unit) => {
-          const number = Number(amount);
-          if (!Number.isFinite(number)) return `${amount}${unit}`;
-          const normalizedUnit = String(unit).toLowerCase();
-          const base =
-            normalizedUnit === "vw" ||
-            normalizedUnit === "dvw" ||
-            normalizedUnit === "svw" ||
-            normalizedUnit === "lvw"
-              ? viewportWidth
-              : normalizedUnit === "vmin"
-                ? Math.min(viewportWidth, viewportHeight)
-                : normalizedUnit === "vmax"
-                  ? Math.max(viewportWidth, viewportHeight)
-                  : viewportHeight;
-          return `${(number / 100) * base}px`;
-        },
-      );
-    }
-
-    function sanitizeCssForExport(css, viewportWidth, viewportHeight) {
-      return convertViewportUnits(css, viewportWidth, viewportHeight)
-        .replace(/@font-face\s*{[^}]*}/gi, "")
-        .replace(/url\((?!['"]?data:)[^)]+\)/gi, "none");
-    }
-
-    function sanitizeInlineStyles(clone, viewportWidth, viewportHeight) {
-      clone.querySelectorAll("[style]").forEach((node) => {
-        node.setAttribute(
-          "style",
-          sanitizeCssForExport(
-            node.getAttribute("style") ?? "",
-            viewportWidth,
-            viewportHeight,
-          ),
-        );
-      });
-    }
-
-    function removeCaptureLockStyles(clone) {
-      clone.querySelectorAll("[style]").forEach((node) => {
-        const style = node.getAttribute("style") ?? "";
-        const hasCaptureLock =
-          /max-width:\s*none/i.test(style) &&
-          /max-height:\s*none/i.test(style) &&
-          /transform:\s*none/i.test(style) &&
-          /margin:\s*0px/i.test(style);
-
-        if (!hasCaptureLock) return;
-
-        node.style.removeProperty("width");
-        node.style.removeProperty("height");
-        node.style.removeProperty("max-width");
-        node.style.removeProperty("max-height");
-        node.style.removeProperty("margin");
-        node.style.removeProperty("transform");
-        node.style.removeProperty("inset");
-      });
-    }
-
-    function removeExportUnsafeNodes(clone) {
-      clone
-        .querySelectorAll("iframe, canvas, video, audio, object, embed")
-        .forEach((node) => node.remove());
-      clone
-        .querySelectorAll("link[rel~='stylesheet'], link[rel~='preload']")
-        .forEach((node) => node.remove());
-      clone
-        .querySelectorAll(
-          "#comty-root, .comty-sidepanel, .comty-pin:not([data-comty-capture-keep]), .comty-bubble:not([data-comty-capture-keep]), .comty-create-bubble:not([data-comty-capture-keep]), .comty-popover",
-        )
-        .forEach((node) => node.remove());
-    }
-
-    function makeCloneUrlsAbsolute(clone) {
-      clone.querySelectorAll("[src]").forEach((node) => {
-        node.setAttribute("src", toAbsoluteUrl(node.getAttribute("src")));
-      });
-      clone.querySelectorAll("[href]").forEach((node) => {
-        node.setAttribute("href", toAbsoluteUrl(node.getAttribute("href")));
-      });
-      clone.querySelectorAll("[srcset]").forEach((node) => {
-        const srcset = node
-          .getAttribute("srcset")
-          .split(",")
-          .map((entry) => {
-            const parts = entry.trim().split(/\s+/);
-            if (!parts[0]) return "";
-            parts[0] = toAbsoluteUrl(parts[0]);
-            return parts.join(" ");
-          })
-          .filter(Boolean)
-          .join(", ");
-        node.setAttribute("srcset", srcset);
-      });
+      if (top === el || el.contains(top) || top.contains(el)) return null;
+      return top;
     }
 
-    function inlineAccessibleStyles(clone, viewportWidth, viewportHeight) {
-      const style = clone.ownerDocument.createElement("style");
-      let css = "";
+    function getVisibleAnchorPoint(el, relX, relY, activeModal) {
+      if (!el || !Number.isFinite(relX) || !Number.isFinite(relY) || isElementTreeHidden(el)) return null;
 
-      Array.from(document.styleSheets).forEach((styleSheet) => {
-        try {
-          css += Array.from(styleSheet.cssRules)
-            .map((rule) => rule.cssText)
-            .join("\n");
-        } catch {
-          // Cross-origin stylesheets cannot be exported safely into canvas.
-        }
-      });
+      const rect = el.getBoundingClientRect();
+      if (rect.width < 0.1 || rect.height < 0.1) {
+        return null;
+      }
 
-      if (!css) return;
-      style.textContent = sanitizeCssForExport(
-        css,
-        viewportWidth,
-        viewportHeight,
+      const clientX = Math.min(
+        Math.max(rect.left + relX * rect.width, rect.left + 0.01),
+        rect.right - 0.01,
       );
-      clone.querySelector("head")?.appendChild(style);
-    }
-
-    function markCaptureElements(root, attributeName) {
-      return [root, ...Array.from(root.querySelectorAll("*"))].map(
-        (element, index) => {
-          const previousValue = element.getAttribute(attributeName);
-          element.setAttribute(attributeName, String(index));
-          return { element, index, previousValue };
-        },
+      const clientY = Math.min(
+        Math.max(rect.top + relY * rect.height, rect.top + 0.01),
+        rect.bottom - 0.01,
       );
-    }
+      const viewport = getViewportBounds();
+      if (!pointIsInsideRect(clientX, clientY, viewport)) {
+        return null;
+      }
 
-    function restoreCaptureElementMarks(markedElements, attributeName) {
-      markedElements.forEach(({ element, previousValue }) => {
-        if (previousValue === null) {
-          element.removeAttribute(attributeName);
-          return;
-        }
-        element.setAttribute(attributeName, previousValue);
-      });
-    }
+      if (isPointClipped(el, clientX, clientY)) return null;
 
-    function removeCaptureElementMarks(clone, attributeName) {
-      clone.removeAttribute(attributeName);
-      clone
-        .querySelectorAll(`[${attributeName}]`)
-        .forEach((element) => element.removeAttribute(attributeName));
-    }
+      if (activeModal && !activeModal.contains(el)) {
+        return null;
+      }
 
-    function pinFixedElementsToViewport(
-      clone,
-      markedElements,
-      attributeName,
-      scrollX,
-      scrollY,
-      viewportWidth,
-      viewportHeight,
-    ) {
-      markedElements.forEach(({ element, index }) => {
-        if (window.getComputedStyle(element).position !== "fixed") return;
+      if (getOccludingElement(el, clientX, clientY)) return null;
 
-        const clonedElement = clone.querySelector(
-          `[${attributeName}="${index}"]`,
-        );
-        if (!(clonedElement instanceof HTMLElement)) return;
-
-        const rect = element.getBoundingClientRect();
-        clonedElement.style.position = "absolute";
-        clonedElement.style.left = `${rect.left + scrollX}px`;
-        clonedElement.style.top = `${rect.top + scrollY}px`;
-        clonedElement.style.right = "auto";
-        clonedElement.style.bottom = "auto";
-        clonedElement.style.boxSizing = "border-box";
-        clonedElement.style.width = `${rect.width || viewportWidth}px`;
-        clonedElement.style.height = `${rect.height || viewportHeight}px`;
-        clonedElement.style.transform = "none";
-      });
+      return { clientX, clientY };
     }
 
-    function syncScrollableElementOffsets(
-      clone,
-      markedElements,
-      attributeName,
-    ) {
-      markedElements.forEach(({ element, index }) => {
-        if (element === document.documentElement || element === document.body) {
-          return;
-        }
-
-        const scrollLeft = element.scrollLeft;
-        const scrollTop = element.scrollTop;
-        if (!scrollLeft && !scrollTop) return;
-
-        const clonedElement = clone.querySelector(
-          `[${attributeName}="${index}"]`,
-        );
-        if (!(clonedElement instanceof HTMLElement)) return;
-
-        const children = Array.from(clonedElement.childNodes);
-        if (!children.length) return;
-
-        const scrollWrapper = clone.ownerDocument.createElement("div");
-        const computedStyle = window.getComputedStyle(element);
-        scrollWrapper.style.transform = `translate(${-scrollLeft}px, ${-scrollTop}px)`;
-        scrollWrapper.style.transformOrigin = "top left";
-        scrollWrapper.style.width = `${Math.max(
-          element.scrollWidth,
-          element.clientWidth,
-        )}px`;
-        scrollWrapper.style.minHeight = `${Math.max(
-          element.scrollHeight,
-          element.clientHeight,
-        )}px`;
+    return { matchesAnchorContext, resolveByAnchorContext, isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint };
+}
 
-        if (computedStyle.display.includes("flex")) {
-          scrollWrapper.style.display = computedStyle.display;
-          scrollWrapper.style.flexDirection = computedStyle.flexDirection;
-          scrollWrapper.style.flexWrap = computedStyle.flexWrap;
-          scrollWrapper.style.alignItems = computedStyle.alignItems;
-          scrollWrapper.style.justifyContent = computedStyle.justifyContent;
-          scrollWrapper.style.gap = computedStyle.gap;
-        } else if (computedStyle.display.includes("grid")) {
-          scrollWrapper.style.display = computedStyle.display;
-          scrollWrapper.style.gridTemplateColumns =
-            computedStyle.gridTemplateColumns;
-          scrollWrapper.style.gridTemplateRows = computedStyle.gridTemplateRows;
-          scrollWrapper.style.gap = computedStyle.gap;
+const captureEngine = (() => { // Generated from html-to-image 1.11.13 by scripts/capture-engine.mjs.
+/*
+MIT License
+
+Copyright (c) 2017-2025 W.Y.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+function S(t,e){if(t.match(/^[a-z]+:\/\//i))return t;if(t.match(/^\/\//))return window.location.protocol+t;if(t.match(/^[a-z]+:/i))return t;let r=document.implementation.createHTMLDocument(),n=r.createElement("base"),i=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(i),e&&(n.href=e),i.href=t,i.href}var P=(()=>{let t=0,e=()=>`0000${(Math.random()*36**4<<0).toString(36)}`.slice(-4);return()=>(t+=1,`u${e()}${t}`)})();function u(t){let e=[];for(let r=0,n=t.length;r<n;r++)e.push(t[r]);return e}var f=null;function y(t={}){return f||(t.includeStyleProperties?(f=t.includeStyleProperties,f):(f=u(window.getComputedStyle(document.documentElement)),f))}function w(t){return new Promise((e,r)=>{let n=new Image;n.onload=()=>{n.decode().then(()=>{requestAnimationFrame(()=>e(n))})},n.onerror=r,n.crossOrigin="anonymous",n.decoding="async",n.src=t})}async function I(t){return Promise.resolve().then(()=>new XMLSerializer().serializeToString(t)).then(encodeURIComponent).then(e=>`data:image/svg+xml;charset=utf-8,${e}`)}async function U(t,e,r){let n="http://www.w3.org/2000/svg",i=document.createElementNS(n,"svg"),o=document.createElementNS(n,"foreignObject");return i.setAttribute("width",`${e}`),i.setAttribute("height",`${r}`),i.setAttribute("viewBox",`0 0 ${e} ${r}`),o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("x","0"),o.setAttribute("y","0"),o.setAttribute("externalResourcesRequired","true"),i.appendChild(o),o.appendChild(t),I(i)}var l=(t,e)=>{if(t instanceof e)return!0;let r=Object.getPrototypeOf(t);return r===null?!1:r.constructor.name===e.name||l(r,e)};function V(t){let e=t.getPropertyValue("content");return`${t.cssText} content: '${e.replace(/'|"/g,"")}';`}function M(t,e){return y(e).map(r=>{let n=t.getPropertyValue(r),i=t.getPropertyPriority(r);return`${r}: ${n}${i?" !important":""};`}).join(" ")}function F(t,e,r,n){let i=`.${t}:${e}`,o=r.cssText?V(r):M(r,n);return document.createTextNode(`${i}{${o}}`)}function R(t,e,r,n){let i=window.getComputedStyle(t,r),o=i.getPropertyValue("content");if(o===""||o==="none")return;let a=P();try{e.className=`${e.className} ${a}`}catch{return}let c=document.createElement("style");c.appendChild(F(a,r,i,n)),e.appendChild(c)}function C(t,e,r){R(t,e,":before",r),R(t,e,":after",r)}var T="application/font-woff",$="image/jpeg",H={woff:T,woff2:T,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:$,jpeg:$,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function O(t){let e=/\.([^./]*?)$/g.exec(t);return e?e[1]:""}function m(t){let e=O(t).toLowerCase();return H[e]||""}function k(t){return t.split(/,/)[1]}function p(t){return t.search(/^(data:)/)!==-1}function x(t,e){return`data:${e};base64,${t}`}async function q(t,e,r){let n=await(e?.captureFetch||fetch)(t,e);if(!n.ok)throw new Error(`Resource "${n.url}" not found`);let i=await n.blob();return new Promise((o,a)=>{let c=new FileReader;c.onerror=a,c.onloadend=()=>{try{o(r({res:n,result:c.result}))}catch(s){a(s)}},c.readAsDataURL(i)})}async function h(t,e,r){let n=r.resourceCache||{},i=t;if(n[i]!=null)return n[i];r.cacheBust&&(t+=(/\?/.test(t)?"&":"?")+new Date().getTime());let o;try{let a=await q(t,r.fetchRequestInit,({res:c,result:s})=>(e||(e=c.headers.get("Content-Type")||""),k(s)));o=x(a,e)}catch(a){o=r.imagePlaceholder||"";let c=`Failed to fetch resource: ${t}`;a&&(c=typeof a=="string"?a:a.message),c&&console.warn(c)}return n[i]=o,o}async function _(t){let e=t.toDataURL();return e==="data:,"?t.cloneNode(!1):w(e)}async function v(t,e){if(t.currentSrc){let o=document.createElement("canvas"),a=o.getContext("2d");o.width=t.clientWidth,o.height=t.clientHeight,a?.drawImage(t,0,0,o.width,o.height);let c=o.toDataURL();return w(c)}let r=t.poster,n=m(r),i=await h(r,n,e);return w(i)}async function B(t,e){var r;try{if(!((r=t?.contentDocument)===null||r===void 0)&&r.body)return await b(t.contentDocument.body,e,!0)}catch{}return t.cloneNode(!1)}async function G(t,e){return l(t,HTMLCanvasElement)?_(t).catch(()=>t.cloneNode(!1)):l(t,HTMLVideoElement)?v(t,e).catch(()=>document.createElement("div")):l(t,HTMLIFrameElement)?B(t,e):t.cloneNode(!1)}var j=t=>t.tagName!=null&&t.tagName.toUpperCase()==="SLOT";async function z(t,e,r){var n,i;let o=[];return j(t)&&t.assignedNodes?o=u(t.assignedNodes()):l(t,HTMLIFrameElement)&&(!((n=t.contentDocument)===null||n===void 0)&&n.body)?o=u(t.contentDocument.body.childNodes):o=u(((i=t.shadowRoot)!==null&&i!==void 0?i:t).childNodes),o.length===0||l(t,HTMLVideoElement)||await o.reduce((a,c)=>a.then(()=>b(c,r)).then(s=>{s&&e.appendChild(s)}),Promise.resolve()),e}function W(t,e,r){let n=e.style;if(!n)return;let i=window.getComputedStyle(t);i.cssText?(n.cssText=i.cssText,n.transformOrigin=i.transformOrigin):y(r).forEach(o=>{let a=i.getPropertyValue(o);o==="font-size"&&a.endsWith("px")&&(a=`${parseFloat(a.substring(0,a.length-2))}px`),l(t,HTMLIFrameElement)&&o==="display"&&a==="inline"&&(a="block"),o==="d"&&e.getAttribute("d")&&(a=`path(${e.getAttribute("d")})`),n.setProperty(o,a,i.getPropertyPriority(o))})}function X(t,e){l(t,HTMLTextAreaElement)&&(e.textContent=t.value),l(t,HTMLInputElement)&&e.setAttribute("value",t.value)}function K(t,e){if(l(t,HTMLSelectElement)){let n=Array.from(e.children).find(i=>t.value===i.getAttribute("value"));n&&n.setAttribute("selected","")}}function J(t,e,r){return l(e,Element)&&(W(t,e,r),C(t,e,r),X(t,e),K(t,e)),e}async function Q(t,e){let r=t.querySelectorAll?t.querySelectorAll("use"):[];if(r.length===0)return t;let n={};for(let o=0;o<r.length;o++){let a=r[o],c=a.getAttribute("href")||a.getAttribute("xlink:href");if(c){let s=t.querySelector(c),d=document.querySelector(c);!s&&d&&!n[c]&&(n[c]=await b(d,e,!0))}}let i=Object.values(n);if(i.length){let o="http://www.w3.org/1999/xhtml",a=document.createElementNS(o,"svg");a.setAttribute("xmlns",o),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.display="none";let c=document.createElementNS(o,"defs");a.appendChild(c);for(let s=0;s<i.length;s++)c.appendChild(i[s]);t.appendChild(a)}return t}async function b(t,e,r){if(await e.beforeClone?.(t),!r&&e.filter&&!e.filter(t))return null;let n=e.placeholder?.(t);return n||Promise.resolve(t).then(i=>G(i,e)).then(i=>z(t,i,e)).then(async i=>(await e.beforeClone?.(t),J(t,i,e))).then(i=>e.afterClone?.(t,i)??i).then(i=>Q(i,e))}var A=/url\((['"]?)([^'"]+?)\1\)/g,L=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,Y=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function Z(t){let e=t.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp(`(url\\(['"]?)(${e})(['"]?\\))`,"g")}function N(t){let e=[];return t.replace(A,(r,n,i)=>(e.push(i),r)),e.filter(r=>!p(r)&&!r.startsWith("#"))}async function tt(t,e,r,n,i){try{let o=r?S(e,r):e,a=m(e),c;if(i){let s=await i(o);c=x(s,a)}else c=await h(o,a,n);return t.replace(Z(e),`$1${c}$3`)}catch{}return t}function et(t,{preferredFontFormat:e}){return e?t.replace(Y,r=>{for(L.lastIndex=0;;){let[n,,i]=L.exec(r)||[];if(!i)return"";if(i===e)return`src: ${n};`}}):t}function rt(t){return t.search(A)!==-1}async function E(t,e,r){if(!rt(t))return t;let n=et(t,r);return N(n).reduce((o,a)=>o.then(c=>tt(c,a,e,r)),Promise.resolve(n))}async function g(t,e,r){var n;let i=(n=e.style)===null||n===void 0?void 0:n.getPropertyValue(t);if(i){let o=await E(i,null,r);return e.style.setProperty(t,o,e.style.getPropertyPriority(t)),!0}return!1}async function nt(t,e){await g("background",t,e)||await g("background-image",t,e),await g("mask",t,e)||await g("-webkit-mask",t,e)||await g("mask-image",t,e)||await g("-webkit-mask-image",t,e)}async function it(t,e){let r=l(t,HTMLImageElement);if(!(r&&!p(t.src))&&!(l(t,SVGImageElement)&&!p(t.href.baseVal)))return;let n=r?t.src:t.href.baseVal,i=await h(n,m(n),e);await new Promise((o,a)=>{t.onload=o,t.onerror=e.onImageErrorHandler?(...s)=>{try{o(e.onImageErrorHandler(...s))}catch(d){a(d)}}:a;let c=t;c.decode&&(c.decode=o),c.loading==="lazy"&&(c.loading="eager"),r?(t.srcset="",t.src=i):t.href.baseVal=i})}async function ot(t,e){let n=u(t.childNodes).map(i=>D(i,e));await Promise.all(n).then(()=>t)}async function D(t,e){await e.beforeClone?.(t),l(t,Element)&&(await nt(t,e),await it(t,e),await ot(t,e))} return {cloneNode:b,embedImages:D,embedResources:E,nodeToDataURL:U}; })();
+// Fetches belong to one capture. Never forward SDK credentials to a resource host.
+function createCaptureResources({ apiUrl, projectKey, getHeaders, signal }) {
+  const cache = new Map();
+  const waiting = [];
+  let active = 0;
+  let totalBytes = 0;
+  async function fetchResource(value) {
+    const url = new URL(value, document.baseURI);
+    if (!["http:", "https:", "blob:", "data:"].includes(url.protocol)) throw new Error("Unsupported capture resource");
+    if (cache.has(url.href)) return (await cache.get(url.href)).clone();
+    if (cache.size >= 128) throw new Error("Too many capture resources");
+    const pending = (async () => {
+      if (active >= 4) await new Promise(resolve => waiting.push(resolve));
+      active++;
+      try {
+        signal.throwIfAborted();
+        let response;
+        try {
+          response = await fetch(url, { signal: AbortSignal.any([signal, AbortSignal.timeout(3500)]), credentials: url.origin === location.origin ? "same-origin" : "omit" });
+          if (!response.ok) throw new Error("Resource unavailable");
+        } catch (error) {
+          if (signal.aborted || !apiUrl || !["http:", "https:"].includes(url.protocol) || url.origin === location.origin) throw error;
+          const proxy = new URL(`${apiUrl}/api/sdk/capture-resource`);
+          proxy.searchParams.set("projectKey", projectKey);
+          proxy.searchParams.set("url", url.href);
+          response = await fetch(proxy, { signal, headers: getHeaders(), credentials: "omit" });
+          if (!response.ok) throw new Error("Capture proxy unavailable");
         }
+        const reader = response.body.getReader();
+        const chunks = [];
+        let size = 0;
+        try {
+          for (;;) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            size += value.byteLength;
+            totalBytes += value.byteLength;
+            if (size > 5 * 1024 * 1024 || totalBytes > 24 * 1024 * 1024) throw new Error("Capture resources too large");
+            chunks.push(value);
+          }
+        } finally { await reader.cancel().catch(() => {}); }
+        const blob = new Blob(chunks, { type: response.headers.get("Content-Type") || "application/octet-stream" });
+        return new Response(blob, { headers: { "Content-Type": blob.type } });
+      } finally {
+        active--;
+        waiting.shift()?.();
+      }
+    })();
+    cache.set(url.href, pending);
+    return (await pending).clone();
+  }
+  return fetchResource;
+}
 
-        children.forEach((child) => scrollWrapper.appendChild(child));
-        clonedElement.appendChild(scrollWrapper);
-      });
+// Read font rules without inserting remote CSS into the user's live stylesheets.
+async function captureFontCSS(sheets, families, fetchResource, embedResources, options) {
+  const visited = new Set();
+  const fonts = [];
+  const normalize = value => value.trim().replace(/^['"]|['"]$/g, "").toLowerCase();
+  async function readRules(rules, base) {
+    for (const rule of rules) {
+      if (rule.type === CSSRule.FONT_FACE_RULE && families.has(normalize(rule.style.getPropertyValue("font-family")))) {
+        const woff2 = /format\(["']?woff2["']?\)/i.test(rule.style.getPropertyValue("src"));
+        fonts.push(embedResources(rule.cssText, base, woff2 ? { ...options, preferredFontFormat: "woff2" } : options));
+      } else if (rule.type === CSSRule.IMPORT_RULE) {
+        await readSheet(rule.styleSheet, new URL(rule.href, base).href);
+      } else if (rule.cssRules) await readRules(rule.cssRules, base);
     }
+  }
+  async function readSheet(sheet, url = sheet?.href) {
+    const key = url || sheet;
+    if (!key || visited.has(key)) return;
+    visited.add(key);
+    try {
+      let rules;
+      try { rules = sheet.cssRules; } catch { /* Remote CSS requires CORS or the resource proxy. */ }
+      if (rules) return await readRules(rules, url || document.baseURI);
+      if (!url) return;
+      const css = await (await fetchResource(url)).text();
+      // Constructed sheets parse nested font rules but intentionally discard @import.
+      // Resolve imports separately, relative to the stylesheet rather than the page.
+      const imports = [...css.replace(/\/\*[\s\S]*?\*\//g, "").matchAll(/@import\s+(?:url\(\s*(?:"([^"]+)"|'([^']+)'|([^\s)]+))\s*\)|"([^"]+)"|'([^']+)')/gi)];
+      await Promise.all(imports.map(match => readSheet(null, new URL(match.slice(1).find(Boolean), url).href)));
+      const parsed = new CSSStyleSheet();
+      parsed.replaceSync(css);
+      await readRules(parsed.cssRules, url);
+    } catch (error) {
+      if (options.signal.aborted) throw error;
+      console.warn("Comty: a capture font stylesheet was unavailable", url);
+    }
+  }
+  await Promise.all([...sheets].map(sheet => readSheet(sheet)));
+  return (await Promise.all(fonts)).join("\n");
+}
 
-    async function captureViewportScreenshot() {
-      await waitForPaint();
 
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-      const captureWidth = Math.max(width + scrollX, width);
-      const documentHeight = Math.max(
-        document.documentElement.scrollHeight,
-        document.body?.scrollHeight ?? 0,
-        height,
-      );
-      const captureIdAttribute = "data-comty-capture-id";
-      const markedElements = markCaptureElements(
-        document.documentElement,
-        captureIdAttribute,
-      );
-      let clone;
+function captureContext() {
+  return { url: location.href, width: innerWidth, height: innerHeight, scrollX, scrollY };
+}
 
-      try {
-        clone = document.documentElement.cloneNode(true);
-        pinFixedElementsToViewport(
-          clone,
-          markedElements,
-          captureIdAttribute,
-          scrollX,
-          scrollY,
-          width,
-          height,
-        );
-        syncScrollableElementOffsets(clone, markedElements, captureIdAttribute);
-      } finally {
-        restoreCaptureElementMarks(markedElements, captureIdAttribute);
-      }
-
-      clone.querySelectorAll("script").forEach((node) => node.remove());
-      syncFormValues(document, clone);
-      makeCloneUrlsAbsolute(clone);
-      await inlineImageResources(clone);
-      inlineAccessibleStyles(clone, width, height);
-      sanitizeInlineStyles(clone, width, height);
-      removeCaptureLockStyles(clone);
-      removeExportUnsafeNodes(clone);
-      removeCaptureElementMarks(clone, captureIdAttribute);
-      clone.style.width = `${captureWidth}px`;
-      clone.style.height = `${documentHeight}px`;
-      clone.style.margin = "0";
-      clone.style.overflow = "visible";
+async function yieldCapture() {
+  if (globalThis.scheduler?.yield) await globalThis.scheduler.yield();
+  else await new Promise(resolve => setTimeout(resolve, 0));
+}
 
-      const clonedBody = clone.querySelector("body");
-      if (clonedBody instanceof HTMLElement) {
-        clonedBody.style.width = getComputedStyle(document.body).width;
-        clonedBody.style.minHeight = `${documentHeight}px`;
-        clonedBody.style.margin = clonedBody.style.margin || "0";
-      }
-
-      const wrapper = document.createElement("div");
-      wrapper.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      wrapper.style.position = "relative";
-      wrapper.style.width = `${captureWidth}px`;
-      wrapper.style.height = `${documentHeight}px`;
-      wrapper.style.overflow = "hidden";
-      wrapper.style.transform = `translate(${-scrollX}px, ${-scrollY}px)`;
-      wrapper.style.transformOrigin = "top left";
-      wrapper.appendChild(clone);
-
-      const markup = new XMLSerializer().serializeToString(wrapper);
-      const svg = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-          <foreignObject width="100%" height="100%">${markup}</foreignObject>
-        </svg>
-      `;
-      return {
-        blob: new Blob([svg], { type: "image/svg+xml" }),
-        width,
-        height,
+const captureExcluded = "#comty-root, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-create-bubble, .comty-popover, .comty-temp-pin, [data-comty-capture-exclude]";
+const transparentPixel = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+
+function createScreenshotCapture({ apiUrl, projectKey, getHeaders = () => ({}) } = {}) {
+  async function bounded(promise, ms) {
+    let timer;
+    try { return await Promise.race([promise, new Promise(resolve => { timer = setTimeout(resolve, ms); })]); }
+    finally { clearTimeout(timer); }
+  }
+
+  async function captureViewportScreenshot({ context = captureContext(), annotation } = {}) {
+    if (document.visibilityState === "hidden") return null;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 15000);
+    const { signal } = controller;
+    const untilAborted = promise => new Promise((resolve, reject) => {
+      const aborted = () => reject(new Error("Screenshot timed out"));
+      signal.addEventListener("abort", aborted, { once: true });
+      Promise.resolve(promise).then(resolve, reject).finally(() => signal.removeEventListener("abort", aborted));
+      if (signal.aborted) aborted();
+    });
+    let frozen = false;
+    let lastYield = performance.now();
+    const checkContext = () => {
+      signal.throwIfAborted();
+      if (!frozen && (context.url !== location.href || context.width !== innerWidth || context.height !== innerHeight || context.scrollX !== scrollX || context.scrollY !== scrollY)) {
+        throw new Error("Page moved before its screenshot was ready");
+      }
+    };
+    const cooperate = async () => {
+      checkContext();
+      if (performance.now() - lastYield >= 6) {
+        await yieldCapture();
+        lastYield = performance.now();
+        checkContext();
+      }
+    };
+    try {
+      await yieldCapture();
+      await bounded(document.fonts?.ready || Promise.resolve(), 1200);
+      checkContext();
+      const resources = createCaptureResources({ apiUrl, projectKey, getHeaders, signal });
+      const fontFamilies = new Set();
+      const sheets = new Set([...document.styleSheets, ...document.adoptedStyleSheets]);
+      const addFonts = value => value.split(",").forEach(family => fontFamilies.add(family.trim().replace(/^['"]|['"]$/g, "").toLowerCase()));
+      const positioned = [];
+      let cloningAnnotation = false;
+      const options = {
+        resourceCache: Object.create(null),
+        includeQueryParams: true,
+        imagePlaceholder: transparentPixel,
+        signal,
+        fetchRequestInit: { captureFetch: resources },
+        beforeClone: cooperate,
+        placeholder(source) {
+          if (cloningAnnotation) return null;
+          // Offscreen leaf boxes still occupy their exact layout space, but need no
+          // text, fonts or hundreds of computed declarations in the exported SVG.
+          if (!(source instanceof HTMLElement)) return null;
+          if (/^(IFRAME|OBJECT|EMBED)$/.test(source.tagName)) {
+            const spacer = document.createElement("div");
+            const style = getComputedStyle(source);
+            for (const property of style) spacer.style.setProperty(property, style.getPropertyValue(property));
+            return spacer;
+          }
+          if (source.children.length || source.shadowRoot) return null;
+          const rect = source.getBoundingClientRect();
+          if (!rect.width || !rect.height || (rect.bottom > 0 && rect.top < context.height && rect.right > 0 && rect.left < context.width)) return null;
+          const style = getComputedStyle(source);
+          if (!["static", "relative"].includes(style.position) || !["block", "flex", "grid"].includes(style.display) || style.transform !== "none") return null;
+          const spacer = document.createElement("div");
+          for (const property of ["display", "margin", "flex", "align-self", "grid-area", "order"]) spacer.style.setProperty(property, style.getPropertyValue(property));
+          Object.assign(spacer.style, { width: `${rect.width}px`, height: `${rect.height}px`, boxSizing: "border-box", visibility: "hidden" });
+          return spacer;
+        },
+        filter(node) {
+          if (!(node instanceof Element)) return true;
+          if ((!cloningAnnotation && node.matches(captureExcluded)) || /^(SCRIPT|STYLE|LINK|HEAD|NOSCRIPT|AUDIO)$/.test(node.tagName)) return false;
+          return getComputedStyle(node).display !== "none";
+        },
+        afterClone(source, clone) {
+          if (!(source instanceof Element) || !clone.style) return clone;
+          const style = getComputedStyle(source);
+          addFonts(style.fontFamily);
+          for (const pseudo of ["::before", "::after"]) {
+            const pseudoStyle = getComputedStyle(source, pseudo);
+            if (pseudoStyle.content && !["none", "normal"].includes(pseudoStyle.content)) addFonts(pseudoStyle.fontFamily);
+          }
+          if (source.shadowRoot) {
+            for (const sheet of [...source.shadowRoot.styleSheets, ...source.shadowRoot.adoptedStyleSheets]) sheets.add(sheet);
+          }
+          clone.style.setProperty("animation", "none", "important");
+          clone.style.setProperty("transition", "none", "important");
+          clone.style.setProperty("caret-color", "transparent", "important");
+          // Chromium 140 exposes these values but omits them from style enumeration.
+          for (const property of ["text-underline-offset", "text-decoration-thickness"]) {
+            clone.style.setProperty(property, style.getPropertyValue(property));
+          }
+          // WebKit scrollbar pseudo-styles are not part of the computed element style.
+          if ([style.overflowX, style.overflowY].some(value => value === "auto" || value === "scroll") && getComputedStyle(source, "::-webkit-scrollbar").display === "none") {
+            clone.style.setProperty("scrollbar-width", "none", "important");
+          }
+          // A cloned document must not re-run handlers or select a different responsive image.
+          for (const attribute of [...clone.attributes]) {
+            if (attribute.name.startsWith("on")) clone.removeAttribute(attribute.name);
+          }
+          if (source instanceof HTMLImageElement) {
+            clone.removeAttribute("srcset");
+            clone.removeAttribute("sizes");
+            clone.src = source.currentSrc || source.src || transparentPixel;
+            clone.loading = "eager";
+          }
+          if (source instanceof HTMLSourceElement) {
+            clone.removeAttribute("srcset");
+            clone.removeAttribute("src");
+          }
+          if (source instanceof HTMLInputElement) {
+            if (source.type === "password") clone.setAttribute("value", "•".repeat(source.value.length));
+            clone.toggleAttribute("checked", source.checked);
+          }
+          if (source instanceof HTMLSelectElement) {
+            [...clone.options].forEach((option, index) => option.toggleAttribute("selected", source.options[index]?.selected));
+          }
+          const rect = source.getBoundingClientRect();
+          if (!cloningAnnotation && ["fixed", "sticky"].includes(style.position)) {
+            // Composite viewport-bound elements independently of the document's scroll.
+            // Keep a spacer for sticky flow; the real source is never moved or restyled.
+            positioned.push({ clone, rect, zIndex: Number.parseInt(style.zIndex, 10) || 0 });
+            const spacer = document.createElement("div");
+            if (style.position === "sticky") {
+              spacer.style.cssText = clone.style.cssText;
+              spacer.style.position = "static";
+              spacer.style.visibility = "hidden";
+              spacer.style.width = `${source.offsetWidth}px`;
+              spacer.style.height = `${source.offsetHeight}px`;
+            } else spacer.style.display = "none";
+            return spacer;
+          }
+          if (source !== document.documentElement && source !== document.body && (source.scrollTop || source.scrollLeft)) {
+            const wrapper = document.createElement("div");
+            for (const property of ["display", "flex-direction", "flex-wrap", "align-items", "justify-content", "gap", "grid-template-columns", "grid-template-rows"]) {
+              wrapper.style.setProperty(property, style.getPropertyValue(property));
+            }
+            const horizontalPadding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            wrapper.style.width = `${Math.max(source.scrollWidth, source.clientWidth) - horizontalPadding}px`;
+            wrapper.style.transform = `translate(${-source.scrollLeft}px, ${-source.scrollTop}px)`;
+            wrapper.style.transformOrigin = "top left";
+            wrapper.append(...clone.childNodes);
+            clone.append(wrapper);
+            clone.style.display = "block";
+          }
+          return clone;
+        },
       };
+      const clone = await captureEngine.cloneNode(document.documentElement, options, true);
+      checkContext();
+      frozen = true;
+      const stage = document.createElement("div");
+      stage.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+      stage.style.position = "relative";
+      stage.style.width = `${context.width}px`;
+      stage.style.height = `${context.height}px`;
+      stage.style.overflow = "hidden";
+      // The browser propagates the root (or body's) background to the viewport;
+      // an HTML clone inside SVG does not, especially with collapsed margins.
+      const rootStyle = getComputedStyle(document.documentElement);
+      stage.style.backgroundColor = rootStyle.backgroundColor === "rgba(0, 0, 0, 0)" && rootStyle.backgroundImage === "none"
+        ? getComputedStyle(document.body).backgroundColor : rootStyle.backgroundColor;
+      const documentLayer = document.createElement("div");
+      documentLayer.style.transform = `translate(${-context.scrollX}px, ${-context.scrollY}px)`;
+      documentLayer.style.transformOrigin = "top left";
+      clone.style.width = `${context.width}px`;
+      clone.style.height = `${Math.max(document.documentElement.scrollHeight, context.height)}px`;
+      clone.style.overflow = "visible";
+      clone.style.margin = "0";
+      documentLayer.append(clone);
+      stage.append(documentLayer);
+      for (const item of positioned.sort((a, b) => a.zIndex - b.zIndex)) {
+        const { clone: node, rect } = item;
+        if (rect.bottom <= 0 || rect.right <= 0 || rect.top >= context.height || rect.left >= context.width) continue;
+        Object.assign(node.style, { position: "absolute", left: `${rect.left}px`, top: `${rect.top}px`, right: "auto", bottom: "auto", width: `${rect.width}px`, height: `${rect.height}px`, boxSizing: "border-box", margin: "0", transform: "none" });
+        stage.append(node);
+      }
+      if (annotation) {
+        // Measure the real Comty components in an invisible host, then include
+        // their styled clones in the same font/image embedding as the page.
+        const mounted = annotation();
+        try {
+          cloningAnnotation = true;
+          for (const source of mounted.elements) {
+            const rect = source.getBoundingClientRect();
+            const node = await captureEngine.cloneNode(source, options, true);
+            Object.assign(node.style, { position: "absolute", left: `${rect.left}px`, top: `${rect.top}px`, right: "auto", bottom: "auto", width: `${rect.width}px`, height: `${rect.height}px`, boxSizing: "border-box", margin: "0", transform: "none" });
+            stage.append(node);
+          }
+        } finally {
+          cloningAnnotation = false;
+          mounted.dispose();
+        }
+      }
+      const fonts = await untilAborted(captureFontCSS(sheets, fontFamilies, resources, captureEngine.embedResources, options));
+      if (fonts) {
+        const style = document.createElement("style");
+        style.textContent = fonts;
+        stage.prepend(style);
+      }
+      // Pseudo-element styles are generated by the library and need their URLs embedded too.
+      for (const style of stage.querySelectorAll("style")) {
+        await cooperate();
+        style.textContent = await captureEngine.embedResources(style.textContent, document.baseURI, options);
+      }
+      await untilAborted(captureEngine.embedImages(stage, options));
+      checkContext();
+      await yieldCapture();
+      // Transparent page backgrounds reveal the browser canvas, not the image viewer.
+      const viewport = document.createElement("div");
+      viewport.style.backgroundColor = "Canvas";
+      viewport.style.colorScheme = rootStyle.colorScheme;
+      viewport.append(stage);
+      const svg = await captureEngine.nodeToDataURL(viewport, context.width, context.height);
+      const image = new Image();
+      image.src = svg;
+      await untilAborted(image.decode());
+      checkContext();
+      const scale = Math.min(2, devicePixelRatio || 1, 2560 / context.width, 2560 / context.height);
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(context.width * scale);
+      canvas.height = Math.round(context.height * scale);
+      const ctx = canvas.getContext("2d");
+      ctx.scale(scale, scale);
+      ctx.drawImage(image, 0, 0);
+      let blob = await untilAborted(new Promise(resolve => canvas.toBlob(resolve, "image/png")));
+      if (!blob) throw new Error("Screenshot encoding failed");
+      if (blob.size > 2800000) {
+        blob = await untilAborted(new Promise(resolve => canvas.toBlob(resolve, "image/jpeg", 0.9)));
+        if (!blob) throw new Error("Screenshot encoding failed");
+      }
+      // CSS dimensions keep the eyedropper's coordinate system independent of DPR.
+      return { blob, width: canvas.width, height: canvas.height, cssWidth: context.width, cssHeight: context.height };
+    } finally {
+      clearTimeout(timeout);
+      controller.abort();
     }
-
-    return { waitForPaint, waitForCustomElements, captureViewportScreenshot };
+  }
+  return { captureViewportScreenshot };
 }
 
 // Page-local counterpart of the native eyedropper; never captures outside the page.
@@ -2199,7 +2299,9 @@ function createColorMagnifier({ root, isComtyElement, capture }) {
     sampledHex = null;
     if (!enabled) return;
     try {
-      const { blob } = await capture();
+      const screenshot = await capture();
+      if (!screenshot) return;
+      const { blob, cssWidth, cssHeight } = screenshot;
       if (!enabled || version !== revision) return;
       const dataUrl = await new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -2215,7 +2317,11 @@ function createColorMagnifier({ root, isComtyElement, capture }) {
       const probe = document.createElement('canvas').getContext('2d');
       probe.drawImage(next, 0, 0);
       probe.getImageData(0, 0, 1, 1);
-      image = next;
+      const scaled = document.createElement('canvas');
+      scaled.width = cssWidth || next.width;
+      scaled.height = cssHeight || next.height;
+      scaled.getContext('2d').drawImage(next, 0, 0, scaled.width, scaled.height);
+      image = scaled;
       paint();
     } catch { /* The CSS-colour fallback remains available without screen permission. */ }
   }
@@ -2262,7 +2368,7 @@ function createCommentThread(context) {
   const {
     root, apiUrl, projectKey, commentStatuses, selectedStatusFilters, placedPins,
     closeBubbles, getCommentStatus, updateCommentStatus, applyStatusDot,
-    renderSidepanelComments, applyStatusFilters, createThreadItem,
+    renderSidepanelComments, applyStatusFilters, createThreadItem, renderCommentContent,
     isOwnCommentEntry, updateCommentContent, deleteSdkComment, getCommentId,
     updateReplyContent, deleteSdkReply, createCommentAvatar, getSdkHeaders,
     showAuthPrompt,
@@ -2290,14 +2396,6 @@ function createCommentThread(context) {
       const header = document.createElement("div");
       header.className = "comty-bubble-header";
 
-      const title = document.createElement("h2");
-      title.className = "comty-bubble-title";
-      title.innerText = "Comment";
-      header.appendChild(title);
-
-      const headerActions = document.createElement("div");
-      headerActions.className = "comty-bubble-header-actions";
-
       const statusMenuButton = document.createElement("button");
       statusMenuButton.className = "comty-status-trigger";
       statusMenuButton.type = "button";
@@ -2336,7 +2434,7 @@ function createCommentThread(context) {
       };
 
       const saveStatus = async (nextStatus, control) => {
-        if (!context.canWrite) return false;
+        if (!context.canManage) return false;
         control.disabled = true;
         const savedStatus = await updateCommentStatus(comment, nextStatus);
         control.disabled = false;
@@ -2361,7 +2459,7 @@ function createCommentThread(context) {
         return true;
       };
 
-      statusMenuButton.disabled = !context.canWrite;
+      statusMenuButton.disabled = !context.canManage;
       statusMenuButton.onclick = (event) => {
         event.stopPropagation();
         const existingPopover = document.querySelector(
@@ -2373,10 +2471,11 @@ function createCommentThread(context) {
         if (existingPopover) return;
 
         const popover = document.createElement("div");
-        popover.className = "comty-popover comty-status-popover";
+        popover.className = "comty-popover comty-comment-popover comty-status-popover";
         const buttonRect = statusMenuButton.getBoundingClientRect();
         popover.style.top = `${buttonRect.bottom + 4}px`;
-        popover.style.left = `${buttonRect.right - 140}px`;
+        popover.style.left = `${buttonRect.left}px`;
+        popover.style.transformOrigin = "top left";
 
         for (const status of commentStatuses) {
           const item = document.createElement("button");
@@ -2414,6 +2513,13 @@ function createCommentThread(context) {
         }
 
         root.appendChild(popover);
+        const popoverWidth = popover.offsetWidth;
+        const popoverHeight = popover.offsetHeight;
+        popover.style.left = `${Math.max(8, Math.min(buttonRect.left, innerWidth - popoverWidth - 8))}px`;
+        if (buttonRect.bottom + 4 + popoverHeight > innerHeight - 8) {
+          popover.style.top = `${Math.max(8, buttonRect.top - popoverHeight - 4)}px`;
+          popover.style.transformOrigin = "bottom left";
+        }
 
         const closeStatusPopover = (closeEvent) => {
           if (
@@ -2430,9 +2536,7 @@ function createCommentThread(context) {
         );
       };
 
-      headerActions.appendChild(statusMenuButton);
-      headerActions.appendChild(closeButton);
-      header.appendChild(headerActions);
+      header.append(statusMenuButton, closeButton);
       bubble.appendChild(header);
 
       const thread = document.createElement("div");
@@ -2451,7 +2555,7 @@ function createCommentThread(context) {
 
         const popover = document.createElement("div");
         popover.className =
-          "comty-popover comty-entry-actions-popover";
+          "comty-popover comty-comment-popover comty-entry-actions-popover";
 
         const editItem = document.createElement("button");
         editItem.className = "comty-popover-item";
@@ -2537,7 +2641,7 @@ function createCommentThread(context) {
 
           const previousContent = entry.content;
           entry.content = nextContent;
-          item.content.innerText = nextContent;
+          renderCommentContent(item.content, nextContent);
           editor.disabled = true;
           editor.replaceWith(item.content);
           renderSidepanelComments();
@@ -2545,11 +2649,11 @@ function createCommentThread(context) {
           const savedContent = await persist(nextContent);
           if (!savedContent) {
             entry.content = previousContent;
-            item.content.innerText = previousContent || "";
+            renderCommentContent(item.content, previousContent || "");
             renderSidepanelComments();
             return;
           }
-          item.content.innerText = savedContent;
+          renderCommentContent(item.content, savedContent);
           renderSidepanelComments();
         };
 
@@ -2655,9 +2759,11 @@ function createCommentThread(context) {
         replyForm.appendChild(createCommentAvatar(context.currentUser || { name: "You" }));
         const replyField = document.createElement("div");
         replyField.className = "comty-reply-field";
-        const replyInput = document.createElement("input");
+        const replyInput = document.createElement("textarea");
         replyInput.className = "comty-reply-input";
         replyInput.placeholder = "Reply";
+        replyInput.rows = 1;
+        replyInput.setAttribute("aria-label", "Reply");
 
         const replyButton = document.createElement("button");
         replyButton.className = "comty-reply-button";
@@ -2691,6 +2797,7 @@ function createCommentThread(context) {
               comment.replies = replies;
               appendReply(data.reply);
               replyInput.value = "";
+              syncReplySize();
               requestAnimationFrame(() => {
                 threadList.scrollTop = threadList.scrollHeight;
               });
@@ -2704,12 +2811,28 @@ function createCommentThread(context) {
           }
         };
 
+        const syncReplySize = () => {
+          const currentHeight = replyInput.getBoundingClientRect().height;
+          replyInput.style.transition = "none";
+          const lineHeight = parseFloat(getComputedStyle(replyInput).lineHeight);
+          replyInput.style.height = `${lineHeight}px`;
+          const contentHeight = replyInput.scrollHeight;
+          replyInput.style.height = `${currentHeight}px`;
+          replyInput.getBoundingClientRect();
+          replyInput.style.transition = "";
+          const nextHeight = Math.min(contentHeight, parseFloat(getComputedStyle(replyInput).maxHeight));
+          replyInput.style.height = `${nextHeight}px`;
+          if (contentHeight <= lineHeight + 1) replyInput.scrollTop = 0;
+          replyField.classList.toggle("comty-reply-expanded", contentHeight > lineHeight + 1);
+        };
+
         replyInput.oninput = () => {
+          syncReplySize();
           replyButton.disabled = replyInput.value.trim().length === 0;
         };
         replyInput.onkeydown = (event) => {
           event.stopPropagation();
-          if (event.key === "Enter" && !event.shiftKey) {
+          if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
             event.preventDefault();
             void submitReply();
           }
@@ -2727,10 +2850,10 @@ function createCommentThread(context) {
         const signInButton = document.createElement("button");
         signInButton.className = "comty-sign-in-reply";
         signInButton.type = "button";
-        signInButton.innerText = "Sign in to reply";
+        signInButton.innerText = context.allowGuestComments ? "Leave a reply" : "Sign in to reply";
         signInButton.onclick = (event) => {
           event.stopPropagation();
-          showAuthPrompt();
+          showAuthPrompt(false, () => openCommentThread(comment, pin, pinStatusDot, x, y, removeHoverBubble));
         };
         replyForm.appendChild(signInButton);
       }
@@ -3020,11 +3143,14 @@ function initComty(options = {}) {
     const observedCommentTargets = new WeakSet();
     let sidepanelOpen = false;
     let canWrite = false;
+    let canManage = false;
+    let allowGuestComments = false;
     let loginUrl = "";
     let currentUser = null;
     let authStatus = "";
     let didCompleteSignIn = false;
     const tokenStorageKey = `comty:${projectKey}:token`;
+    const authReturnStorageKey = `comty:${projectKey}:auth-return`;
     let sdkToken = "";
     const activeHoverCommentIds = new Set();
     /** @type {null | 'edit' | 'browse'} */
@@ -3033,7 +3159,6 @@ function initComty(options = {}) {
     const placementDiagnostics = new Map();
     let inspectedElement = null;
     let selectedElement = null;
-    let inspectExpanded = false;
     let measureAlt = false;
     let inspectDrag = null;
     let measuredRegion = null;
@@ -3715,6 +3840,21 @@ function initComty(options = {}) {
     const copyIcon = icon('<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>');
     const checkIcon = icon('<path d="m5 12 4 4 10-10"/>');
     const copyFeedbackTimers = new WeakMap();
+    async function copyPropertyValue(button, feedback) {
+      clearTimeout(copyFeedbackTimers.get(button));
+      try {
+        await navigator.clipboard.writeText(button.dataset.copy);
+        if (!button.isConnected) return;
+        button.dataset.copied = "";
+        feedback.textContent = "Copied";
+        clearTimeout(copyFeedbackTimers.get(button));
+        copyFeedbackTimers.set(button, setTimeout(() => { delete button.dataset.copied; }, 1200));
+      } catch {
+        delete button.dataset.copied;
+        if (button.isConnected) feedback.textContent = "Clipboard unavailable — select the value to copy";
+      }
+    }
+
     function propertyRow(label, value, display = value) {
       const unavailable = value === "—";
       return `<div class="comty-property-row"><span>${label}</span><button type="button" data-copy="${escapeInspectorText(value)}" aria-label="Copy ${label}: ${escapeInspectorText(display)}" ${unavailable ? "disabled" : ""}><span>${escapeInspectorText(display)}</span>${unavailable ? "" : `<i class="comty-property-copy-icon" aria-hidden="true">${copyIcon}${checkIcon}</i>`}</button></div>`;
@@ -3741,7 +3881,7 @@ function initComty(options = {}) {
       propertyPanel.setAttribute("aria-label", propertyKind === "color" ? "Recent colours" : "Recent typography");
       const recent = propertyKind === "color" ? recentColors : recentFonts;
       const details = propertyKind === "color" && expanded
-        ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("HEX", propertySelection.hex)}${propertyRow("RGB", propertySelection.rgb)}${propertyRow("HSL", propertySelection.hsl)}${propertyRow("OKLCH", propertySelection.oklch)}${propertyRow("Token", propertySelection.token ? `var(${propertySelection.token})` : "—")}</div></div>`
+        ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("HEX", propertySelection.hex)}${propertyRow("RGB", propertySelection.rgb)}${propertyRow("HSL", propertySelection.hsl)}${propertyRow("OKLCH", propertySelection.oklch)}${propertyRow("Token", propertySelection.token ? propertySelection.token.replace(/^--/, "") : "—", propertySelection.token || "—")}</div></div>`
         : propertyKind === "font" && expanded
           ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("Family", propertySelection.family)}${propertyRow("Size", propertySelection.size)}${propertyRow("Weight", propertySelection.weight)}${propertyRow("Leading", propertySelection.leading)}${propertyRow("Tracking", propertySelection.tracking)}${propertyRow("Colour", propertySelection.color?.hex || "—")}${propertyRow("CSS", propertySelection.css, "All of the above")}</div></div>`
           : "";
@@ -3857,18 +3997,7 @@ function initComty(options = {}) {
         renderPropertyPanel(true);
         propertyPanel.querySelector(`button[data-recent="${button.dataset.recent}"]`)?.focus({ preventScroll: true });
       } else if (button.dataset.copy != null && button.dataset.copy !== "—") {
-        clearTimeout(copyFeedbackTimers.get(button));
-        try {
-          await navigator.clipboard.writeText(button.dataset.copy);
-          if (!button.isConnected || propertyPanel.hidden) return;
-          button.dataset.copied = "";
-          propertyPanel.querySelector(".comty-property-feedback").textContent = `${button.getAttribute("aria-label").slice(5)} copied`;
-          clearTimeout(copyFeedbackTimers.get(button));
-          copyFeedbackTimers.set(button, setTimeout(() => { delete button.dataset.copied; }, 1200));
-        } catch {
-          delete button.dataset.copied;
-          if (button.isConnected && !propertyPanel.hidden) propertyPanel.querySelector(".comty-property-feedback").textContent = "Clipboard unavailable";
-        }
+        await copyPropertyValue(button, propertyPanel.querySelector(".comty-property-feedback"));
       }
     };
 
@@ -4365,7 +4494,8 @@ function initComty(options = {}) {
         : headers;
     }
 
-    function showAuthPrompt(forbidden = false) {
+    function showAuthPrompt(forbidden = false, onReady = startEditSession) {
+      const guestAllowed = allowGuestComments;
       document.querySelector(".comty-auth-backdrop")?.remove();
       const opener = document.activeElement;
       const backdrop = document.createElement("div");
@@ -4376,12 +4506,23 @@ function initComty(options = {}) {
             <span class="comty-auth-icon">${icon('<path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.5 8.5 0 1 1 16.1-3.8Z"/>')}</span>
             <button type="button" class="comty-auth-close" data-comty-close aria-label="Close sign-in dialog">${icon('<path d="m6 6 12 12M6 18 18 6"/>')}</button>
           </div>
-          <h2 id="comty-auth-title">${forbidden ? "Project access required" : "Sign in to comment"}</h2>
-          <p id="comty-auth-description">${forbidden ? "This account is not a member of this project. Ask the project owner for an invite." : "Sign in to share feedback with your team and keep the conversation in one place."}</p>
-          <div class="comty-auth-actions">
-            <button type="button" data-comty-close>${forbidden ? "Close" : "Cancel"}</button>
-            ${forbidden ? "" : '<button type="button" class="comty-auth-primary" data-comty-login>Continue to sign in</button>'}
-          </div>
+          <h2 id="comty-auth-title">${guestAllowed ? "Leave a comment" : forbidden ? "Project access required" : "Sign in to comment"}</h2>
+          <p id="comty-auth-description">${guestAllowed ? "Continue with your name or sign in with Google." : forbidden ? "This account is not a member of this project. Ask the project owner for an invite." : "Sign in to share feedback with your team and keep the conversation in one place."}</p>
+          ${guestAllowed ? `
+            <form class="comty-guest-form">
+              <label for="comty-guest-name">Your name</label>
+              <input id="comty-guest-name" name="name" autocomplete="name" placeholder="Your name" maxlength="80" required aria-describedby="comty-guest-error" />
+              <p id="comty-guest-error" role="alert" hidden></p>
+              <div class="comty-auth-actions comty-guest-actions">
+                <button type="submit" class="comty-auth-primary" data-comty-guest>Continue</button>
+                <span class="comty-auth-or">or</span>
+                <button type="button" data-comty-login>Continue with Google</button>
+              </div>
+            </form>` : `
+            <div class="comty-auth-actions">
+              <button type="button" data-comty-close>${forbidden ? "Close" : "Cancel"}</button>
+              ${forbidden ? "" : '<button type="button" class="comty-auth-primary" data-comty-login>Continue to sign in</button>'}
+            </div>`}
         </div>`;
       const close = () => {
         backdrop.remove();
@@ -4392,11 +4533,12 @@ function initComty(options = {}) {
         event.stopPropagation();
         if (event.key === "Escape") { event.preventDefault(); close(); }
         if (event.key === "Tab") {
-          const buttons = [...backdrop.querySelectorAll("button:not(:disabled)")];
+          const buttons = [...backdrop.querySelectorAll("button:not(:disabled), input:not(:disabled)")];
           if (!buttons.length) { event.preventDefault(); return; }
-          const first = buttons[0], last = buttons.at(-1);
-          if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
-          else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+          event.preventDefault();
+          const index = buttons.indexOf(document.activeElement);
+          const next = (index + (event.shiftKey ? -1 : 1) + buttons.length) % buttons.length;
+          buttons[next].focus();
         }
       });
       const loginButton = backdrop.querySelector("[data-comty-login]");
@@ -4404,15 +4546,62 @@ function initComty(options = {}) {
         loginButton.onclick = () => {
           loginButton.disabled = true;
           loginButton.innerText = "Connecting…";
-          backdrop.querySelectorAll("[data-comty-close]").forEach(button => { button.disabled = true; });
-          setTimeout(() => window.location.assign(loginUrl), 50);
+          backdrop.querySelectorAll("button, input").forEach(control => { control.disabled = true; });
+          try {
+            sessionStorage.setItem(authReturnStorageKey, JSON.stringify({
+              mode: onReady === startEditSession || session.mode === "off" ? "edit" : session.mode,
+              entry: sessionEntry,
+              sidepanelOpen,
+            }));
+          } catch { /* Resume in comment mode if browser storage is unavailable. */ }
+          const destination = new URL("/api/auth/sign-in/google", apiUrl);
+          destination.searchParams.set("callbackURL", loginUrl);
+          setTimeout(() => window.location.assign(guestAllowed ? destination.toString() : loginUrl), 50);
         };
       }
+      const guestForm = backdrop.querySelector(".comty-guest-form");
+      if (guestForm) guestForm.onsubmit = async event => {
+        event.preventDefault();
+        const nameInput = guestForm.querySelector("input");
+        const error = guestForm.querySelector("[role=alert]");
+        const name = nameInput.value.trim();
+        if (!name) { nameInput.focus(); return; }
+        const controls = [...backdrop.querySelectorAll("button, input")];
+        controls.forEach(control => { control.disabled = true; });
+        error.hidden = true;
+        const continueButton = guestForm.querySelector("[data-comty-guest]");
+        continueButton.textContent = "Connecting…";
+        try {
+          const response = await fetch(`${apiUrl}/api/sdk/guest`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ projectKey, name }),
+          });
+          const data = await response.json();
+          if (!response.ok) throw new Error(data.error || "Unable to continue. Please try again.");
+          sdkToken = data.token;
+          try { sessionStorage.setItem(tokenStorageKey, sdkToken); } catch { /* Keep the session in memory when browser storage is unavailable. */ }
+          currentUser = data.user;
+          canWrite = true;
+          canManage = false;
+          if (backdrop.isConnected) {
+            close();
+            onReady();
+          }
+        } catch (failure) {
+          if (!backdrop.isConnected) return;
+          error.textContent = failure.message || "Unable to connect. Please try again.";
+          error.hidden = false;
+          controls.forEach(control => { control.disabled = false; });
+          continueButton.textContent = "Continue";
+          nameInput.focus();
+        }
+      };
       backdrop.onclick = (event) => {
         if (event.target === backdrop) close();
       };
       root.appendChild(backdrop);
-      (loginButton || backdrop.querySelector("[data-comty-close]")).focus({ preventScroll: true });
+      (backdrop.querySelector("#comty-guest-name") || loginButton || backdrop.querySelector("[data-comty-close]")).focus({ preventScroll: true });
     }
 
     function formatBoxValue(value) {
@@ -4609,7 +4798,8 @@ function initComty(options = {}) {
       add("background", css.backgroundColor, (tokens.background.length > 0 || !["rgba(0, 0, 0, 0)", "rgb(255, 255, 255)"].includes(css.backgroundColor)));
       add("color", css.color);
       if (getElementOwnTextSignature(el)) {
-        add("font", `${css.fontSize} / ${css.fontWeight}`);
+        add("font-size", css.fontSize);
+        add("font-weight", css.fontWeight);
         add("font-family", css.fontFamily);
         add("line-height", css.lineHeight);
         add("letter-spacing", css.letterSpacing, css.letterSpacing !== "normal");
@@ -4793,7 +4983,7 @@ function initComty(options = {}) {
         height: draftBubble.offsetHeight,
       };
       const pinBounds = draftPin?.getBoundingClientRect();
-      const signature = JSON.stringify([selector, rect, hoverRect, rows, !!selected, inspectExpanded, measureAlt, draftBounds, pinBounds, spacing]);
+      const signature = JSON.stringify([selector, rect, hoverRect, rows, !!selected, measureAlt, draftBounds, pinBounds, spacing, innerWidth, innerHeight]);
       if (signature === inspectionSignature) return;
       inspectionSignature = signature;
       inspectionLayer.replaceChildren();
@@ -4819,36 +5009,34 @@ function initComty(options = {}) {
       const panel = document.createElement("div");
       panel.className = "comty-inspector";
       panel.setAttribute("aria-label", "Element properties");
-      if (selected) panel.dataset.selected = "";
-      const copyable = (value) => `<button type="button" title="Copy ${escapeInspectorText(value)}" data-copy="${escapeInspectorText(value)}">${escapeInspectorText(value)}</button>`;
-      const featured = new Set(["background", "color", "font", "font-family"]);
-      const visibleRows = inspectExpanded ? rows : selected ? [...rows.filter(([key]) => featured.has(key)), ...rows.filter(([key]) => !featured.has(key))].slice(0, 6) : rows.slice(0, 6);
-      panel.innerHTML = `<div class="comty-inspector-head">${copyable(selector)}${copyable(`${formatBoxValue(rect.width)} × ${formatBoxValue(rect.height)}`)}</div><div class="comty-inspector-details">${visibleRows.map(([key, value, tokens]) => {
-        const picker = key === "background" || key === "color" ? "color" : key === "font" || key === "font-family" ? "font" : "";
-        const valueButton = picker && selected
-          ? `<button type="button" class="comty-inspector-picker" data-picker="${picker}" data-property="${key}" aria-label="Open ${picker === "color" ? key + " colour" : "typography"} details">${picker === "color" ? '<span class="comty-inspector-swatch" aria-hidden="true"></span>' : ""}${escapeInspectorText(value)}</button>`
-          : copyable(value);
-        return `<div class="comty-inspector-row"><span>${key}</span><div class="comty-inspector-value">${tokens?.length ? `<div class="comty-inspector-tokens">${tokens.map(token => copyable(token)).join("")}</div>` : ""}${valueButton}</div></div>`;
-      }).join("")}</div>${rows.length > 6 && selected ? `<button type="button" class="comty-inspector-expand">${inspectExpanded ? "Show less" : `Show ${rows.length - 6} more`}</button>` : ""}`;
-      for (const button of panel.querySelectorAll('.comty-inspector-picker[data-picker="color"]')) {
-        button.querySelector(".comty-inspector-swatch").style.backgroundColor = getComputedStyle(target)[button.dataset.property === "background" ? "backgroundColor" : "color"];
+      if (selected || draftPreview) panel.dataset.selected = "";
+      const priority = ["background", "color", "font-family", "font-size", "font-weight", "margin", "line-height", "letter-spacing"];
+      const orderedRows = [...rows.filter(([key]) => priority.includes(key)).sort((a, b) => priority.indexOf(a[0]) - priority.indexOf(b[0])), ...rows.filter(([key]) => !priority.includes(key))];
+      const labels = { "font-family": "Font", "font-size": "Size", "font-weight": "Weight", "line-height": "Line height", "letter-spacing": "Spacing", "background": "Background", "color": "Color", "margin": "Margin" };
+      const cssProperty = key => ({ radius: "border-radius", background: "background-color" })[key] || key;
+      const copyValue = (value, tokens) => tokens?.length ? `var(${tokens[0]})` : value;
+      const allProperties = `${selector} {\n${rows.map(([key, value, tokens]) => `  ${cssProperty(key)}: ${copyValue(value, tokens)};`).join("\n")}\n}`;
+      const copyButton = (value, label) => `<button type="button" class="comty-inspector-copy" data-copy="${escapeInspectorText(value)}" aria-label="${escapeInspectorText(label)}" title="${escapeInspectorText(label)}"><i class="comty-property-copy-icon" aria-hidden="true">${copyIcon}${checkIcon}</i></button>`;
+      panel.innerHTML = `<div class="comty-inspector-head"><span class="comty-inspector-selector" dir="rtl" title="${escapeInspectorText(selector)}"><bdi dir="ltr">${escapeInspectorText(selector)}</bdi></span>${copyButton(allProperties, "Copy all properties")}</div><div class="comty-inspector-details">${orderedRows.map(([key, value, tokens]) => {
+        const label = labels[key] || key.replaceAll("-", " ").replace(/^./, c => c.toUpperCase());
+        const isColor = key === "background" || key === "color";
+        const picker = isColor ? "color" : key.startsWith("font-") || ["line-height", "letter-spacing"].includes(key) ? "font" : "";
+        const displayValue = isColor ? colorDetails(value)?.hex || value : value;
+        const valueMarkup = `${isColor ? '<span class="comty-inspector-swatch" aria-hidden="true"></span>' : ""}<span class="comty-inspector-text">${tokens?.length ? `<span class="comty-inspector-tokens">${tokens.map(escapeInspectorText).join(", ")}</span><span class="comty-inspector-secondary">${escapeInspectorText(displayValue)}</span>` : escapeInspectorText(displayValue)}</span>`;
+        const valueElement = picker && selected
+          ? `<button type="button" class="comty-inspector-value comty-inspector-picker" data-picker="${picker}" data-property="${key}" aria-label="Open ${isColor ? key + " colour" : "typography"} details">${valueMarkup}</button>`
+          : `<span class="comty-inspector-value" data-property="${key}">${valueMarkup}</span>`;
+        return `<div class="comty-inspector-row"><span class="comty-inspector-label">${label}</span>${valueElement}${copyButton(tokens?.length ? tokens[0].replace(/^--/, "") : value, `Copy ${label}`)}</div>`;
+      }).join("")}</div><span class="comty-property-feedback" role="status"></span>`;
+      for (const swatch of panel.querySelectorAll('.comty-inspector-swatch')) {
+        const key = swatch.parentElement.dataset.property;
+        swatch.style.backgroundColor = rows.find(([name]) => name === key)?.[1];
       }
       panel.onclick = async (event) => {
         const button = event.target.closest("button");
         if (!button) return;
-        if (button.classList.contains("comty-inspector-expand")) {
-          inspectExpanded = !inspectExpanded;
-          renderInspector();
-        } else if (button.dataset.picker) {
-          openPropertyPanel(button.dataset.picker, target, button.dataset.property, button);
-        } else {
-          try {
-            await navigator.clipboard.writeText(button.dataset.copy);
-            button.title = "Copied";
-          } catch {
-            button.title = "Clipboard unavailable — select the value to copy";
-          }
-        }
+        if (button.dataset.picker) openPropertyPanel(button.dataset.picker, target, button.dataset.property, button);
+        else await copyPropertyValue(button, panel.querySelector(".comty-property-feedback"));
       };
       inspectionLayer.appendChild(panel);
       const bounds = panel.getBoundingClientRect();
@@ -4866,8 +5054,24 @@ function initComty(options = {}) {
         }
         return;
       }
-      panel.style.left = `${Math.max(8, Math.min(rect.left + rect.width / 2 - bounds.width / 2, innerWidth - bounds.width - 8))}px`;
-      panel.style.top = `${Math.max(8, Math.min(rect.bottom + 4 + bounds.height <= innerHeight ? rect.bottom + 4 : rect.top - bounds.height - 4, innerHeight - bounds.height - 8))}px`;
+      const inset = 8, gap = 12;
+      const clampX = x => Math.max(inset, Math.min(x, innerWidth - bounds.width - inset));
+      const clampY = y => Math.max(inset, Math.min(y, innerHeight - bounds.height - inset));
+      const x = clampX(rect.left), y = clampY(rect.top);
+      const candidates = [
+        { left: x, top: rect.bottom + gap },
+        { left: rect.right + gap, top: y },
+        { left: rect.left - bounds.width - gap, top: y },
+        { left: x, top: rect.top - bounds.height - gap },
+      ];
+      let position = candidates.find(({ left, top }) => left >= inset && top >= inset && left + bounds.width <= innerWidth - inset && top + bounds.height <= innerHeight - inset);
+      if (!position) {
+        // A viewport-sized target leaves no outside space; minimize the covered area.
+        const overlap = ({ left, top }) => Math.max(0, Math.min(left + bounds.width, rect.right) - Math.max(left, rect.left)) * Math.max(0, Math.min(top + bounds.height, rect.bottom) - Math.max(top, rect.top));
+        position = candidates.map(({ left, top }) => ({ left: clampX(left), top: clampY(top) })).sort((a, b) => overlap(a) - overlap(b))[0];
+      }
+      panel.style.left = `${position.left}px`;
+      panel.style.top = `${position.top}px`;
     }
 
     function endSession() {
@@ -5256,15 +5460,6 @@ function initComty(options = {}) {
       return element;
     }
 
-    async function waitForCommentTargetReady(comment) {
-      const el = resolveCommentElement(comment);
-      if (!el) return false;
-
-      await waitForCustomElements(el);
-      await waitForPaint();
-      return true;
-    }
-
     function getDeviceContext() {
       const width = window.innerWidth;
       const height = window.innerHeight;
@@ -5339,125 +5534,44 @@ function initComty(options = {}) {
       if (!session.edit || hadDraft) hideInspector();
       document
         .querySelectorAll(
-          ".comty-bubble, .comty-create-bubble, .comty-temp-pin, .comty-popover",
+          ".comty-bubble:not([data-comty-capture-keep]), .comty-create-bubble, .comty-temp-pin, .comty-popover",
         )
         .forEach((x) => x.remove());
     }
 
-    const { waitForPaint, waitForCustomElements, captureViewportScreenshot } = createScreenshotCapture();
-
-    async function buildCommentScreenshotFormData(payload) {
-      const formData = new FormData();
-
-      Object.entries(payload).forEach(([key, value]) => {
-        if (value === undefined || value === null) return;
-        formData.append(key, String(value));
-      });
-
-      try {
-        await waitForCommentTargetReady(payload);
-        const screenshot = await captureViewportScreenshot();
-        if (screenshot) {
-          const extension =
-            screenshot.blob.type === "image/svg+xml"
-              ? "svg"
-              : screenshot.blob.type === "image/jpeg"
-                ? "jpg"
-                : screenshot.blob.type === "image/png"
-                  ? "png"
-                  : "webp";
-          formData.append(
-            "screenshot",
-            screenshot.blob,
-            `comment.${extension}`,
-          );
-          formData.append("screenshotWidth", String(screenshot.width));
-          formData.append("screenshotHeight", String(screenshot.height));
-        }
-      } catch (error) {
-        console.error("Comty: screenshot capture failed", error);
-      }
-
-      return formData;
-    }
+    const { captureViewportScreenshot } = createScreenshotCapture({ apiUrl, projectKey, getHeaders: getSdkHeaders });
 
-    async function uploadCommentScreenshot(
-      commentId,
-      payload,
-      captureNodes = [],
-    ) {
+    async function uploadCommentScreenshot(comment, context, point) {
       try {
-        const formData = await buildCommentScreenshotFormData({
-          projectKey,
-          host: window.location.host,
-          ...payload,
-        });
-
-        captureNodes.forEach((node) => node.remove());
-
-        if (!formData.has("screenshot")) return;
-
+        const screenshot = await captureViewportScreenshot({ context, annotation: () => mountCaptureAnnotation(comment, point) });
+        if (!screenshot) return;
+        const formData = new FormData();
+        formData.append("projectKey", projectKey);
+        formData.append("screenshot", screenshot.blob, screenshot.blob.type === "image/jpeg" ? "comment.jpg" : "comment.png");
+        formData.append("screenshotWidth", String(screenshot.width));
+        formData.append("screenshotHeight", String(screenshot.height));
         const response = await fetch(
-          `${apiUrl}/api/comments/${encodeURIComponent(commentId)}/screenshot`,
-          {
-            method: "POST",
-            headers: getSdkHeaders(),
-            body: formData,
-          },
+          `${apiUrl}/api/comments/${encodeURIComponent(comment.id)}/screenshot`,
+          { method: "POST", headers: getSdkHeaders(), body: formData },
         );
-
-        if (!response.ok) {
-          console.error(
-            "Comty: screenshot upload failed",
-            await response.text(),
-          );
-          return;
-        }
-
-        await loadComments({ force: true });
+        if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
+        // Updating metadata must not redraw the page or interrupt a new draft.
+        const { screenshotUrl } = await response.json();
+        const cached = cachedComments.find(item => String(item.id) === String(comment.id));
+        if (cached) Object.assign(cached, {
+          screenshot_url: screenshotUrl,
+          screenshot_width: screenshot.width,
+          screenshot_height: screenshot.height,
+        });
       } catch (error) {
-        console.error("Comty: screenshot upload failed", error);
-        captureNodes.forEach((node) => node.remove());
-      }
-    }
-
-    function createCaptureAnnotation(pin, bubble, content) {
-      const capturePin = pin.cloneNode(false);
-      capturePin.dataset.comtyCaptureKeep = "true";
-      capturePin.classList.add("comty-capture-annotation");
-      capturePin.classList.remove("comty-temp-pin");
-      capturePin.style.display = "grid";
-      capturePin.style.pointerEvents = "none";
-      capturePin.style.animation = "none";
-      capturePin.style.opacity = "1";
-      capturePin.style.transform = "translate(-50%, -50%)";
-      setPinIcon(capturePin, currentUser || { name: "You" });
-
-      const captureBubble = document.createElement("div");
-      captureBubble.className =
-        "comty-bubble comty-hover-bubble comty-capture-annotation";
-      captureBubble.dataset.comtyCaptureKeep = "true";
-      captureBubble.style.left = bubble.style.left;
-      captureBubble.style.top = bubble.style.top;
-      captureBubble.style.display = "block";
-      captureBubble.style.pointerEvents = "none";
-      captureBubble.style.animation = "none";
-      captureBubble.style.opacity = "1";
-      captureBubble.style.transform = "none";
-
-      const contentEl = document.createElement("div");
-      contentEl.className = "comty-bubble-content";
-      contentEl.innerText = content;
-      captureBubble.appendChild(contentEl);
-
-      document.body.appendChild(capturePin);
-      document.body.appendChild(captureBubble);
-      return [capturePin, captureBubble];
+        console.warn("Comty: comment saved, screenshot unavailable", error);
+      }
     }
 
     function addLocalComment(commentId, payload) {
       const comment = {
         id: commentId,
+        pending: commentId.startsWith("pending-"),
         project_id: projectId,
         domain: payload.host || window.location.host,
         page_path: payload.pagePath || window.location.pathname,
@@ -5465,6 +5579,7 @@ function initComty(options = {}) {
         rel_x: payload.relX,
         rel_y: payload.relY,
         content: payload.content || "",
+        link_url: payload.linkUrl || null,
         created_at: new Date().toISOString(),
         dom_element: payload.domElement || null,
         viewport: payload.viewport || null,
@@ -5476,7 +5591,9 @@ function initComty(options = {}) {
         screenshot_width: null,
         screenshot_height: null,
         anchor_context: payload.anchorContext || null,
-        author_user_id: currentUser?.id || null,
+        author_user_id: currentUser?.isGuest ? null : currentUser?.id || null,
+        guest_author_id: currentUser?.isGuest ? currentUser.id : null,
+        guest_author_name: currentUser?.isGuest ? currentUser.name : null,
         author_name: currentUser?.name || null,
         author_avatar_url: currentUser?.avatarUrl || null,
         replies: [],
@@ -5491,6 +5608,7 @@ function initComty(options = {}) {
       ];
       renderSidepanelComments();
       void renderComments(cachedComments, { retry: false });
+      return comment;
     }
 
     function getCommentAuthorName(comment) {
@@ -5500,8 +5618,7 @@ function initComty(options = {}) {
     function isOwnCommentEntry(entry) {
       return Boolean(
         currentUser?.id &&
-        entry?.author_user_id &&
-        entry.author_user_id === currentUser.id,
+        (currentUser.isGuest ? entry?.guest_author_id : entry?.author_user_id) === currentUser.id,
       );
     }
 
@@ -5577,7 +5694,7 @@ function initComty(options = {}) {
 
     function createThreadItem(
       entry,
-      { showMore = isOwnCommentEntry(entry) } = {},
+      { showMore = isOwnCommentEntry(entry), showLink = true } = {},
     ) {
       const item = document.createElement("div");
       item.className = "comty-thread-item";
@@ -5612,15 +5729,51 @@ function initComty(options = {}) {
 
       const content = document.createElement("div");
       content.className = "comty-bubble-content";
-      content.innerText = entry?.content || "";
+      renderCommentContent(content, entry?.content || "");
 
       body.appendChild(author);
       body.appendChild(content);
+      if (showLink && entry?.link_url) body.appendChild(createCommentLink(entry.link_url));
       item.appendChild(body);
 
       return { item, body, content, moreButton };
     }
 
+    function renderCommentContent(element, value) {
+      const content = String(value ?? "");
+      const nodes = [];
+      let previousEnd = 0;
+      for (const match of content.matchAll(/https?:\/\/[^\s<>"']+/gi)) {
+        const url = match[0].replace(/[.,!?;:]+$/, "");
+        if (!url) continue;
+        let parsed;
+        try { parsed = new URL(url); } catch { continue; }
+        if (!["http:", "https:"].includes(parsed.protocol) || !parsed.hostname) continue;
+        nodes.push(document.createTextNode(content.slice(previousEnd, match.index)));
+        const link = document.createElement("a");
+        link.href = url;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        link.textContent = url;
+        nodes.push(link);
+        previousEnd = match.index + url.length;
+      }
+      nodes.push(document.createTextNode(content.slice(previousEnd)));
+      element.replaceChildren(...nodes);
+    }
+
+    function createCommentLink(url) {
+      const link = document.createElement("a");
+      link.className = "comty-comment-link";
+      link.href = url;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.title = url;
+      link.setAttribute("aria-label", `Open attached link: ${url}`);
+      link.textContent = url;
+      return link;
+    }
+
     function setPinIcon(pin, comment = null) {
       if (comment) {
         pin.classList.add("comty-pin-with-avatar");
@@ -5637,6 +5790,54 @@ function initComty(options = {}) {
       `;
     }
 
+    function createCommentPin(comment, x, y) {
+      const pin = document.createElement("button");
+      pin.className = "comty-pin";
+      pin.type = "button";
+      pin.style.left = `${x}px`;
+      pin.style.top = `${y}px`;
+      setPinIcon(pin, comment);
+      const statusDot = document.createElement("span");
+      statusDot.className = "comty-pin-status-dot";
+      applyStatusDot(statusDot, comment.status);
+      pin.appendChild(statusDot);
+      return pin;
+    }
+
+    function createCommentPreview(comment) {
+      const bubble = document.createElement("div");
+      bubble.className = "comty-bubble comty-hover-bubble";
+      const thread = document.createElement("div");
+      thread.className = "comty-thread";
+      thread.appendChild(createThreadItem(comment, { showMore: false, showLink: false }).item);
+      bubble.appendChild(thread);
+      return bubble;
+    }
+
+    function mountCaptureAnnotation(comment, { x, y }) {
+      const host = document.createElement("div");
+      host.dataset.comtyCaptureExclude = "";
+      host.setAttribute("aria-hidden", "true");
+      host.inert = true;
+      // Ancestor opacity hides measurement without changing the components'
+      // computed opacity. Nothing flashes or intercepts input during cloning.
+      Object.assign(host.style, { position: "fixed", inset: "0", opacity: "0", pointerEvents: "none" });
+      const pin = createCommentPin(comment, x, y);
+      const bubble = createCommentPreview(comment);
+      for (const element of [pin, bubble]) {
+        element.dataset.comtyCaptureKeep = "";
+        element.style.setProperty("animation", "none", "important");
+        element.style.setProperty("transition", "none", "important");
+        element.style.setProperty("pointer-events", "none", "important");
+      }
+      pin.style.display = "grid";
+      bubble.style.display = "block";
+      host.append(pin, bubble);
+      root.appendChild(host);
+      positionCommentBubble(bubble, x, y);
+      return { elements: [pin, bubble], dispose: () => host.remove() };
+    }
+
     function createCommentAuthor(comment) {
       const author = document.createElement("div");
       author.className = "comty-comment-author";
@@ -5687,25 +5888,86 @@ function initComty(options = {}) {
       const actions = document.createElement("div");
       actions.className = "comty-create-actions";
 
+      const linkBtn = document.createElement("button");
+      linkBtn.type = "button";
+      linkBtn.className = "comty-create-link-button";
+      linkBtn.setAttribute("aria-label", "Add link");
+      linkBtn.innerHTML = `
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+          <path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+      `;
+
+      const linkEditor = document.createElement("div");
+      linkEditor.className = "comty-create-link-editor";
+      linkEditor.inert = true;
+      linkEditor.setAttribute("aria-hidden", "true");
+      const linkInput = document.createElement("input");
+      linkInput.type = "url";
+      linkInput.placeholder = "Paste a link";
+      linkInput.setAttribute("aria-label", "Link URL");
+      const linkInsert = document.createElement("button");
+      linkInsert.type = "button";
+      linkInsert.textContent = "Add";
+      const linkCancel = document.createElement("button");
+      linkCancel.type = "button";
+      linkCancel.setAttribute("aria-label", "Cancel link");
+      linkCancel.textContent = "×";
+      const linkField = document.createElement("div");
+      linkField.className = "comty-create-link-field";
+      linkField.append(linkInput, linkCancel);
+      linkEditor.append(linkField, linkInsert);
+
+      const attachment = document.createElement("div");
+      attachment.className = "comty-create-attachment";
+      const attachmentLink = document.createElement("a");
+      attachmentLink.className = "comty-comment-link";
+      attachmentLink.target = "_blank";
+      attachmentLink.rel = "noopener noreferrer";
+      const removeAttachment = document.createElement("button");
+      removeAttachment.type = "button";
+      removeAttachment.setAttribute("aria-label", "Remove attached link");
+      removeAttachment.textContent = "×";
+      const attachmentChip = document.createElement("div");
+      attachmentChip.className = "comty-create-attachment-chip";
+      attachmentChip.append(attachmentLink, removeAttachment);
+      attachment.appendChild(attachmentChip);
+      let attachedLink = "";
+
       const submitBtn = document.createElement("button");
+      submitBtn.type = "button";
       submitBtn.className = "comty-btn-submit";
       submitBtn.setAttribute("aria-label", "Post comment");
+      submitBtn.disabled = true;
       submitBtn.innerHTML = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M12 19V5M5 12l7-7 7 7"/>
         </svg>
       `;
 
+      const editorDraft = draftAnchor;
       const submit = async () => {
         const content = textarea.value.trim();
-        if (!content) return;
+        if (!content || textarea.disabled) return;
 
         submitBtn.disabled = true;
         textarea.disabled = true;
+        linkBtn.disabled = true;
 
         payload.content = content;
+        payload.linkUrl = attachedLink || null;
         textarea.textContent = content;
 
+        const context = captureContext();
+        const point = getPinPoint(pin);
+        const pendingId = `pending-${crypto.randomUUID()}`;
+        // Paint the comment immediately. The network save never waits for capture work.
+        bubble.remove();
+        pin.remove();
+        if (draftAnchor === editorDraft) draftAnchor = null;
+        hideInspector();
+        addLocalComment(pendingId, payload);
         let post;
         try {
           post = await fetch(`${apiUrl}/api/comments`, {
@@ -5713,35 +5975,32 @@ function initComty(options = {}) {
             headers: getSdkHeaders({ "Content-Type": "application/json" }),
             body: JSON.stringify(payload),
           });
+          if (!post.ok) throw new Error(`Comment save failed (${post.status})`);
+          const data = await post.json();
+          if (!data?.id) throw new Error("Comment save returned no ID");
+          cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
+          if (context.url === location.href) {
+            const comment = addLocalComment(String(data.id), payload);
+            // Start only after the save and immediate UI update; the capture yields to input.
+            void uploadCommentScreenshot(comment, context, point);
+          } else void loadComments({ force: true });
         } catch (error) {
           console.error("Comty: save failed", error);
+          cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
+          renderSidepanelComments();
+          void renderComments(cachedComments, { retry: false });
+          // Keep the original editor and its text available for retry, including attachments.
+          if (!draftAnchor) draftAnchor = editorDraft;
+          root.append(pin, bubble);
           submitBtn.disabled = false;
           textarea.disabled = false;
-          return;
-        }
-
-        if (!post.ok) {
-          console.error("Comty: save failed", await post.text());
-          submitBtn.disabled = false;
-          textarea.disabled = false;
-          return;
-        }
-
-        const data = await post.json();
-        const commentId = data?.id;
-        const captureNodes = commentId
-          ? createCaptureAnnotation(pin, bubble, content)
-          : [];
-        bubble.remove();
-        pin.remove();
-        draftAnchor = null;
-        hideInspector();
-        if (commentId) {
-          addLocalComment(String(commentId), payload);
-          void loadComments({ force: true });
-          void uploadCommentScreenshot(String(commentId), payload, captureNodes);
-        } else {
-          void loadComments({ force: true });
+          linkBtn.disabled = false;
+          const errorMessage = document.createElement("p");
+          errorMessage.setAttribute("role", "alert");
+          errorMessage.textContent = "Comment not saved. Your draft is ready to retry.";
+          bubble.querySelector('[role="alert"]')?.remove();
+          bubble.append(errorMessage);
+          if (bubble.isConnected) textarea.focus();
         }
       };
 
@@ -5750,8 +6009,63 @@ function initComty(options = {}) {
         submit();
       };
 
+      const closeLinkEditor = () => {
+        bubble.classList.remove("comty-create-link-open");
+        linkEditor.inert = true;
+        linkEditor.setAttribute("aria-hidden", "true");
+        linkInput.value = "";
+        linkInput.removeAttribute("aria-invalid");
+        linkInput.setCustomValidity("");
+        textarea.focus();
+      };
+      linkBtn.onclick = () => {
+        if (!bubble.classList.contains("comty-create-expanded")) return;
+        bubble.classList.add("comty-create-link-open");
+        linkEditor.inert = false;
+        linkEditor.setAttribute("aria-hidden", "false");
+        linkInput.focus();
+      };
+      linkCancel.onclick = closeLinkEditor;
+      linkInput.oninput = () => {
+        linkInput.removeAttribute("aria-invalid");
+        linkInput.setCustomValidity("");
+      };
+      linkInput.onkeydown = (event) => {
+        if (event.key === "Enter") { event.preventDefault(); linkInsert.click(); }
+        if (event.key === "Escape") { event.preventDefault(); closeLinkEditor(); }
+      };
+      linkInsert.onclick = () => {
+        const value = linkInput.value.trim();
+        const candidate = /^[a-z][a-z0-9+.-]*:/i.test(value) ? value : `https://${value}`;
+        let url;
+        try { url = new URL(candidate); } catch { /* Report below. */ }
+        if (!url || !["http:", "https:"].includes(url.protocol) || !url.hostname || url.username || url.password || /\s/.test(value) || String(url).length > 2048) {
+          linkInput.setAttribute("aria-invalid", "true");
+          linkInput.setCustomValidity("Enter a valid HTTP(S) URL.");
+          linkInput.reportValidity();
+          linkInput.focus();
+          return;
+        }
+        attachedLink = String(url);
+        attachmentLink.href = attachedLink;
+        attachmentLink.title = attachedLink;
+        attachmentLink.textContent = attachedLink;
+        bubble.classList.add("comty-create-has-attachment");
+        closeLinkEditor();
+        const point = getPinPoint(pin);
+        positionCommentBubble(bubble, point.x, point.y);
+        renderInspector();
+      };
+
+      removeAttachment.onclick = () => {
+        attachedLink = "";
+        bubble.classList.remove("comty-create-has-attachment");
+        textarea.focus();
+        textarea.oninput();
+      };
+
       textarea.onkeydown = (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
+        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
           e.preventDefault();
           submit();
         }
@@ -5762,31 +6076,20 @@ function initComty(options = {}) {
       };
 
       textarea.oninput = () => {
-        textarea.style.height = "24px";
-        const scrollHeight = textarea.scrollHeight;
-        textarea.style.height = scrollHeight + "px";
-
-        if (scrollHeight > 24) {
-          bubble.style.borderRadius = "16px";
-          bubble.style.alignItems = "flex-end";
-        } else {
-          bubble.style.borderRadius = "999px";
-          bubble.style.alignItems = "center";
-        }
-
-        if (textarea.value.trim().length > 0) {
-          submitBtn.classList.add("comty-btn-active");
-        } else {
-          submitBtn.classList.remove("comty-btn-active");
-        }
+        const expanded = textarea.value.length > 0 || Boolean(attachedLink);
+        bubble.classList.toggle("comty-create-expanded", expanded);
+        if (!expanded && bubble.classList.contains("comty-create-link-open")) closeLinkEditor();
+        submitBtn.disabled = !textarea.value.trim();
+        submitBtn.classList.toggle("comty-btn-active", !submitBtn.disabled);
         const point = getPinPoint(pin);
         positionCommentBubble(bubble, point.x, point.y);
         renderInspector();
       };
 
-      actions.appendChild(submitBtn);
+      actions.append(linkBtn, submitBtn, linkEditor);
 
       bubble.appendChild(textarea);
+      bubble.appendChild(attachment);
       bubble.appendChild(actions);
 
       root.appendChild(bubble);
@@ -5895,6 +6198,7 @@ function initComty(options = {}) {
         const item = document.createElement("button");
         item.type = "button";
         item.className = "comty-sidepanel-item";
+        item.disabled = Boolean(comment.pending);
         item.innerHTML = `
         <span class="comty-sidepanel-item-status" aria-hidden="true"></span>
         <span class="comty-sidepanel-item-body">
@@ -5915,7 +6219,7 @@ function initComty(options = {}) {
 
         const metaEl = item.querySelector(".comty-sidepanel-item-meta");
         if (metaEl instanceof HTMLElement) {
-          metaEl.innerText = `${comment.author_name || "Anonymous"} · ${getCommentLabel(comment)}`;
+          metaEl.innerText = `${comment.author_name || "Anonymous"} · ${comment.pending ? "Sending…" : getCommentLabel(comment)}`;
           metaEl.title = getCommentLabel(comment);
         }
 
@@ -6246,11 +6550,13 @@ function initComty(options = {}) {
     const openCommentThread = createCommentThread({
       root, apiUrl, projectKey, commentStatuses, selectedStatusFilters, placedPins,
       closeBubbles, getCommentStatus, updateCommentStatus, applyStatusDot,
-      renderSidepanelComments, applyStatusFilters, createThreadItem,
+      renderSidepanelComments, applyStatusFilters, createThreadItem, renderCommentContent,
       isOwnCommentEntry, updateCommentContent, deleteSdkComment, getCommentId,
       updateReplyContent, deleteSdkReply, createCommentAvatar, getSdkHeaders,
       showAuthPrompt,
       get canWrite() { return canWrite; },
+      get canManage() { return canManage; },
+      get allowGuestComments() { return allowGuestComments; },
       get currentUser() { return currentUser; },
       get cachedComments() { return cachedComments; },
       set cachedComments(value) { cachedComments = value; },
@@ -6300,20 +6606,11 @@ function initComty(options = {}) {
       const x = visibility.clientX;
       const y = visibility.clientY;
 
-      const pin = document.createElement("button");
-      pin.className = "comty-pin";
-      pin.type = "button";
+      const pin = createCommentPin(comment, x, y);
+      pin.disabled = Boolean(comment.pending);
       pin.dataset.status = getCommentStatus(comment.status).value;
-      if (comment.id) {
-        pin.dataset.commentId = String(comment.id);
-      }
-      pin.style.left = `${x}px`;
-      pin.style.top = `${y}px`;
-      setPinIcon(pin, comment);
-      const pinStatusDot = document.createElement("span");
-      pinStatusDot.className = "comty-pin-status-dot";
-      applyStatusDot(pinStatusDot, comment.status);
-      pin.appendChild(pinStatusDot);
+      if (comment.id) pin.dataset.commentId = String(comment.id);
+      const pinStatusDot = pin.querySelector(".comty-pin-status-dot");
       pin.setAttribute(
         "aria-label",
         `Afficher le commentaire, statut ${getCommentStatus(comment.status).label}`,
@@ -6355,32 +6652,14 @@ function initComty(options = {}) {
           activeHoverCommentIds.add(commentId);
         }
 
-        const hoverBubble = document.createElement("div");
-        hoverBubble.className = "comty-bubble comty-hover-bubble";
+        const hoverBubble = createCommentPreview(comment);
         hoverBubble.style.left = `${x + 32}px`;
         hoverBubble.style.top = `${y - 17}px`;
-        hoverBubble.style.pointerEvents = "none";
         hoverBubble.dataset.hoverId = commentId;
 
-        const hoverThread = document.createElement("div");
-        hoverThread.className = "comty-thread";
-        const hoverItem = createThreadItem(comment, { showMore: false });
-        hoverThread.appendChild(hoverItem.item);
-        hoverBubble.appendChild(hoverThread);
-
         root.appendChild(hoverBubble);
 
-        requestAnimationFrame(() => {
-          if (x + 16 + hoverBubble.offsetWidth > window.innerWidth) {
-            hoverBubble.style.left = `${x - hoverBubble.offsetWidth - 24}px`;
-            hoverBubble.classList.add("comty-bubble-left");
-          }
-
-          const rect = hoverBubble.getBoundingClientRect();
-          if (rect.bottom > window.innerHeight) {
-            hoverBubble.style.top = `${y - rect.height - 16}px`;
-          }
-        });
+        requestAnimationFrame(() => positionCommentBubble(hoverBubble, x, y));
       };
 
       pin.onmouseleave = () => {
@@ -6477,6 +6756,9 @@ function initComty(options = {}) {
       cachedComments = comments
         .filter(comment => comment.kind !== "agent" && !comment.local_agent)
         .map(comment => Object.assign(previous.get(String(comment.id)) || {}, comment));
+      for (const comment of previous.values()) {
+        if (comment.pending && !cachedComments.some(item => item.id === comment.id)) cachedComments.push(comment);
+      }
     }
 
     async function loadComments({ force = false } = {}) {
@@ -6697,7 +6979,6 @@ function initComty(options = {}) {
         hideInspector();
         return;
       }
-      if (inspectedElement !== target) inspectExpanded = selectedElement ? inspectExpanded : false;
       showInspector(target);
     }, true);
     document.documentElement.addEventListener("pointerleave", () => {
@@ -6754,7 +7035,6 @@ function initComty(options = {}) {
           }
           measuredRegion = null;
           selectedElement = getAnchorElement(target);
-          inspectExpanded = false;
           showInspector(target);
           return;
         }
@@ -6912,13 +7192,26 @@ function initComty(options = {}) {
       const data = await res.json();
       projectId = data.projectId;
       canWrite = Boolean(data.canWrite);
+      canManage = Boolean(data.canManage ?? data.canWrite);
+      allowGuestComments = Boolean(data.allowGuestComments);
       currentUser = data.user || null;
       loginUrl = data.loginUrl || "";
 
       if (!canWrite && sdkToken) {
-        sessionStorage.removeItem(tokenStorageKey);
+        try { sessionStorage.removeItem(tokenStorageKey); } catch { /* Storage may be unavailable. */ }
         sdkToken = "";
       }
+      if (didCompleteSignIn || authStatus === "forbidden") {
+        let previousSession;
+        try {
+          previousSession = JSON.parse(sessionStorage.getItem(authReturnStorageKey) || "null");
+          sessionStorage.removeItem(authReturnStorageKey);
+        } catch { /* Fall back to the requested comment mode. */ }
+        const mode = canWrite && ["browse", "edit", "inspect"].includes(previousSession?.mode)
+          ? previousSession.mode : canWrite ? "edit" : "browse";
+        setSession(mode, { entry: previousSession?.entry || mode });
+        if (previousSession?.sidepanelOpen) setSidepanelOpen(true);
+      }
       if (authStatus === "forbidden") showAuthPrompt(true);
       if (canWrite && didCompleteSignIn) {
         const toast = document.createElement("div");
@@ -6947,7 +7240,7 @@ function initComty(options = {}) {
           setSession(session.comments ? session.mode : "browse", { entry: sessionEntry, renderComments: true });
           return renderComments(cachedComments, { retry: false });
         },
-        setCanWrite(value) { canWrite = value; },
+        setCanWrite(value) { canWrite = value; canManage = value; },
         invalidate() { anchorRevision += 1; },
       });
     }