glitchgrab 1.52.0 → 1.53.0

package/dist/index.mjs

@@ -783,9 +783,9 @@ function topStackFrame(stack) {
   if (!stack) return "";
   const lines = stack.split("\n");
   for (const line of lines) {
-    const t2 = line.trim();
-    if (t2.startsWith("at ") || t2.includes("@")) {
-      return t2;
+    const t = line.trim();
+    if (t.startsWith("at ") || t.includes("@")) {
+      return t;
     }
   }
   return "";
@@ -1590,8 +1590,8 @@ function renderBlocks(lines, theme, key) {
       const body = [];
       i++;
       while (i < lines.length) {
-        const t2 = lines[i].trim();
-        if (t2.length >= fence.length && [...t2].every((c) => c === fence[0])) break;
+        const t = lines[i].trim();
+        if (t.length >= fence.length && [...t].every((c) => c === fence[0])) break;
         body.push(lines[i]);
         i++;
       }
@@ -1834,8 +1834,8 @@ var STARTERS = [
 ];
 var CONFIRM_OPTION = "Yes, that's it";
 function isCheckBackQuestion(text) {
-  const t2 = text.trim();
-  return /^so,? you['’]?re saying\b/i.test(t2) || /\b(is that right|is that correct|did i get (that|it) right|have i got (that|it) right)\s*\??\s*$/i.test(t2);
+  const t = text.trim();
+  return /^so,? you['’]?re saying\b/i.test(t) || /\b(is that right|is that correct|did i get (that|it) right|have i got (that|it) right)\s*\??\s*$/i.test(t);
 }
 function isAffirmativeReply(text) {
   return /^(y|ya|yah|yes|yess|yeah|yep|yup|ok|okay|sure|correct|right|exactly|confirm(ed)?|that['’]?s (it|right|correct)|yes,? that['’]?s (it|right)|haan|han|ha|ho|hmm yes|👍)[\s.!👍]*$/i.test(
@@ -1871,8 +1871,8 @@ function Sparkle({ color, size = 14 }) {
 }
 function Avatar({
   who,
-  theme: t2,
-  initials
+  theme: t,
+  initials: initials2
 }) {
   const isAi = who === "assistant";
   return /* @__PURE__ */ jsx3(
@@ -1888,13 +1888,13 @@ function Avatar({
         alignItems: "center",
         justifyContent: "center",
         marginTop: "2px",
-        backgroundColor: isAi ? `${t2.accent}22` : t2.bgSecondary,
-        border: `1px solid ${isAi ? t2.accent : t2.inputBorder}`,
-        color: isAi ? t2.accent : t2.textMuted,
+        backgroundColor: isAi ? `${t.accent}22` : t.bgSecondary,
+        border: `1px solid ${isAi ? t.accent : t.inputBorder}`,
+        color: isAi ? t.accent : t.textMuted,
         fontSize: "10px",
         fontWeight: 700
       },
-      children: isAi ? /* @__PURE__ */ jsx3(Sparkle, { color: t2.accent, size: 12 }) : initials ? initials : /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+      children: isAi ? /* @__PURE__ */ jsx3(Sparkle, { color: t.accent, size: 12 }) : initials2 ? initials2 : /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "8", r: "3.4", stroke: "currentColor", strokeWidth: "1.8" }),
         /* @__PURE__ */ jsx3(
           "path",
@@ -1911,7 +1911,7 @@ function Avatar({
 }
 function AssistSheet({
   assist,
-  theme: t2,
+  theme: t,
   screenshots,
   pageShot = null,
   onAddFiles,
@@ -2193,20 +2193,20 @@ function AssistSheet({
           minWidth: 0
         },
         children: [
-          /* @__PURE__ */ jsx3("span", { style: { color: t2.text, fontWeight: 600 }, children: duplicate.kind === "related" ? title ? "Your request goes onto this issue" : `Connected to #${duplicate.number}` : title ? "Our team is already on this" : `Our team is already on #${duplicate.number}` }),
-          title && /* @__PURE__ */ jsxs3("span", { style: { color: t2.textMuted, wordBreak: "break-word" }, children: [
+          /* @__PURE__ */ jsx3("span", { style: { color: t.text, fontWeight: 600 }, children: duplicate.kind === "related" ? title ? "Your request goes onto this issue" : `Connected to #${duplicate.number}` : title ? "Our team is already on this" : `Our team is already on #${duplicate.number}` }),
+          title && /* @__PURE__ */ jsxs3("span", { style: { color: t.textMuted, wordBreak: "break-word" }, children: [
             "#",
             duplicate.number,
             " ",
             duplicate.title
           ] }),
-          duplicate.status && duplicate.kind !== "related" && /* @__PURE__ */ jsx3("span", { style: { color: t2.text, fontWeight: 600 }, children: duplicate.status }),
-          footer && /* @__PURE__ */ jsx3("span", { style: { color: t2.textMuted }, children: duplicate.kind === "related" ? "Added as a separate request on it, not a repeat \u2014 the team sees both." : footer })
+          duplicate.status && duplicate.kind !== "related" && /* @__PURE__ */ jsx3("span", { style: { color: t.text, fontWeight: 600 }, children: duplicate.status }),
+          footer && /* @__PURE__ */ jsx3("span", { style: { color: t.textMuted }, children: duplicate.kind === "related" ? "Added as a separate request on it, not a repeat \u2014 the team sees both." : footer })
         ]
       }
     );
   }
-  const initials = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
+  const initials2 = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
     var _a, _b;
     return (_b = (_a = w[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
   }).join("");
@@ -2220,7 +2220,7 @@ function AssistSheet({
     width: "440px",
     maxWidth: "100%",
     height: "100dvh",
-    borderLeft: `1px solid ${t2.border}`,
+    borderLeft: `1px solid ${t.border}`,
     animation: "gg-sheet-in .22s cubic-bezier(.2,.8,.2,1)"
   };
   return createPortal(
@@ -2267,8 +2267,8 @@ function AssistSheet({
                 minWidth: 0,
                 maxWidth: "100%",
                 boxSizing: "border-box",
-                backgroundColor: t2.bg,
-                color: t2.text,
+                backgroundColor: t.bg,
+                color: t.text,
                 boxShadow: "0 20px 60px rgba(0,0,0,.35)",
                 overflow: "hidden",
                 isolation: "isolate"
@@ -2281,7 +2281,7 @@ function AssistSheet({
                     style: {
                       flexShrink: 0,
                       padding: "14px 16px",
-                      borderBottom: `1px solid ${t2.border}`,
+                      borderBottom: `1px solid ${t.border}`,
                       display: "flex",
                       alignItems: "flex-start",
                       justifyContent: "space-between",
@@ -2301,7 +2301,7 @@ function AssistSheet({
                               fontWeight: 600
                             },
                             children: [
-                              /* @__PURE__ */ jsx3(Sparkle, { color: t2.accent }),
+                              /* @__PURE__ */ jsx3(Sparkle, { color: t.accent }),
                               "Describe it with AI",
                               /* @__PURE__ */ jsx3(
                                 "span",
@@ -2311,8 +2311,8 @@ function AssistSheet({
                                     fontWeight: 600,
                                     letterSpacing: ".04em",
                                     textTransform: "uppercase",
-                                    color: t2.accent,
-                                    border: `1px solid ${t2.accent}55`,
+                                    color: t.accent,
+                                    border: `1px solid ${t.accent}55`,
                                     borderRadius: "4px",
                                     padding: "1px 5px"
                                   },
@@ -2322,7 +2322,7 @@ function AssistSheet({
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs3("div", { style: { fontSize: "11.5px", color: t2.textMuted, marginTop: "3px" }, children: [
+                        /* @__PURE__ */ jsxs3("div", { style: { fontSize: "11.5px", color: t.textMuted, marginTop: "3px" }, children: [
                           phase === "type" ? null : reportTypeLabel,
                           phase !== "type" && severityAsked && severity ? ` \xB7 ${SEVERITY_LABELS[severity]}` : null,
                           projectSlot ? /* @__PURE__ */ jsx3("span", { style: { marginLeft: "6px" }, children: projectSlot }) : null
@@ -2337,10 +2337,10 @@ function AssistSheet({
                           "aria-label": "Write it myself instead",
                           style: {
                             flexShrink: 0,
-                            border: `1px solid ${t2.inputBorder}`,
+                            border: `1px solid ${t.inputBorder}`,
                             borderRadius: "999px",
                             background: "transparent",
-                            color: t2.textMuted,
+                            color: t.textMuted,
                             cursor: "pointer",
                             fontSize: "11.5px",
                             lineHeight: 1,
@@ -2380,14 +2380,14 @@ function AssistSheet({
                         children: [
                           phase === "type" && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
                             /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                               /* @__PURE__ */ jsxs3(
                                 "div",
                                 {
                                   style: {
                                     padding: "9px 12px",
                                     borderRadius: "12px 12px 12px 4px",
-                                    backgroundColor: t2.bgSecondary,
+                                    backgroundColor: t.bgSecondary,
                                     fontSize: "13px",
                                     lineHeight: 1.55,
                                     maxWidth: "88%"
@@ -2424,9 +2424,9 @@ function AssistSheet({
                                         // The rating is the only tile that isn't a report, so
                                         // it wears the star colour the dialog's hero row uses
                                         // rather than hiding among the report types.
-                                        border: `1px solid ${rate ? "rgba(245,158,11,0.5)" : t2.inputBorder}`,
+                                        border: `1px solid ${rate ? "rgba(245,158,11,0.5)" : t.inputBorder}`,
                                         background: rate ? "rgba(245,158,11,0.08)" : "transparent",
-                                        color: rate ? "#f59e0b" : t2.textMuted,
+                                        color: rate ? "#f59e0b" : t.textMuted,
                                         borderRadius: "999px",
                                         // 8px vertical keeps the tap target at ~32px.
                                         padding: "8px 12px",
@@ -2445,14 +2445,14 @@ function AssistSheet({
                           ] }),
                           phase === "severity" && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
                             /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                               /* @__PURE__ */ jsx3(
                                 "div",
                                 {
                                   style: {
                                     padding: "9px 12px",
                                     borderRadius: "12px 12px 12px 4px",
-                                    backgroundColor: t2.bgSecondary,
+                                    backgroundColor: t.bgSecondary,
                                     fontSize: "13px",
                                     lineHeight: 1.55,
                                     maxWidth: "88%"
@@ -2482,9 +2482,9 @@ function AssistSheet({
                                     "data-gg-severity": s,
                                     onClick: () => answerSeverity(s),
                                     style: {
-                                      border: `1px solid ${t2.inputBorder}`,
+                                      border: `1px solid ${t.inputBorder}`,
                                       background: "transparent",
-                                      color: t2.textMuted,
+                                      color: t.textMuted,
                                       borderRadius: "999px",
                                       // Same as the picker and option chips — one chip size.
                                       padding: "8px 12px",
@@ -2501,14 +2501,14 @@ function AssistSheet({
                           ] }),
                           phase === "rating" && !submitted && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
                             /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                               /* @__PURE__ */ jsx3(
                                 "div",
                                 {
                                   style: {
                                     padding: "9px 12px",
                                     borderRadius: "12px 12px 12px 4px",
-                                    backgroundColor: t2.bgSecondary,
+                                    backgroundColor: t.bgSecondary,
                                     fontSize: "13px",
                                     lineHeight: 1.55,
                                     maxWidth: "88%"
@@ -2554,7 +2554,7 @@ function AssistSheet({
                                           {
                                             d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
                                             fill: filled ? "#f59e0b" : "transparent",
-                                            stroke: filled ? "#f59e0b" : t2.inputBorder,
+                                            stroke: filled ? "#f59e0b" : t.inputBorder,
                                             strokeWidth: "1.5",
                                             strokeLinejoin: "round"
                                           }
@@ -2574,9 +2574,9 @@ function AssistSheet({
                                         width: "100%",
                                         padding: "10px",
                                         borderRadius: "8px",
-                                        border: `1px solid ${t2.inputBorder}`,
-                                        backgroundColor: t2.inputBg,
-                                        color: t2.text,
+                                        border: `1px solid ${t.inputBorder}`,
+                                        backgroundColor: t.inputBg,
+                                        color: t.text,
                                         fontSize: "13px",
                                         lineHeight: 1.5,
                                         fontFamily: "inherit",
@@ -2595,7 +2595,7 @@ function AssistSheet({
                                         alignSelf: "flex-start",
                                         border: "none",
                                         background: "transparent",
-                                        color: t2.textMuted,
+                                        color: t.textMuted,
                                         fontSize: "12px",
                                         fontFamily: "inherit",
                                         // A bare text link is ~14px tall — half a thumb.
@@ -2612,14 +2612,14 @@ function AssistSheet({
                           ] }),
                           empty && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
                             /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                               /* @__PURE__ */ jsxs3(
                                 "div",
                                 {
                                   style: {
                                     padding: "9px 12px",
                                     borderRadius: "12px 12px 12px 4px",
-                                    backgroundColor: t2.bgSecondary,
+                                    backgroundColor: t.bgSecondary,
                                     fontSize: "13px",
                                     lineHeight: 1.55,
                                     maxWidth: "88%"
@@ -2650,9 +2650,9 @@ function AssistSheet({
                                       send(s);
                                     },
                                     style: {
-                                      border: `1px solid ${t2.inputBorder}`,
+                                      border: `1px solid ${t.inputBorder}`,
                                       background: "transparent",
-                                      color: t2.textMuted,
+                                      color: t.textMuted,
                                       borderRadius: "999px",
                                       padding: "6px 11px",
                                       fontSize: "12px",
@@ -2671,7 +2671,7 @@ function AssistSheet({
                             if (m.kind === "report") {
                               const live = phase === "draft" && i === messages.length - 1;
                               return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px", minWidth: 0 }, children: [
-                                /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                                /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                                 /* @__PURE__ */ jsx3(
                                   "div",
                                   {
@@ -2683,9 +2683,9 @@ function AssistSheet({
                                       borderRadius: "12px 12px 12px 4px",
                                       fontSize: "13px",
                                       lineHeight: 1.55,
-                                      backgroundColor: t2.bgSecondary,
-                                      color: t2.text,
-                                      border: live ? "none" : `1px solid ${t2.accent}66`
+                                      backgroundColor: t.bgSecondary,
+                                      color: t.text,
+                                      border: live ? "none" : `1px solid ${t.accent}66`
                                     },
                                     children: live ? (
                                       // #402: "have a read" beside a countdown reads as a
@@ -2701,7 +2701,7 @@ function AssistSheet({
                                             fontWeight: 700,
                                             letterSpacing: ".06em",
                                             textTransform: "uppercase",
-                                            color: t2.accent,
+                                            color: t.accent,
                                             marginBottom: "4px"
                                           },
                                           children: "Draft so far"
@@ -2716,7 +2716,7 @@ function AssistSheet({
                                             wordBreak: "break-word",
                                             maxHeight: "160px",
                                             overflowY: "auto",
-                                            color: t2.textMuted
+                                            color: t.textMuted
                                           },
                                           children: m.content
                                         }
@@ -2736,7 +2736,7 @@ function AssistSheet({
                                   flexDirection: mine ? "row-reverse" : "row"
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx3(Avatar, { who: m.role, theme: t2, initials }),
+                                  /* @__PURE__ */ jsx3(Avatar, { who: m.role, theme: t, initials: initials2 }),
                                   /* @__PURE__ */ jsx3(
                                     "div",
                                     {
@@ -2750,10 +2750,10 @@ function AssistSheet({
                                         // Markdown owns the assistant's line breaks and lists.
                                         whiteSpace: mine ? "pre-wrap" : "normal",
                                         wordBreak: "break-word",
-                                        backgroundColor: mine ? t2.accent : t2.bgSecondary,
-                                        color: mine ? t2.accentText : t2.text
+                                        backgroundColor: mine ? t.accent : t.bgSecondary,
+                                        color: mine ? t.accentText : t.text
                                       },
-                                      children: mine ? m.content : /* @__PURE__ */ jsx3(ChatMarkdown, { text: m.content, theme: t2 })
+                                      children: mine ? m.content : /* @__PURE__ */ jsx3(ChatMarkdown, { text: m.content, theme: t })
                                     }
                                   )
                                 ]
@@ -2772,14 +2772,14 @@ function AssistSheet({
                                 gap: "8px",
                                 padding: "10px",
                                 borderRadius: "8px",
-                                border: `1px solid ${t2.accent}55`,
-                                backgroundColor: `${t2.accent}14`,
+                                border: `1px solid ${t.accent}55`,
+                                backgroundColor: `${t.accent}14`,
                                 fontSize: "12px",
                                 lineHeight: 1.5
                               },
                               children: [
-                                /* @__PURE__ */ jsx3("span", { style: { color: t2.text, fontWeight: 600 }, children: "This is about Glitchgrab, not this app" }),
-                                /* @__PURE__ */ jsx3("span", { style: { color: t2.textMuted }, children: "It goes to the team that builds this reporter, with your chat attached." }),
+                                /* @__PURE__ */ jsx3("span", { style: { color: t.text, fontWeight: 600 }, children: "This is about Glitchgrab, not this app" }),
+                                /* @__PURE__ */ jsx3("span", { style: { color: t.textMuted }, children: "It goes to the team that builds this reporter, with your chat attached." }),
                                 /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: [
                                   /* @__PURE__ */ jsx3(
                                     "button",
@@ -2797,8 +2797,8 @@ function AssistSheet({
                                         padding: "8px 12px",
                                         borderRadius: "999px",
                                         border: "none",
-                                        backgroundColor: t2.accent,
-                                        color: t2.accentText,
+                                        backgroundColor: t.accent,
+                                        color: t.accentText,
                                         fontSize: "12px",
                                         fontWeight: 700,
                                         fontFamily: "inherit",
@@ -2822,9 +2822,9 @@ function AssistSheet({
                                       style: {
                                         padding: "8px 12px",
                                         borderRadius: "999px",
-                                        border: `1px solid ${t2.inputBorder}`,
+                                        border: `1px solid ${t.inputBorder}`,
                                         background: "transparent",
-                                        color: t2.textMuted,
+                                        color: t.textMuted,
                                         fontSize: "12px",
                                         fontFamily: "inherit",
                                         cursor: "pointer",
@@ -2863,9 +2863,9 @@ function AssistSheet({
                                     send(option, option === CONFIRM_OPTION);
                                   },
                                   style: {
-                                    border: `1px solid ${t2.inputBorder}`,
+                                    border: `1px solid ${t.inputBorder}`,
                                     background: "transparent",
-                                    color: t2.textMuted,
+                                    color: t.textMuted,
                                     borderRadius: "999px",
                                     // Same 8px as the picker chips — one tap target size in
                                     // this sheet, not two.
@@ -2882,7 +2882,7 @@ function AssistSheet({
                             }
                           ),
                           busy && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, role: "status", "aria-label": "Thinking", children: [
-                            /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                            /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                             /* @__PURE__ */ jsx3(
                               "span",
                               {
@@ -2892,7 +2892,7 @@ function AssistSheet({
                                   gap: "4px",
                                   padding: "12px",
                                   borderRadius: "12px 12px 12px 4px",
-                                  backgroundColor: t2.bgSecondary
+                                  backgroundColor: t.bgSecondary
                                 },
                                 children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx3(
                                   "span",
@@ -2901,7 +2901,7 @@ function AssistSheet({
                                       width: "5px",
                                       height: "5px",
                                       borderRadius: "50%",
-                                      backgroundColor: t2.textMuted,
+                                      backgroundColor: t.textMuted,
                                       animation: `gg-dot 1.1s ease-in-out ${i * 0.15}s infinite`
                                     }
                                   },
@@ -2914,9 +2914,9 @@ function AssistSheet({
                             "div",
                             {
                               style: {
-                                border: `1px solid ${t2.accent}`,
+                                border: `1px solid ${t.accent}`,
                                 borderRadius: "12px",
-                                backgroundColor: t2.bgSecondary,
+                                backgroundColor: t.bgSecondary,
                                 padding: "12px",
                                 display: "flex",
                                 flexDirection: "column",
@@ -2933,7 +2933,7 @@ function AssistSheet({
                                       fontWeight: 700,
                                       letterSpacing: ".06em",
                                       textTransform: "uppercase",
-                                      color: t2.accent
+                                      color: t.accent
                                     },
                                     children: duplicate ? `What we'll add to #${duplicate.number}${duplicate.kind === "related" ? " as a related request" : ""} \xB7 edit anything` : "Your report \xB7 edit anything"
                                   }
@@ -2957,9 +2957,9 @@ function AssistSheet({
                                       minHeight: "120px",
                                       padding: "10px",
                                       borderRadius: "8px",
-                                      border: `1px solid ${t2.inputBorder}`,
-                                      backgroundColor: t2.inputBg,
-                                      color: t2.text,
+                                      border: `1px solid ${t.inputBorder}`,
+                                      backgroundColor: t.inputBg,
+                                      color: t.text,
                                       fontSize: "13px",
                                       lineHeight: 1.55,
                                       fontFamily: "inherit",
@@ -2975,7 +2975,7 @@ function AssistSheet({
                                     {
                                       style: {
                                         fontSize: "11.5px",
-                                        color: t2.textMuted,
+                                        color: t.textMuted,
                                         display: "block",
                                         marginBottom: "6px"
                                       },
@@ -2987,7 +2987,7 @@ function AssistSheet({
                                             style: {
                                               marginLeft: "6px",
                                               fontSize: "11px",
-                                              color: severityRefused ? "#ef4444" : t2.textMuted
+                                              color: severityRefused ? "#ef4444" : t.textMuted
                                             },
                                             children: "\xB7 required"
                                           }
@@ -3015,9 +3015,9 @@ function AssistSheet({
                                               minWidth: 0,
                                               padding: "8px 2px",
                                               borderRadius: "8px",
-                                              border: `1px solid ${on ? t2.accent : severityRefused ? "#ef4444" : t2.inputBorder}`,
-                                              backgroundColor: on ? t2.accent : "transparent",
-                                              color: on ? t2.accentText : t2.textMuted,
+                                              border: `1px solid ${on ? t.accent : severityRefused ? "#ef4444" : t.inputBorder}`,
+                                              backgroundColor: on ? t.accent : "transparent",
+                                              color: on ? t.accentText : t.textMuted,
                                               fontSize: "12px",
                                               fontWeight: 600,
                                               fontFamily: "inherit",
@@ -3034,7 +3034,7 @@ function AssistSheet({
                                     }
                                   )
                                 ] }),
-                                attachmentCount > 0 && /* @__PURE__ */ jsxs3("span", { style: { fontSize: "11.5px", color: t2.textMuted }, children: [
+                                attachmentCount > 0 && /* @__PURE__ */ jsxs3("span", { style: { fontSize: "11.5px", color: t.textMuted }, children: [
                                   attachmentCount,
                                   " ",
                                   attachmentCount === 1 ? "attachment" : "attachments",
@@ -3045,14 +3045,14 @@ function AssistSheet({
                           ),
                           phase === "solved" && solved && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
                             /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t2 }),
+                              /* @__PURE__ */ jsx3(Avatar, { who: "assistant", theme: t }),
                               /* @__PURE__ */ jsx3(
                                 "div",
                                 {
                                   style: {
                                     padding: "9px 12px",
                                     borderRadius: "12px 12px 12px 4px",
-                                    backgroundColor: t2.bgSecondary,
+                                    backgroundColor: t.bgSecondary,
                                     fontSize: "13px",
                                     lineHeight: 1.55,
                                     maxWidth: "88%",
@@ -3065,7 +3065,7 @@ function AssistSheet({
                             /* @__PURE__ */ jsx3(
                               "span",
                               {
-                                style: { fontSize: "11.5px", color: t2.textMuted, paddingLeft: "32px" },
+                                style: { fontSize: "11.5px", color: t.textMuted, paddingLeft: "32px" },
                                 children: "Nothing was filed \u2014 you are all set."
                               }
                             )
@@ -3076,7 +3076,7 @@ function AssistSheet({
                               style: {
                                 textAlign: "center",
                                 padding: "24px 0",
-                                color: t2.accent,
+                                color: t.accent,
                                 fontSize: "14px",
                                 fontWeight: 600
                               },
@@ -3096,10 +3096,10 @@ function AssistSheet({
                   {
                     style: {
                       flexShrink: 0,
-                      borderTop: `1px solid ${t2.border}`,
+                      borderTop: `1px solid ${t.border}`,
                       padding: "12px 16px",
                       paddingBottom: narrow ? "max(12px, env(safe-area-inset-bottom))" : "12px",
-                      backgroundColor: t2.bg
+                      backgroundColor: t.bg
                     },
                     children: [
                       phase === "solved" ? /* @__PURE__ */ jsx3(
@@ -3113,8 +3113,8 @@ function AssistSheet({
                             padding: "12px",
                             borderRadius: "10px",
                             border: "none",
-                            backgroundColor: t2.accent,
-                            color: t2.accentText,
+                            backgroundColor: t.accent,
+                            color: t.accentText,
                             fontSize: "14px",
                             fontWeight: 700,
                             fontFamily: "inherit",
@@ -3134,8 +3134,8 @@ function AssistSheet({
                             padding: "12px",
                             borderRadius: "10px",
                             border: "none",
-                            backgroundColor: isSubmitting || rating < 1 ? t2.bgSecondary : "#f59e0b",
-                            color: isSubmitting || rating < 1 ? t2.textMuted : "#1a1a1a",
+                            backgroundColor: isSubmitting || rating < 1 ? t.bgSecondary : "#f59e0b",
+                            color: isSubmitting || rating < 1 ? t.textMuted : "#1a1a1a",
                             fontSize: "14px",
                             fontWeight: 700,
                             fontFamily: "inherit",
@@ -3184,7 +3184,7 @@ function AssistSheet({
                                               height: "100%",
                                               objectFit: "cover",
                                               borderRadius: "8px",
-                                              border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
+                                              border: `1px solid ${read ? t.accent : t.inputBorder}`,
                                               opacity: read ? 1 : 0.45,
                                               boxSizing: "border-box"
                                             }
@@ -3229,7 +3229,7 @@ function AssistSheet({
                                                   height: "20px",
                                                   boxSizing: "border-box",
                                                   borderRadius: "50%",
-                                                  border: `2px solid ${t2.bg}`,
+                                                  border: `2px solid ${t.bg}`,
                                                   background: "#ef4444",
                                                   color: "#fff",
                                                   display: "flex",
@@ -3272,7 +3272,7 @@ function AssistSheet({
                                         gap: "6px",
                                         padding: "0 10px",
                                         borderRadius: "8px",
-                                        border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
+                                        border: `1px solid ${read ? t.accent : t.inputBorder}`,
                                         opacity: read ? 1 : 0.55,
                                         boxSizing: "border-box",
                                         flexShrink: 0
@@ -3282,7 +3282,7 @@ function AssistSheet({
                                           "path",
                                           {
                                             d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6",
-                                            stroke: t2.textMuted,
+                                            stroke: t.textMuted,
                                             strokeWidth: "1.5",
                                             strokeLinecap: "round",
                                             strokeLinejoin: "round"
@@ -3293,7 +3293,7 @@ function AssistSheet({
                                           {
                                             style: {
                                               fontSize: "11.5px",
-                                              color: t2.text,
+                                              color: t.text,
                                               overflow: "hidden",
                                               textOverflow: "ellipsis",
                                               whiteSpace: "nowrap"
@@ -3337,7 +3337,7 @@ function AssistSheet({
                                                   height: "20px",
                                                   boxSizing: "border-box",
                                                   borderRadius: "50%",
-                                                  border: `2px solid ${t2.bg}`,
+                                                  border: `2px solid ${t.bg}`,
                                                   background: "#ef4444",
                                                   color: "#fff",
                                                   display: "flex",
@@ -3371,11 +3371,11 @@ function AssistSheet({
                                       width: "40px",
                                       height: "40px",
                                       borderRadius: "8px",
-                                      border: `1px dashed ${t2.inputBorder}`,
+                                      border: `1px dashed ${t.inputBorder}`,
                                       display: "inline-flex",
                                       alignItems: "center",
                                       justifyContent: "center",
-                                      color: t2.textMuted,
+                                      color: t.textMuted,
                                       fontSize: "18px",
                                       cursor: "pointer",
                                       flexShrink: 0
@@ -3408,7 +3408,7 @@ function AssistSheet({
                                     ]
                                   }
                                 ),
-                                readShots.size < screenshots.length && /* @__PURE__ */ jsxs3("span", { style: { color: t2.textMuted, fontSize: "11px" }, children: [
+                                readShots.size < screenshots.length && /* @__PURE__ */ jsxs3("span", { style: { color: t.textMuted, fontSize: "11px" }, children: [
                                   readShots.size,
                                   " of ",
                                   screenshots.length,
@@ -3442,9 +3442,9 @@ function AssistSheet({
                                   maxHeight: "120px",
                                   padding: "11px 12px",
                                   borderRadius: "10px",
-                                  border: `1px solid ${t2.inputBorder}`,
-                                  backgroundColor: t2.inputBg,
-                                  color: t2.text,
+                                  border: `1px solid ${t.inputBorder}`,
+                                  backgroundColor: t.inputBg,
+                                  color: t.text,
                                   fontSize: "13px",
                                   lineHeight: 1.4,
                                   fontFamily: "inherit",
@@ -3472,8 +3472,8 @@ function AssistSheet({
                                   display: "inline-flex",
                                   alignItems: "center",
                                   justifyContent: "center",
-                                  backgroundColor: busy || !input.trim() ? t2.bgSecondary : t2.accent,
-                                  color: busy || !input.trim() ? t2.textMuted : t2.accentText,
+                                  backgroundColor: busy || !input.trim() ? t.bgSecondary : t.accent,
+                                  color: busy || !input.trim() ? t.textMuted : t.accentText,
                                   cursor: busy || !input.trim() ? "default" : "pointer"
                                 },
                                 children: /* @__PURE__ */ jsx3("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
@@ -3520,8 +3520,8 @@ function AssistSheet({
                                       padding: "12px",
                                       borderRadius: "10px",
                                       border: "none",
-                                      backgroundColor: t2.accent,
-                                      color: t2.accentText,
+                                      backgroundColor: t.accent,
+                                      color: t.accentText,
                                       fontSize: "14px",
                                       fontWeight: 700,
                                       fontFamily: "inherit",
@@ -3561,9 +3561,9 @@ function AssistSheet({
                                       flexShrink: 0,
                                       width: "44px",
                                       borderRadius: "10px",
-                                      border: `1px solid ${t2.inputBorder}`,
+                                      border: `1px solid ${t.inputBorder}`,
                                       background: "transparent",
-                                      color: t2.text,
+                                      color: t.text,
                                       display: "inline-flex",
                                       alignItems: "center",
                                       justifyContent: "center",
@@ -3594,8 +3594,8 @@ function AssistSheet({
                                   padding: "12px",
                                   borderRadius: "10px",
                                   border: "none",
-                                  backgroundColor: isSubmitting || !description.trim() ? t2.bgSecondary : t2.accent,
-                                  color: isSubmitting || !description.trim() ? t2.textMuted : t2.accentText,
+                                  backgroundColor: isSubmitting || !description.trim() ? t.bgSecondary : t.accent,
+                                  color: isSubmitting || !description.trim() ? t.textMuted : t.accentText,
                                   fontSize: "14px",
                                   fontWeight: 700,
                                   fontFamily: "inherit",
@@ -3618,7 +3618,7 @@ function AssistSheet({
                             margin: "8px auto 0",
                             border: "none",
                             background: "transparent",
-                            color: t2.textMuted,
+                            color: t.textMuted,
                             fontSize: "11.5px",
                             fontFamily: "inherit",
                             padding: "6px 8px",
@@ -3640,7 +3640,7 @@ function AssistSheet({
                             margin: "-2px auto -8px",
                             border: "none",
                             background: "transparent",
-                            color: t2.textMuted,
+                            color: t.textMuted,
                             fontSize: "11.5px",
                             fontFamily: "inherit",
                             padding: "10px 8px",
@@ -3677,7 +3677,7 @@ function describeSentAlong(hasChat, screenshotCount) {
 }
 function GlitchgrabProblemPanel({
   send,
-  theme: t2,
+  theme: t,
   surface,
   conversationId,
   reportType,
@@ -3766,9 +3766,9 @@ function GlitchgrabProblemPanel({
   const secondaryButton = {
     padding: "10px 14px",
     borderRadius: "8px",
-    border: `1px solid ${t2.inputBorder}`,
+    border: `1px solid ${t.inputBorder}`,
     background: "transparent",
-    color: t2.text,
+    color: t.text,
     fontSize: "13px",
     fontWeight: 600,
     fontFamily: "inherit",
@@ -3778,8 +3778,8 @@ function GlitchgrabProblemPanel({
     padding: "10px 14px",
     borderRadius: "8px",
     border: "none",
-    backgroundColor: enabled ? t2.accent : t2.bgSecondary,
-    color: enabled ? t2.accentText : t2.textMuted,
+    backgroundColor: enabled ? t.accent : t.bgSecondary,
+    color: enabled ? t.accentText : t.textMuted,
     fontSize: "13px",
     fontWeight: 700,
     fontFamily: "inherit",
@@ -3817,16 +3817,16 @@ function GlitchgrabProblemPanel({
               width: "100%",
               maxWidth: "420px",
               boxSizing: "border-box",
-              backgroundColor: t2.bg,
-              color: t2.text,
-              border: `1px solid ${t2.border}`,
+              backgroundColor: t.bg,
+              color: t.text,
+              border: `1px solid ${t.border}`,
               borderRadius: "12px",
               boxShadow: "0 20px 50px rgba(0,0,0,0.5)",
               padding: "18px"
             },
             children: sent ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
               /* @__PURE__ */ jsx4("div", { id: "gg-self-report-title", style: { fontSize: "15px", fontWeight: 600 }, children: "Sent to the Glitchgrab team" }),
-              /* @__PURE__ */ jsx4("p", { style: { margin: "6px 0 16px", fontSize: "13px", lineHeight: 1.5, color: t2.textMuted }, children: "Thanks \u2014 we'll look into it. Your report is still open behind this, exactly as you left it." }),
+              /* @__PURE__ */ jsx4("p", { style: { margin: "6px 0 16px", fontSize: "13px", lineHeight: 1.5, color: t.textMuted }, children: "Thanks \u2014 we'll look into it. Your report is still open behind this, exactly as you left it." }),
               /* @__PURE__ */ jsx4(
                 "button",
                 {
@@ -3858,7 +3858,7 @@ function GlitchgrabProblemPanel({
                         style: {
                           border: "none",
                           background: "transparent",
-                          color: t2.textMuted,
+                          color: t.textMuted,
                           fontSize: "18px",
                           lineHeight: 1,
                           cursor: "pointer",
@@ -3871,7 +3871,7 @@ function GlitchgrabProblemPanel({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx4("p", { style: { margin: "6px 0 12px", fontSize: "13px", lineHeight: 1.5, color: t2.textMuted }, children: "This goes to the people who build this reporter \u2014 not to this project's team. Tell us what went wrong: the AI chat, a button, anything." }),
+              /* @__PURE__ */ jsx4("p", { style: { margin: "6px 0 12px", fontSize: "13px", lineHeight: 1.5, color: t.textMuted }, children: "This goes to the people who build this reporter \u2014 not to this project's team. Tell us what went wrong: the AI chat, a button, anything." }),
               /* @__PURE__ */ jsx4(
                 "textarea",
                 {
@@ -3896,9 +3896,9 @@ function GlitchgrabProblemPanel({
                     resize: "vertical",
                     padding: "10px 12px",
                     borderRadius: "8px",
-                    border: `1px solid ${t2.inputBorder}`,
-                    backgroundColor: t2.inputBg,
-                    color: t2.text,
+                    border: `1px solid ${t.inputBorder}`,
+                    backgroundColor: t.inputBg,
+                    color: t.text,
                     fontSize: "14px",
                     lineHeight: 1.45,
                     fontFamily: "inherit",
@@ -3931,7 +3931,7 @@ function GlitchgrabProblemPanel({
                             display: "block",
                             boxSizing: "border-box",
                             borderRadius: "8px",
-                            border: `1px solid ${t2.inputBorder}`
+                            border: `1px solid ${t.inputBorder}`
                           }
                         }
                       ),
@@ -3967,7 +3967,7 @@ function GlitchgrabProblemPanel({
                                 height: "20px",
                                 boxSizing: "border-box",
                                 borderRadius: "50%",
-                                border: `2px solid ${t2.bg}`,
+                                border: `2px solid ${t.bg}`,
                                 background: "#ef4444",
                                 color: "#fff",
                                 display: "flex",
@@ -4004,9 +4004,9 @@ function GlitchgrabProblemPanel({
                           padding: "0 12px",
                           boxSizing: "border-box",
                           borderRadius: "8px",
-                          border: `1px dashed ${t2.inputBorder}`,
+                          border: `1px dashed ${t.inputBorder}`,
                           background: "transparent",
-                          color: t2.textMuted,
+                          color: t.textMuted,
                           fontSize: "12.5px",
                           fontWeight: 600,
                           fontFamily: "inherit",
@@ -4038,7 +4038,7 @@ function GlitchgrabProblemPanel({
                 "p",
                 {
                   "data-gg-self-report-includes": "",
-                  style: { margin: "8px 0 0", fontSize: "11.5px", lineHeight: 1.45, color: t2.textMuted },
+                  style: { margin: "8px 0 0", fontSize: "11.5px", lineHeight: 1.45, color: t.textMuted },
                   children: [
                     "Also sent, so we can see what happened:",
                     " ",
@@ -4224,29 +4224,6 @@ function captureDefaultScreenshot(options) {
   });
   return inFlight;
 }
-var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
-var SHOT_WAIT_MS = 3e3;
-var SIMILAR_WAIT_MS = 2500;
-var MAX_SIMILAR_SHOWN = 3;
-function ButtonSpinner() {
-  return /* @__PURE__ */ jsx5(
-    "span",
-    {
-      "aria-hidden": "true",
-      style: {
-        display: "inline-block",
-        width: "11px",
-        height: "11px",
-        marginRight: "6px",
-        verticalAlign: "-1px",
-        border: "2px solid currentColor",
-        borderRightColor: "transparent",
-        borderRadius: "50%",
-        animation: "gg-spin .7s linear infinite"
-      }
-    }
-  );
-}
 function detectDark() {
   if (typeof window === "undefined") return true;
   try {
@@ -4359,6 +4336,29 @@ function detectHostAccent() {
     return null;
   }
 }
+var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
+var SHOT_WAIT_MS = 3e3;
+var SIMILAR_WAIT_MS = 2500;
+var MAX_SIMILAR_SHOWN = 3;
+function ButtonSpinner() {
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        display: "inline-block",
+        width: "11px",
+        height: "11px",
+        marginRight: "6px",
+        verticalAlign: "-1px",
+        border: "2px solid currentColor",
+        borderRightColor: "transparent",
+        borderRadius: "50%",
+        animation: "gg-spin .7s linear infinite"
+      }
+    }
+  );
+}
 function initialsOf(name) {
   return name.trim().split(/\s+/).slice(0, 2).map((part) => {
     var _a, _b;
@@ -4367,7 +4367,7 @@ function initialsOf(name) {
 }
 function ReporterChip({
   reporter,
-  t: t2
+  t
 }) {
   var _a;
   const [avatarFailed, setAvatarFailed] = useState4(false);
@@ -4377,7 +4377,7 @@ function ReporterChip({
   }, [avatarUrl]);
   const name = ((_a = reporter == null ? void 0 : reporter.name) == null ? void 0 : _a.trim()) || "";
   const isAnonymous = !name;
-  const initials = isAnonymous ? "" : initialsOf(name);
+  const initials2 = isAnonymous ? "" : initialsOf(name);
   const label = isAnonymous ? "Anonymous" : name;
   const title = isAnonymous ? "No reporter identity was passed to Glitchgrab \u2014 this report won't be attributed to anyone" : [name, reporter == null ? void 0 : reporter.email, reporter == null ? void 0 : reporter.role].filter(Boolean).join(" \xB7 ");
   const showAvatarImage = !!avatarUrl && !avatarFailed;
@@ -4403,9 +4403,9 @@ function ReporterChip({
               fontSize: "8px",
               fontWeight: 700,
               letterSpacing: "0.02em",
-              background: isAnonymous ? t2.inputBg : t2.accent,
-              color: isAnonymous ? t2.textMuted : t2.accentText,
-              border: `1px solid ${isAnonymous ? t2.inputBorder : "transparent"}`
+              background: isAnonymous ? t.inputBg : t.accent,
+              color: isAnonymous ? t.textMuted : t.accentText,
+              border: `1px solid ${isAnonymous ? t.inputBorder : "transparent"}`
             },
             children: showAvatarImage ? /* @__PURE__ */ jsx5(
               "img",
@@ -4417,7 +4417,7 @@ function ReporterChip({
                 onError: () => setAvatarFailed(true),
                 style: { width: "100%", height: "100%", objectFit: "cover" }
               }
-            ) : initials ? initials : /* @__PURE__ */ jsxs5("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
+            ) : initials2 ? initials2 : /* @__PURE__ */ jsxs5("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
               /* @__PURE__ */ jsx5("circle", { cx: "8", cy: "5.5", r: "2.75", stroke: "currentColor", strokeWidth: "1.4" }),
               /* @__PURE__ */ jsx5(
                 "path",
@@ -4436,7 +4436,7 @@ function ReporterChip({
           {
             style: {
               fontSize: "11px",
-              color: t2.textMuted,
+              color: t.textMuted,
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap"
@@ -4734,17 +4734,17 @@ function ReportDialog({
     (_c = tiles[next]) == null ? void 0 : _c.focus();
   };
   const isDark = useMemo2(() => isOpen ? detectDark() : true, [isOpen]);
-  const t2 = getTheme(isDark);
+  const t = getTheme(isDark);
   const layerTheme = {
-    bg: t2.bg,
-    bgSecondary: t2.bgSecondary,
-    border: t2.border,
-    text: t2.text,
-    textMuted: t2.textMuted,
-    inputBg: t2.inputBg,
-    inputBorder: t2.inputBorder,
-    accent: t2.accent,
-    accentText: t2.accentText
+    bg: t.bg,
+    bgSecondary: t.bgSecondary,
+    border: t.border,
+    text: t.text,
+    textMuted: t.textMuted,
+    inputBg: t.inputBg,
+    inputBorder: t.inputBorder,
+    accent: t.accent,
+    accentText: t.accentText
   };
   const canZoomPreview = previewNatural !== null && typeof window !== "undefined" && (previewNatural.w > window.innerWidth - 32 || previewNatural.h > window.innerHeight - 80);
   const handleFileUpload = (e) => {
@@ -4966,7 +4966,7 @@ function ReportDialog({
     sarvamChunksRef.current = [];
     const stream = streamRef.current;
     streamRef.current = null;
-    stream == null ? void 0 : stream.getTracks().forEach((t22) => t22.stop());
+    stream == null ? void 0 : stream.getTracks().forEach((t2) => t2.stop());
     try {
       (_b = mediaRecorderRef.current) == null ? void 0 : _b.stop();
     } catch (e) {
@@ -5068,7 +5068,7 @@ function ReportDialog({
       };
       rec.onstop = async () => {
         var _a3;
-        stream.getTracks().forEach((t22) => t22.stop());
+        stream.getTracks().forEach((t2) => t2.stop());
         if (streamRef.current === stream) streamRef.current = null;
         mediaRecorderRef.current = null;
         const chunks = sarvamChunksRef.current;
@@ -5351,7 +5351,7 @@ function ReportDialog({
           button[data-gg-type]{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
           button[data-gg-type]:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
           button[data-gg-type]:active{transform:translateY(0) scale(.985);box-shadow:none}
-          button[data-gg-type]:focus-visible{outline:2px solid ${t2.accent};outline-offset:2px}
+          button[data-gg-type]:focus-visible{outline:2px solid ${t.accent};outline-offset:2px}
           @keyframes gg-star-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
           button[data-gg-star]{transition:transform .12s ease}
           button[data-gg-star]:hover{transform:scale(1.18)}
@@ -5398,15 +5398,15 @@ function ReportDialog({
                 width: sheet ? "440px" : "420px",
                 maxWidth: sheet ? "100%" : "calc(100% - 32px)",
                 maxHeight: sheet ? "100dvh" : "calc(100dvh - 32px)",
-                ...sheet ? { height: "100dvh", borderLeft: `1px solid ${t2.inputBorder}` } : {},
+                ...sheet ? { height: "100dvh", borderLeft: `1px solid ${t.inputBorder}` } : {},
                 display: "flex",
                 flexDirection: "column",
-                backgroundColor: t2.bg,
+                backgroundColor: t.bg,
                 borderRadius: sheet ? 0 : "12px",
                 boxShadow: sheet ? "0 20px 60px rgba(0, 0, 0, 0.35)" : "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
                 fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
                 overflow: "hidden",
-                color: t2.text,
+                color: t.text,
                 isolation: "isolate"
               },
               children: [
@@ -5416,7 +5416,7 @@ function ReportDialog({
                     style: {
                       flexShrink: 0,
                       padding: "16px 16px 12px",
-                      borderBottom: `1px solid ${t2.border}`
+                      borderBottom: `1px solid ${t.border}`
                     },
                     children: [
                       /* @__PURE__ */ jsxs5(
@@ -5462,7 +5462,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M10 3L5 8L10 13",
-                                              stroke: t2.textMuted,
+                                              stroke: t.textMuted,
                                               strokeWidth: "2",
                                               strokeLinecap: "round",
                                               strokeLinejoin: "round"
@@ -5478,7 +5478,7 @@ function ReportDialog({
                                       style: {
                                         fontSize: "15px",
                                         fontWeight: 600,
-                                        color: t2.text
+                                        color: t.text
                                       },
                                       children: step === 1 ? "What's on your mind?" : "Tell us more"
                                     }
@@ -5505,9 +5505,9 @@ function ReportDialog({
                                         lineHeight: 1,
                                         padding: "3px 6px",
                                         borderRadius: "4px",
-                                        border: `1px solid ${t2.inputBorder}`,
-                                        background: t2.inputBg,
-                                        color: t2.textMuted,
+                                        border: `1px solid ${t.inputBorder}`,
+                                        background: t.inputBg,
+                                        color: t.textMuted,
                                         whiteSpace: "nowrap"
                                       },
                                       children: getShortcutLabel()
@@ -5540,7 +5540,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M4 4L12 12M12 4L4 12",
-                                              stroke: t2.textMuted,
+                                              stroke: t.textMuted,
                                               strokeWidth: "2",
                                               strokeLinecap: "round"
                                             }
@@ -5577,7 +5577,7 @@ function ReportDialog({
                                       width: "8px",
                                       height: "8px",
                                       borderRadius: "50%",
-                                      backgroundColor: s <= step ? t2.accent : t2.inputBorder,
+                                      backgroundColor: s <= step ? t.accent : t.inputBorder,
                                       transition: "background-color 0.2s ease"
                                     }
                                   }
@@ -5588,7 +5588,7 @@ function ReportDialog({
                                     style: {
                                       width: "40px",
                                       height: "2px",
-                                      backgroundColor: s < step ? t2.accent : t2.inputBorder,
+                                      backgroundColor: s < step ? t.accent : t.inputBorder,
                                       transition: "background-color 0.2s ease"
                                     }
                                   }
@@ -5617,7 +5617,7 @@ function ReportDialog({
                         style: {
                           textAlign: "center",
                           padding: "20px 0",
-                          color: t2.accent,
+                          color: t.accent,
                           fontSize: "14px",
                           fontWeight: 500
                         },
@@ -5656,7 +5656,7 @@ function ReportDialog({
                             /* @__PURE__ */ jsx5(
                               "span",
                               {
-                                style: { fontSize: "13px", fontWeight: 600, color: t2.text },
+                                style: { fontSize: "13px", fontWeight: 600, color: t.text },
                                 children: "How are we doing?"
                               }
                             ),
@@ -5710,9 +5710,9 @@ function ReportDialog({
                             marginBottom: "16px"
                           },
                           children: [
-                            /* @__PURE__ */ jsx5("span", { style: { flex: 1, height: "1px", background: t2.border } }),
-                            /* @__PURE__ */ jsx5("span", { style: { fontSize: "11px", color: t2.textMuted }, children: "or report something" }),
-                            /* @__PURE__ */ jsx5("span", { style: { flex: 1, height: "1px", background: t2.border } })
+                            /* @__PURE__ */ jsx5("span", { style: { flex: 1, height: "1px", background: t.border } }),
+                            /* @__PURE__ */ jsx5("span", { style: { fontSize: "11px", color: t.textMuted }, children: "or report something" }),
+                            /* @__PURE__ */ jsx5("span", { style: { flex: 1, height: "1px", background: t.border } })
                           ]
                         }
                       ),
@@ -5725,9 +5725,9 @@ function ReportDialog({
                             gap: "10px",
                             marginBottom: "14px",
                             padding: "8px 10px",
-                            border: `1px solid ${t2.inputBorder}`,
+                            border: `1px solid ${t.inputBorder}`,
                             borderRadius: "8px",
-                            background: t2.inputBg
+                            background: t.inputBg
                           },
                           children: [
                             /* @__PURE__ */ jsx5(
@@ -5740,12 +5740,12 @@ function ReportDialog({
                                   height: "24px",
                                   objectFit: "cover",
                                   borderRadius: "4px",
-                                  border: `1px solid ${t2.border}`,
+                                  border: `1px solid ${t.border}`,
                                   flexShrink: 0
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx5("span", { style: { fontSize: "11px", color: t2.textMuted, flex: 1 }, children: "Screenshot attached" }),
+                            /* @__PURE__ */ jsx5("span", { style: { fontSize: "11px", color: t.textMuted, flex: 1 }, children: "Screenshot attached" }),
                             /* @__PURE__ */ jsx5(
                               "button",
                               {
@@ -5755,7 +5755,7 @@ function ReportDialog({
                                 style: {
                                   border: "none",
                                   background: "transparent",
-                                  color: t2.textMuted,
+                                  color: t.textMuted,
                                   cursor: "pointer",
                                   fontSize: "15px",
                                   lineHeight: 1,
@@ -5794,20 +5794,20 @@ function ReportDialog({
                                 gap: "9px",
                                 padding: "18px 10px",
                                 borderRadius: "8px",
-                                border: `1px solid ${t2.inputBorder}`,
-                                background: t2.inputBg,
+                                border: `1px solid ${t.inputBorder}`,
+                                background: t.inputBg,
                                 cursor: "pointer",
-                                color: t2.text,
+                                color: t.text,
                                 fontFamily: "inherit"
                               },
                               onMouseEnter: (e) => {
-                                e.currentTarget.style.borderColor = t2.accent;
+                                e.currentTarget.style.borderColor = t.accent;
                               },
                               onMouseLeave: (e) => {
-                                e.currentTarget.style.borderColor = t2.inputBorder;
+                                e.currentTarget.style.borderColor = t.inputBorder;
                               },
                               children: [
-                                getTypeIcon(type, t2.accent, 22),
+                                getTypeIcon(type, t.accent, 22),
                                 /* @__PURE__ */ jsx5(
                                   "span",
                                   {
@@ -5840,18 +5840,18 @@ function ReportDialog({
                               marginBottom: "10px",
                               padding: "4px 10px 4px 8px",
                               borderRadius: "999px",
-                              border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t2.inputBorder}`,
-                              background: isRating ? "rgba(245,158,11,0.1)" : t2.inputBg,
-                              color: t2.text,
+                              border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t.inputBorder}`,
+                              background: isRating ? "rgba(245,158,11,0.1)" : t.inputBg,
+                              color: t.text,
                               fontSize: "11px",
                               fontWeight: 600,
                               fontFamily: "inherit",
                               cursor: availableTypes.length === 1 ? "default" : "pointer"
                             },
                             children: [
-                              getTypeIcon(reportType, isRating ? "#f59e0b" : t2.accent, 13),
+                              getTypeIcon(reportType, isRating ? "#f59e0b" : t.accent, 13),
                               getTypeLabel(reportType),
-                              availableTypes.length > 1 && /* @__PURE__ */ jsx5("span", { style: { color: t2.textMuted, fontWeight: 400 }, children: "\xB7 change" })
+                              availableTypes.length > 1 && /* @__PURE__ */ jsx5("span", { style: { color: t.textMuted, fontWeight: 400 }, children: "\xB7 change" })
                             ]
                           }
                         ),
@@ -5888,7 +5888,7 @@ function ReportDialog({
                                     {
                                       d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
                                       fill: filled ? "#f59e0b" : "transparent",
-                                      stroke: filled ? "#f59e0b" : t2.inputBorder,
+                                      stroke: filled ? "#f59e0b" : t.inputBorder,
                                       strokeWidth: "1.5",
                                       strokeLinejoin: "round"
                                     }
@@ -5916,9 +5916,9 @@ function ReportDialog({
                               // 8px vertical keeps the tap target at ~32px.
                               padding: "8px 10px",
                               borderRadius: "6px",
-                              border: `1px solid ${t2.accent}`,
+                              border: `1px solid ${t.accent}`,
                               background: "transparent",
-                              color: t2.accent,
+                              color: t.accent,
                               fontSize: "12px",
                               fontWeight: 600,
                               fontFamily: "inherit",
@@ -5930,7 +5930,7 @@ function ReportDialog({
                                 "path",
                                 {
                                   d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
-                                  stroke: t2.accent,
+                                  stroke: t.accent,
                                   strokeWidth: "1.5",
                                   strokeLinejoin: "round"
                                 }
@@ -5960,24 +5960,24 @@ function ReportDialog({
                                 minHeight: "100px",
                                 padding: enhanceText2 ? "28px 12px 36px" : transcribeAudio2 ? "10px 12px 36px" : "10px 12px",
                                 borderRadius: "8px",
-                                border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t2.accent : t2.inputBorder}`,
+                                border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t.accent : t.inputBorder}`,
                                 fontSize: "14px",
                                 fontFamily: "inherit",
                                 resize: "none",
                                 outline: "none",
                                 boxSizing: "border-box",
-                                color: t2.text,
-                                backgroundColor: t2.inputBg,
+                                color: t.text,
+                                backgroundColor: t.inputBg,
                                 transition: "border-color 0.2s ease"
                               },
                               onKeyDown: handleSpaceDown,
                               onKeyUp: handleSpaceUp,
                               onFocus: (e) => {
-                                e.target.style.borderColor = t2.accent;
+                                e.target.style.borderColor = t.accent;
                               },
                               onBlur: (e) => {
                                 if (!isListening && !isTranscribing)
-                                  e.target.style.borderColor = t2.inputBorder;
+                                  e.target.style.borderColor = t.inputBorder;
                               },
                               autoFocus: true
                             }
@@ -6094,13 +6094,13 @@ function ReportDialog({
                                 display: "inline-flex",
                                 alignItems: "center",
                                 gap: "4px",
-                                background: t2.inputBg,
+                                background: t.inputBg,
                                 border: "none",
                                 padding: "2px 6px",
                                 borderRadius: "4px",
                                 fontFamily: "inherit",
                                 fontSize: "11px",
-                                color: t2.textMuted,
+                                color: t.textMuted,
                                 cursor: !description.trim() || isEnhancing ? "default" : "pointer",
                                 opacity: !description.trim() ? 0.5 : 1,
                                 zIndex: 1
@@ -6119,7 +6119,7 @@ function ReportDialog({
                                       "path",
                                       {
                                         d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
-                                        stroke: t2.textMuted,
+                                        stroke: t.textMuted,
                                         strokeWidth: "1.5",
                                         strokeLinejoin: "round"
                                       }
@@ -6148,9 +6148,9 @@ function ReportDialog({
                                 alignItems: "center",
                                 justifyContent: "center",
                                 background: "transparent",
-                                border: `1.5px solid ${isListening ? "#ef4444" : t2.inputBorder}`,
+                                border: `1.5px solid ${isListening ? "#ef4444" : t.inputBorder}`,
                                 borderRadius: "6px",
-                                color: isListening ? "#ef4444" : t2.textMuted,
+                                color: isListening ? "#ef4444" : t.textMuted,
                                 cursor: "pointer",
                                 zIndex: 1,
                                 padding: 0,
@@ -6220,7 +6220,7 @@ function ReportDialog({
                               gap: "5px",
                               marginTop: "5px",
                               fontSize: "11px",
-                              color: t2.text,
+                              color: t.text,
                               opacity: 0.55,
                               userSelect: "none"
                             },
@@ -6245,7 +6245,7 @@ function ReportDialog({
                               padding: "6px 8px",
                               borderRadius: "6px",
                               background: isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.05)",
-                              border: `1px solid ${t2.accent}40`
+                              border: `1px solid ${t.accent}40`
                             },
                             children: [
                               /* @__PURE__ */ jsx5(
@@ -6260,7 +6260,7 @@ function ReportDialog({
                                     "path",
                                     {
                                       d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
-                                      stroke: t2.accent,
+                                      stroke: t.accent,
                                       strokeWidth: "1.5",
                                       strokeLinejoin: "round"
                                     }
@@ -6272,7 +6272,7 @@ function ReportDialog({
                                 {
                                   style: {
                                     fontSize: "11px",
-                                    color: t2.textMuted,
+                                    color: t.textMuted,
                                     flex: 1
                                   },
                                   children: "AI enhanced"
@@ -6289,9 +6289,9 @@ function ReportDialog({
                                   style: {
                                     padding: "2px 8px",
                                     borderRadius: "4px",
-                                    border: `1px solid ${t2.accent}`,
-                                    background: t2.accent,
-                                    color: t2.accentText,
+                                    border: `1px solid ${t.accent}`,
+                                    background: t.accent,
+                                    color: t.accentText,
                                     fontSize: "11px",
                                     fontWeight: 600,
                                     cursor: "pointer",
@@ -6312,9 +6312,9 @@ function ReportDialog({
                                   style: {
                                     padding: "2px 8px",
                                     borderRadius: "4px",
-                                    border: `1px solid ${t2.inputBorder}`,
+                                    border: `1px solid ${t.inputBorder}`,
                                     background: "transparent",
-                                    color: t2.textMuted,
+                                    color: t.textMuted,
                                     fontSize: "11px",
                                     fontWeight: 600,
                                     cursor: "pointer",
@@ -6344,7 +6344,7 @@ function ReportDialog({
                           "p",
                           {
                             style: {
-                              color: t2.textMuted,
+                              color: t.textMuted,
                               fontSize: "12px",
                               marginTop: "6px",
                               marginBottom: 0,
@@ -6359,7 +6359,7 @@ function ReportDialog({
                             {
                               style: {
                                 fontSize: "12px",
-                                color: t2.textMuted,
+                                color: t.textMuted,
                                 marginBottom: "6px",
                                 display: "block",
                                 fontWeight: 500
@@ -6390,7 +6390,7 @@ function ReportDialog({
                                       width: "56px",
                                       height: "56px",
                                       borderRadius: "6px",
-                                      border: `1px dashed ${t2.border}`,
+                                      border: `1px dashed ${t.border}`,
                                       display: "flex",
                                       alignItems: "center",
                                       justifyContent: "center",
@@ -6399,7 +6399,7 @@ function ReportDialog({
                                       fontSize: "9px",
                                       lineHeight: 1.2,
                                       textAlign: "center",
-                                      color: t2.textMuted,
+                                      color: t.textMuted,
                                       animation: "gg-pulse 1.4s ease-in-out infinite"
                                     },
                                     children: "Capturing\u2026"
@@ -6424,7 +6424,7 @@ function ReportDialog({
                                             width: "100%",
                                             height: "100%",
                                             borderRadius: "6px",
-                                            border: `1px solid ${t2.border}`,
+                                            border: `1px solid ${t.border}`,
                                             objectFit: "cover",
                                             objectPosition: "top",
                                             cursor: "zoom-in",
@@ -6494,8 +6494,8 @@ function ReportDialog({
                                             height: "24px",
                                             borderRadius: "50%",
                                             border: "none",
-                                            background: t2.accent,
-                                            color: t2.accentText,
+                                            background: t.accent,
+                                            color: t.accentText,
                                             padding: 0,
                                             cursor: "pointer",
                                             display: "flex",
@@ -6549,7 +6549,7 @@ function ReportDialog({
                                     gap: "8px",
                                     padding: "6px 8px",
                                     borderRadius: "6px",
-                                    border: `1px solid ${t2.border}`
+                                    border: `1px solid ${t.border}`
                                   },
                                   children: [
                                     /* @__PURE__ */ jsxs5(
@@ -6565,7 +6565,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",
-                                              stroke: t2.textMuted,
+                                              stroke: t.textMuted,
                                               strokeWidth: "1.5",
                                               strokeLinecap: "round",
                                               strokeLinejoin: "round"
@@ -6575,7 +6575,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M14 2v6h6",
-                                              stroke: t2.textMuted,
+                                              stroke: t.textMuted,
                                               strokeWidth: "1.5",
                                               strokeLinecap: "round",
                                               strokeLinejoin: "round"
@@ -6589,7 +6589,7 @@ function ReportDialog({
                                       {
                                         style: {
                                           fontSize: "11px",
-                                          color: t2.text,
+                                          color: t.text,
                                           flex: 1,
                                           overflow: "hidden",
                                           textOverflow: "ellipsis",
@@ -6601,7 +6601,7 @@ function ReportDialog({
                                     /* @__PURE__ */ jsxs5(
                                       "span",
                                       {
-                                        style: { fontSize: "10px", color: t2.textMuted },
+                                        style: { fontSize: "10px", color: t.textMuted },
                                         children: [
                                           (a.size / 1024).toFixed(0),
                                           "KB"
@@ -6676,7 +6676,7 @@ function ReportDialog({
                               },
                               onDragLeave: () => setScreenshotDragOver(false),
                               style: {
-                                border: `1.5px dashed ${screenshotDragOver ? t2.accent : t2.inputBorder}`,
+                                border: `1.5px dashed ${screenshotDragOver ? t.accent : t.inputBorder}`,
                                 borderRadius: "8px",
                                 padding: screenshots.length + attachments.length > 0 ? "8px 12px" : "18px 12px",
                                 textAlign: "center",
@@ -6691,7 +6691,7 @@ function ReportDialog({
                                     margin: 0,
                                     fontSize: "11px",
                                     fontWeight: 500,
-                                    color: t2.textMuted
+                                    color: t.textMuted
                                   },
                                   children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
                                 }
@@ -6717,7 +6717,7 @@ function ReportDialog({
                                           width: "18",
                                           height: "18",
                                           rx: "2",
-                                          stroke: t2.textMuted,
+                                          stroke: t.textMuted,
                                           strokeWidth: "1.5"
                                         }
                                       ),
@@ -6727,7 +6727,7 @@ function ReportDialog({
                                           cx: "8.5",
                                           cy: "8.5",
                                           r: "1.5",
-                                          stroke: t2.textMuted,
+                                          stroke: t.textMuted,
                                           strokeWidth: "1.5"
                                         }
                                       ),
@@ -6735,7 +6735,7 @@ function ReportDialog({
                                         "path",
                                         {
                                           d: "M21 15l-5-5L5 21",
-                                          stroke: t2.textMuted,
+                                          stroke: t.textMuted,
                                           strokeWidth: "1.5",
                                           strokeLinecap: "round",
                                           strokeLinejoin: "round"
@@ -6751,7 +6751,7 @@ function ReportDialog({
                                       margin: 0,
                                       fontSize: "12px",
                                       fontWeight: 600,
-                                      color: t2.text
+                                      color: t.text
                                     },
                                     children: screenshotDragOver ? "Drop to attach" : "Add screenshots or files"
                                   }
@@ -6762,7 +6762,7 @@ function ReportDialog({
                                     style: {
                                       margin: "3px 0 0",
                                       fontSize: "11px",
-                                      color: t2.textMuted
+                                      color: t.textMuted
                                     },
                                     children: "Images, PDF, DOC, XLS \xB7 Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
                                   }
@@ -6777,7 +6777,7 @@ function ReportDialog({
                             {
                               style: {
                                 fontSize: "12px",
-                                color: t2.textMuted,
+                                color: t.textMuted,
                                 marginBottom: "6px",
                                 display: "flex",
                                 alignItems: "center",
@@ -6789,7 +6789,7 @@ function ReportDialog({
                                   "span",
                                   {
                                     style: {
-                                      color: severity ? t2.textMuted : needsSeverity ? "#ef4444" : t2.textMuted,
+                                      color: severity ? t.textMuted : needsSeverity ? "#ef4444" : t.textMuted,
                                       fontSize: "11px"
                                     },
                                     children: severity ? "" : "\xB7 required"
@@ -6824,9 +6824,9 @@ function ReportDialog({
                                       // tap target; 6px left it at ~29px.
                                       padding: "9px 2px",
                                       borderRadius: "6px",
-                                      border: `1px solid ${on ? t2.accent : needsSeverity ? "#ef4444" : t2.inputBorder}`,
-                                      background: on ? t2.accent : "transparent",
-                                      color: on ? t2.accentText : t2.text,
+                                      border: `1px solid ${on ? t.accent : needsSeverity ? "#ef4444" : t.inputBorder}`,
+                                      background: on ? t.accent : "transparent",
+                                      color: on ? t.accentText : t.text,
                                       fontSize: "12px",
                                       fontWeight: 600,
                                       cursor: "pointer",
@@ -6878,8 +6878,8 @@ function ReportDialog({
                               },
                               children: [
                                 /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
-                                  /* @__PURE__ */ jsx5("span", { style: { color: t2.text, fontWeight: 600, fontSize: "13px" }, children: "Our team may already have this, or something close" }),
-                                  /* @__PURE__ */ jsx5("span", { style: { color: t2.textMuted, fontSize: "12px", lineHeight: 1.5 }, children: similarIssues.length > 1 ? "Pick the one that matches. Same problem, or a different request for the same feature \u2014 it's added to that issue, so the team has it in one place." : "Same problem, or a different request for the same feature? Pick it \u2014 it's added to that issue, so the team has it in one place." })
+                                  /* @__PURE__ */ jsx5("span", { style: { color: t.text, fontWeight: 600, fontSize: "13px" }, children: "Our team may already have this, or something close" }),
+                                  /* @__PURE__ */ jsx5("span", { style: { color: t.textMuted, fontSize: "12px", lineHeight: 1.5 }, children: similarIssues.length > 1 ? "Pick the one that matches. Same problem, or a different request for the same feature \u2014 it's added to that issue, so the team has it in one place." : "Same problem, or a different request for the same feature? Pick it \u2014 it's added to that issue, so the team has it in one place." })
                                 ] }),
                                 /* @__PURE__ */ jsx5(
                                   "div",
@@ -6905,10 +6905,10 @@ function ReportDialog({
                                             minHeight: "44px",
                                             padding: "9px 10px",
                                             borderRadius: "8px",
-                                            border: `1px solid ${picked ? t2.accent : t2.border}`,
-                                            boxShadow: picked ? `0 0 0 1px ${t2.accent}` : "none",
-                                            backgroundColor: t2.bg,
-                                            color: t2.text,
+                                            border: `1px solid ${picked ? t.accent : t.border}`,
+                                            boxShadow: picked ? `0 0 0 1px ${t.accent}` : "none",
+                                            backgroundColor: t.bg,
+                                            color: t.text,
                                             textAlign: "left",
                                             cursor: isSubmitting ? "not-allowed" : "pointer",
                                             fontFamily: "inherit"
@@ -6925,9 +6925,9 @@ function ReportDialog({
                                                   height: "14px",
                                                   boxSizing: "border-box",
                                                   borderRadius: "50%",
-                                                  border: `2px solid ${picked ? t2.accent : t2.textMuted}`,
-                                                  backgroundColor: picked ? t2.accent : "transparent",
-                                                  boxShadow: picked ? `inset 0 0 0 2px ${t2.bg}` : "none"
+                                                  border: `2px solid ${picked ? t.accent : t.textMuted}`,
+                                                  backgroundColor: picked ? t.accent : "transparent",
+                                                  boxShadow: picked ? `inset 0 0 0 2px ${t.bg}` : "none"
                                                 }
                                               }
                                             ),
@@ -6955,7 +6955,7 @@ function ReportDialog({
                                                         WebkitBoxOrient: "vertical"
                                                       },
                                                       children: [
-                                                        /* @__PURE__ */ jsxs5("span", { style: { color: t2.textMuted, fontWeight: 600 }, children: [
+                                                        /* @__PURE__ */ jsxs5("span", { style: { color: t.textMuted, fontWeight: 600 }, children: [
                                                           "#",
                                                           issue.number
                                                         ] }),
@@ -6964,7 +6964,7 @@ function ReportDialog({
                                                       ]
                                                     }
                                                   ),
-                                                  issue.status && /* @__PURE__ */ jsx5("span", { style: { fontSize: "11.5px", color: t2.textMuted }, children: issue.status })
+                                                  issue.status && /* @__PURE__ */ jsx5("span", { style: { fontSize: "11.5px", color: t.textMuted }, children: issue.status })
                                                 ]
                                               }
                                             )
@@ -6993,8 +6993,8 @@ function ReportDialog({
                                       padding: "10px",
                                       borderRadius: "8px",
                                       border: "none",
-                                      backgroundColor: isSubmitting || !pickedSimilar ? t2.bgSecondary : t2.accent,
-                                      color: isSubmitting || !pickedSimilar ? t2.textMuted : t2.accentText,
+                                      backgroundColor: isSubmitting || !pickedSimilar ? t.bgSecondary : t.accent,
+                                      color: isSubmitting || !pickedSimilar ? t.textMuted : t.accentText,
                                       fontSize: "14px",
                                       fontWeight: 600,
                                       cursor: isSubmitting || !pickedSimilar ? "not-allowed" : "pointer",
@@ -7027,7 +7027,7 @@ function ReportDialog({
                                       borderRadius: "8px",
                                       border: "1px solid rgba(245,158,11,0.4)",
                                       backgroundColor: "transparent",
-                                      color: isSubmitting ? t2.textMuted : t2.text,
+                                      color: isSubmitting ? t.textMuted : t.text,
                                       fontSize: "13px",
                                       fontWeight: 600,
                                       cursor: isSubmitting ? "not-allowed" : "pointer",
@@ -7058,7 +7058,7 @@ function ReportDialog({
                                       borderRadius: "8px",
                                       border: "none",
                                       backgroundColor: "transparent",
-                                      color: isSubmitting ? t2.textMuted : t2.text,
+                                      color: isSubmitting ? t.textMuted : t.text,
                                       fontSize: "13px",
                                       fontWeight: 500,
                                       textDecoration: "underline",
@@ -7087,8 +7087,8 @@ function ReportDialog({
                               padding: "10px",
                               borderRadius: "8px",
                               border: "none",
-                              backgroundColor: submitDisabled ? t2.bgSecondary : t2.accent,
-                              color: submitDisabled ? t2.textMuted : t2.accentText,
+                              backgroundColor: submitDisabled ? t.bgSecondary : t.accent,
+                              color: submitDisabled ? t.textMuted : t.accentText,
                               fontSize: "14px",
                               fontWeight: 600,
                               cursor: submitDisabled ? "not-allowed" : "pointer",
@@ -7110,14 +7110,14 @@ function ReportDialog({
                   {
                     style: {
                       padding: "8px 16px 10px",
-                      borderTop: `1px solid ${t2.border}`,
+                      borderTop: `1px solid ${t.border}`,
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "space-between",
                       gap: "12px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx5(ReporterChip, { reporter, t: t2 }),
+                      /* @__PURE__ */ jsx5(ReporterChip, { reporter, t }),
                       reportGlitchgrabProblem ? /* @__PURE__ */ jsx5(
                         "button",
                         {
@@ -7130,7 +7130,7 @@ function ReportDialog({
                           title: "Something wrong with this reporter itself? Tell the Glitchgrab team.",
                           style: {
                             fontSize: "11px",
-                            color: t2.textMuted,
+                            color: t.textMuted,
                             whiteSpace: "nowrap",
                             flexShrink: 0,
                             border: "none",
@@ -7150,7 +7150,7 @@ function ReportDialog({
                         {
                           style: {
                             fontSize: "11px",
-                            color: t2.textMuted,
+                            color: t.textMuted,
                             whiteSpace: "nowrap",
                             flexShrink: 0
                           },
@@ -7278,8 +7278,8 @@ function ReportDialog({
                         padding: "8px 14px",
                         borderRadius: "999px",
                         border: "none",
-                        background: t2.accent,
-                        color: t2.accentText,
+                        background: t.accent,
+                        color: t.accentText,
                         fontSize: "13px",
                         fontWeight: 700,
                         cursor: "pointer",
@@ -7318,7 +7318,7 @@ function ReportDialog({
                   "span",
                   {
                     style: {
-                      color: t2.textMuted,
+                      color: t.textMuted,
                       fontSize: "12px"
                     },
                     children: [
@@ -7570,15 +7570,36 @@ function getTypeIcon(type, color, size = 24) {
 // src/booking-dialog.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var t = {
+var LIGHT = {
+  bg: "#ffffff",
+  pane: "#ffffff",
+  border: "#e5e7eb",
+  text: "#111827",
+  muted: "#6b7280",
+  faint: "#9ca3af",
+  open: "#e8e8eb",
+  ink: "#111111",
+  onInk: "#ffffff",
+  input: "#ffffff",
+  danger: "#dc2626"
+};
+var DARK = {
   bg: "#141414",
-  surface: "#1c1c1c",
+  pane: "#141414",
   border: "#2a2a2a",
-  text: "#e5e5e5",
-  muted: "#9aa0a6",
-  accent: "#3b82f6",
+  text: "#f3f4f6",
+  muted: "#9ca3af",
+  faint: "#6b7280",
+  open: "#262626",
+  ink: "#f3f4f6",
+  onInk: "#111111",
+  input: "#1c1c1c",
   danger: "#f87171"
 };
+var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var DAY_MS = 864e5;
+var ZONE_PAD_MS = 14 * 36e5;
+var WIDE_QUERY = "(min-width: 900px)";
 function localZone() {
   try {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -7586,18 +7607,92 @@ function localZone() {
     return "UTC";
   }
 }
-function dayKey(iso) {
-  return new Date(iso).toDateString();
+function zoneList(current) {
+  var _a;
+  try {
+    const all = (_a = Intl.supportedValuesOf) == null ? void 0 : _a.call(Intl, "timeZone");
+    if (all == null ? void 0 : all.length) return all.includes(current) ? all : [current, ...all];
+  } catch (e) {
+  }
+  return [current];
 }
-function formatDay(iso) {
-  return new Date(iso).toLocaleDateString(void 0, {
-    weekday: "short",
-    day: "numeric",
-    month: "short"
-  });
+function prefers12h() {
+  try {
+    return new Intl.DateTimeFormat(void 0, { hour: "numeric" }).resolvedOptions().hour12 === true;
+  } catch (e) {
+    return false;
+  }
+}
+function useMediaQuery(query, fallback) {
+  const [matches, setMatches] = useState5(
+    () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : fallback
+  );
+  useEffect5(() => {
+    var _a;
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    (_a = mql.addEventListener) == null ? void 0 : _a.call(mql, "change", onChange);
+    return () => {
+      var _a2;
+      return (_a2 = mql.removeEventListener) == null ? void 0 : _a2.call(mql, "change", onChange);
+    };
+  }, [query]);
+  return matches;
+}
+function dayKeyIn(iso, timeZone) {
+  try {
+    return new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(
+      new Date(iso)
+    );
+  } catch (e) {
+    return new Date(iso).toISOString().slice(0, 10);
+  }
+}
+function keyToUtc(key) {
+  const [y, m, d] = key.split("-").map(Number);
+  return Date.UTC(y, m - 1, d);
+}
+function utcToKey(ms) {
+  return new Date(ms).toISOString().slice(0, 10);
+}
+function monthGrid(month) {
+  const first = keyToUtc(`${month}-01`);
+  const lead = (new Date(first).getUTCDay() + 6) % 7;
+  const start = first - lead * DAY_MS;
+  return Array.from({ length: 42 }, (_, i) => utcToKey(start + i * DAY_MS));
 }
-function formatTime(iso) {
-  return new Date(iso).toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+function shiftMonth(month, by) {
+  const [y, m] = month.split("-").map(Number);
+  return new Date(Date.UTC(y, m - 1 + by, 1)).toISOString().slice(0, 7);
+}
+function formatTime(iso, timeZone, twelve) {
+  try {
+    if (twelve) {
+      return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, timeZone }).replace(" ", "").toLowerCase();
+    }
+    return new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone });
+  } catch (e) {
+    return new Date(iso).toLocaleTimeString();
+  }
+}
+function ordinal(n) {
+  var _a;
+  const tens = n % 100;
+  if (tens >= 11 && tens <= 13) return `${n}th`;
+  return `${n}${(_a = ["th", "st", "nd", "rd"][n % 10]) != null ? _a : "th"}`;
+}
+function formatDuration(minutes) {
+  if (minutes < 60) return `${minutes}m`;
+  const rest = minutes % 60;
+  return rest ? `${Math.floor(minutes / 60)}h ${rest}m` : `${minutes / 60}h`;
+}
+function initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
+    var _a;
+    return (_a = w[0]) == null ? void 0 : _a.toUpperCase();
+  }).join("");
 }
 function BookingDialog({
   token,
@@ -7605,14 +7700,23 @@ function BookingDialog({
   open,
   onClose
 }) {
-  var _a;
+  var _a, _b, _c, _d, _e;
+  const wide = useMediaQuery(WIDE_QUERY, true);
+  const t = useMemo3(() => {
+    if (!open) return LIGHT;
+    const base = detectDark() ? DARK : LIGHT;
+    const accent = detectHostAccent();
+    return accent ? { ...base, ink: accent.accent, onInk: accent.accentText } : base;
+  }, [open]);
   const [step, setStep] = useState5("slots");
-  const [slots, setSlots] = useState5(null);
-  const [heading, setHeading] = useState5({
-    title: "Book a demo",
-    description: null
-  });
+  const [zone, setZone] = useState5(localZone);
+  const [twelve, setTwelve] = useState5(prefers12h);
+  const [month, setMonth] = useState5(() => dayKeyIn(Date.now(), localZone()).slice(0, 7));
+  const [slotsByMonth, setSlotsByMonth] = useState5({});
+  const [pickedDay, setPickedDay] = useState5(null);
+  const [page, setPage] = useState5({ title: "Book a demo", description: null, hostName: null, hostAvatarUrl: null, slotMinutes: 30 });
   const [whatsappUrl, setWhatsappUrl] = useState5(null);
+  const [avatarFailed, setAvatarFailed] = useState5(false);
   const [selected, setSelected] = useState5(null);
   const [name, setName] = useState5("");
   const [email, setEmail] = useState5("");
@@ -7627,40 +7731,64 @@ function BookingDialog({
     () => ({ Authorization: `Bearer ${token}`, "Content-Type": "application/json" }),
     [token]
   );
-  const loadSlots = useCallback2(async () => {
-    var _a2, _b, _c;
-    setError(null);
-    setSlots(null);
-    try {
-      const from = (/* @__PURE__ */ new Date()).toISOString();
-      const to = new Date(Date.now() + 21 * 864e5).toISOString();
-      const res = await fetch(
-        `${baseUrl}/api/v1/sdk/booking/availability?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`,
-        { headers }
-      );
-      const json = await res.json();
-      if (!json.success) {
-        setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
-        setSlots([]);
+  const loadMonth = useCallback2(
+    async (target) => {
+      var _a2, _b2, _c2;
+      const grid2 = monthGrid(target);
+      const from = Math.max(Date.now(), keyToUtc(grid2[0]) - ZONE_PAD_MS);
+      const to = keyToUtc(grid2[41]) + DAY_MS + ZONE_PAD_MS;
+      if (to <= from) {
+        setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
         return;
       }
-      setSlots((_b = json.data.slots) != null ? _b : []);
-      setHeading({ title: json.data.title, description: json.data.description });
-      setWhatsappUrl((_c = json.data.whatsappUrl) != null ? _c : null);
-    } catch (e) {
-      setError("Couldn't reach the booking service");
-      setSlots([]);
-    }
-  }, [baseUrl, headers]);
+      try {
+        const res = await fetch(
+          `${baseUrl}/api/v1/sdk/booking/availability?from=${encodeURIComponent(new Date(from).toISOString())}&to=${encodeURIComponent(new Date(to).toISOString())}`,
+          { headers }
+        );
+        const json = await res.json();
+        if (!json.success) {
+          setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
+          setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
+          return;
+        }
+        const data = (_b2 = json.data) != null ? _b2 : {};
+        setSlotsByMonth((prev) => ({ ...prev, [target]: Array.isArray(data.slots) ? data.slots : [] }));
+        setPage({
+          title: typeof data.title === "string" && data.title ? data.title : "Book a demo",
+          description: typeof data.description === "string" ? data.description : null,
+          hostName: typeof data.hostName === "string" ? data.hostName : null,
+          hostAvatarUrl: typeof data.hostAvatarUrl === "string" ? data.hostAvatarUrl : null,
+          slotMinutes: typeof data.slotMinutes === "number" ? data.slotMinutes : 30
+        });
+        setWhatsappUrl((_c2 = data.whatsappUrl) != null ? _c2 : null);
+      } catch (e) {
+        setError("Couldn't reach the booking service");
+        setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
+      }
+    },
+    [baseUrl, headers]
+  );
   useEffect5(() => {
     if (!open) return;
+    const now = localZone();
     setStep("slots");
+    setZone(now);
+    setMonth(dayKeyIn(Date.now(), now).slice(0, 7));
+    setSlotsByMonth({});
+    setPickedDay(null);
     setSelected(null);
     setCode("");
     setBookingId(null);
     setError(null);
-    void loadSlots();
-  }, [open, loadSlots]);
+    setAvatarFailed(false);
+  }, [open]);
+  const monthLoaded = month in slotsByMonth;
+  useEffect5(() => {
+    if (!open || monthLoaded) return;
+    setError(null);
+    void loadMonth(month);
+  }, [open, month, monthLoaded, loadMonth]);
   useEffect5(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -7669,12 +7797,19 @@ function BookingDialog({
     document.addEventListener("keydown", onKey, true);
     return () => document.removeEventListener("keydown", onKey, true);
   }, [open, onClose]);
+  const zones = useMemo3(() => open ? zoneList(zone) : [zone], [open, zone]);
   if (!open) return null;
+  const today = dayKeyIn(Date.now(), zone);
+  const grid = monthGrid(month);
   const byDay = /* @__PURE__ */ new Map();
-  for (const slot of slots != null ? slots : []) {
-    const key = dayKey(slot.startsAt);
-    byDay.set(key, [...(_a = byDay.get(key)) != null ? _a : [], slot]);
+  for (const slot of (_a = slotsByMonth[month]) != null ? _a : []) {
+    const key = dayKeyIn(slot.startsAt, zone);
+    byDay.set(key, [...(_b = byDay.get(key)) != null ? _b : [], slot]);
   }
+  const day = pickedDay && byDay.has(pickedDay) ? pickedDay : (_c = grid.find((k) => k >= today && byDay.has(k))) != null ? _c : null;
+  const daySlots = day ? (_d = byDay.get(day)) != null ? _d : [] : [];
+  const atFirstMonth = month <= today.slice(0, 7);
+  const pastHorizon = monthLoaded && !error && byDay.size === 0 && !atFirstMonth;
   async function startBooking() {
     var _a2;
     if (!selected) return;
@@ -7690,7 +7825,8 @@ function BookingDialog({
           phone,
           note,
           startsAt: selected.startsAt,
-          timezone: localZone()
+          // The zone the times were shown in, which is the one the visitor chose.
+          timezone: zone
         })
       });
       const json = await res.json();
@@ -7731,233 +7867,703 @@ function BookingDialog({
     }
   }
   const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
-  return /* @__PURE__ */ jsx6(
+  const selectedEnd = selected ? (_e = selected.endsAt) != null ? _e : new Date(new Date(selected.startsAt).getTime() + page.slotMinutes * 6e4).toISOString() : null;
+  const monthDate = new Date(keyToUtc(`${month}-01`));
+  const muted = { color: t.muted };
+  const summary = /* @__PURE__ */ jsxs6(
     "div",
     {
-      onClick: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
       style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 2147483e3,
-        background: "rgba(0,0,0,.6)",
+        position: "relative",
+        padding: wide ? "28px 24px" : "20px 20px 16px",
+        borderRight: wide ? `1px solid ${t.border}` : void 0,
+        borderBottom: wide ? void 0 : `1px solid ${t.border}`,
+        width: wide ? 260 : void 0,
+        flex: wide ? "0 0 260px" : void 0,
+        boxSizing: "border-box",
         display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 16,
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+        flexDirection: "column",
+        gap: 10
       },
-      children: /* @__PURE__ */ jsxs6(
-        "div",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": heading.title,
-          style: {
-            width: "min(440px, 100%)",
-            maxHeight: "min(660px, 90vh)",
-            display: "flex",
-            flexDirection: "column",
-            background: t.bg,
-            color: t.text,
-            borderRadius: 16,
-            boxShadow: "0 20px 60px rgba(0,0,0,.55)",
-            overflow: "hidden"
-          },
-          children: [
-            /* @__PURE__ */ jsxs6(
-              "div",
+      children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Close",
+            className: "gg-bk-ghost",
+            style: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              width: 30,
+              height: 30,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: 0,
+              borderRadius: 8,
+              background: "transparent",
+              color: t.muted,
+              cursor: "pointer",
+              padding: 0
+            },
+            children: /* @__PURE__ */ jsx6(Icon, { name: "x" })
+          }
+        ),
+        (page.hostName || page.hostAvatarUrl) && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingRight: 32 }, children: [
+          page.hostAvatarUrl && !avatarFailed ? (
+            // eslint-disable-next-line @next/next/no-img-element -- rendered on the host's page, not ours
+            /* @__PURE__ */ jsx6(
+              "img",
               {
+                src: page.hostAvatarUrl,
+                alt: "",
+                width: 36,
+                height: 36,
+                referrerPolicy: "no-referrer",
+                onError: () => setAvatarFailed(true),
+                style: { width: 36, height: 36, borderRadius: 999, objectFit: "cover", border: `1px solid ${t.border}` }
+              }
+            )
+          ) : page.hostName ? /* @__PURE__ */ jsx6(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                width: 36,
+                height: 36,
+                borderRadius: 999,
+                background: t.open,
+                color: t.text,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 13,
+                fontWeight: 600
+              },
+              children: initials(page.hostName)
+            }
+          ) : null,
+          page.hostName && /* @__PURE__ */ jsx6("div", { style: { fontSize: 14, fontWeight: 500, ...muted }, children: page.hostName })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { style: { fontSize: 20, fontWeight: 600, lineHeight: 1.25, paddingRight: 32, overflowWrap: "anywhere" }, children: page.title }),
+        page.description && /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, lineHeight: 1.5, overflowWrap: "anywhere", ...muted }, children: page.description }),
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 4, fontSize: 14 }, children: [
+          selected && step !== "slots" && /* @__PURE__ */ jsx6(Row, { icon: "calendar", t, children: /* @__PURE__ */ jsxs6("span", { children: [
+            new Date(selected.startsAt).toLocaleDateString("en-US", {
+              weekday: "long",
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+              timeZone: zone
+            }),
+            /* @__PURE__ */ jsx6("br", {}),
+            /* @__PURE__ */ jsxs6("span", { style: muted, children: [
+              formatTime(selected.startsAt, zone, twelve),
+              " \u2013 ",
+              selectedEnd && formatTime(selectedEnd, zone, twelve)
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx6(Row, { icon: "clock", t, children: formatDuration(page.slotMinutes) }),
+          /* @__PURE__ */ jsx6(Row, { icon: "video", t, children: "Google Meet" }),
+          /* @__PURE__ */ jsx6(Row, { icon: "globe", t, children: step === "slots" ? (
+            // The visible label is plain text; the native select sits on top of
+            // it, invisible. A styled select sizes itself to the longest zone
+            // name in the list, which pushed the chevron to the pane's edge.
+            /* @__PURE__ */ jsxs6("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+              zone,
+              /* @__PURE__ */ jsx6("span", { style: { color: t.muted }, children: /* @__PURE__ */ jsx6(Icon, { name: "down" }) }),
+              /* @__PURE__ */ jsx6(
+                "select",
+                {
+                  value: zone,
+                  onChange: (e) => setZone(e.target.value),
+                  "aria-label": "Time zone",
+                  style: { position: "absolute", inset: 0, width: "100%", opacity: 0, cursor: "pointer", font: "inherit" },
+                  children: zones.map((z) => /* @__PURE__ */ jsx6("option", { value: z, children: z }, z))
+                }
+              )
+            ] })
+          ) : zone })
+        ] }),
+        whatsappUrl && step === "slots" && /* @__PURE__ */ jsxs6(
+          "a",
+          {
+            href: whatsappUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "gg-bk-ghost",
+            style: {
+              marginTop: wide ? "auto" : 6,
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "10px 12px",
+              borderRadius: 8,
+              border: `1px solid ${t.border}`,
+              background: "transparent",
+              color: t.text,
+              fontSize: 13,
+              fontWeight: 500,
+              textDecoration: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx6("span", { style: { color: "#25D366", flex: "0 0 auto" }, children: /* @__PURE__ */ jsx6(WhatsAppIcon, {}) }),
+              /* @__PURE__ */ jsxs6("span", { children: [
+                "Book on WhatsApp",
+                /* @__PURE__ */ jsx6("span", { style: { display: "block", fontSize: 12, fontWeight: 400, color: t.muted, marginTop: 1 }, children: "We'll ask the same questions in chat." })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const calendar = /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        flex: "1 1 auto",
+        minWidth: 0,
+        padding: wide ? "24px 24px 20px" : "16px 16px 8px",
+        boxSizing: "border-box",
+        overflowY: wide ? "auto" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }, children: [
+          /* @__PURE__ */ jsxs6("div", { style: { fontSize: 16, fontWeight: 600 }, children: [
+            monthDate.toLocaleDateString("en-US", { month: "long", timeZone: "UTC" }),
+            " ",
+            /* @__PURE__ */ jsx6("span", { style: { fontWeight: 500, ...muted }, children: monthDate.getUTCFullYear() })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 4 }, children: [
+            /* @__PURE__ */ jsx6(
+              NavButton,
+              {
+                t,
+                label: "Previous month",
+                icon: "left",
+                disabled: atFirstMonth,
+                onClick: () => setMonth(shiftMonth(month, -1))
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              NavButton,
+              {
+                t,
+                label: "Next month",
+                icon: "right",
+                disabled: pastHorizon,
+                onClick: () => setMonth(shiftMonth(month, 1))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: wide ? 6 : 4 }, children: [
+          WEEKDAYS.map((w) => /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                fontSize: 11,
+                fontWeight: 500,
+                letterSpacing: ".08em",
+                textTransform: "uppercase",
+                padding: "6px 0 8px",
+                color: t.text
+              },
+              children: w
+            },
+            w
+          )),
+          grid.map((key) => {
+            const inMonth = key.startsWith(month);
+            const bookable = byDay.has(key);
+            const isSelected = key === day;
+            const dayNum = Number(key.slice(8));
+            if (!inMonth && !bookable) return /* @__PURE__ */ jsx6("div", { "aria-hidden": true }, key);
+            return /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                type: "button",
+                disabled: !bookable,
+                onClick: () => setPickedDay(key),
+                "aria-pressed": isSelected,
+                "aria-label": new Date(keyToUtc(key)).toLocaleDateString("en-US", {
+                  weekday: "long",
+                  month: "long",
+                  day: "numeric",
+                  timeZone: "UTC"
+                }),
+                className: bookable && !isSelected ? "gg-bk-day" : void 0,
                 style: {
-                  padding: "16px 18px",
-                  borderBottom: `1px solid ${t.border}`,
-                  display: "flex",
-                  alignItems: "flex-start",
-                  justifyContent: "space-between",
-                  gap: 12
+                  position: "relative",
+                  aspectRatio: "1 / 1",
+                  minHeight: 36,
+                  border: 0,
+                  borderRadius: 8,
+                  padding: 0,
+                  fontFamily: "inherit",
+                  fontSize: wide ? 15 : 14,
+                  fontWeight: bookable ? 600 : 400,
+                  cursor: bookable ? "pointer" : "default",
+                  background: isSelected ? t.ink : bookable ? t.open : "transparent",
+                  color: isSelected ? t.onInk : bookable ? t.text : t.faint,
+                  opacity: monthLoaded ? 1 : 0.5
                 },
                 children: [
-                  /* @__PURE__ */ jsxs6("div", { children: [
-                    /* @__PURE__ */ jsx6("div", { style: { fontSize: 15, fontWeight: 600 }, children: heading.title }),
-                    heading.description && /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: t.muted, marginTop: 2 }, children: heading.description })
-                  ] }),
-                  /* @__PURE__ */ jsx6(
-                    "button",
+                  !inMonth && dayNum === 1 && /* @__PURE__ */ jsx6(
+                    "span",
                     {
-                      onClick: onClose,
-                      "aria-label": "Close",
-                      style: { border: 0, background: "transparent", color: t.muted, fontSize: 20, cursor: "pointer", lineHeight: 1 },
-                      children: "\xD7"
+                      style: {
+                        position: "absolute",
+                        top: 4,
+                        left: 0,
+                        right: 0,
+                        fontSize: 9,
+                        fontWeight: 500,
+                        letterSpacing: ".06em",
+                        textTransform: "uppercase"
+                      },
+                      children: new Date(keyToUtc(key)).toLocaleDateString("en-US", { month: "short", timeZone: "UTC" })
                     }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6("div", { style: { padding: 18, overflowY: "auto", flex: "1 1 auto" }, children: [
-              error && /* @__PURE__ */ jsx6("div", { style: { color: t.danger, fontSize: 12, marginBottom: 12, lineHeight: 1.5 }, children: error }),
-              step === "slots" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
-                whatsappUrl && /* @__PURE__ */ jsxs6(
-                  "a",
-                  {
-                    href: whatsappUrl,
-                    target: "_blank",
-                    rel: "noreferrer",
-                    style: {
-                      display: "block",
-                      marginBottom: 16,
-                      padding: "10px 14px",
-                      borderRadius: 10,
-                      border: `1px solid ${t.border}`,
-                      background: t.surface,
-                      color: t.text,
-                      fontSize: 13,
-                      textDecoration: "none"
-                    },
-                    children: [
-                      "\u{1F4AC} Rather book on WhatsApp?",
-                      /* @__PURE__ */ jsx6("span", { style: { display: "block", fontSize: 11, color: t.muted, marginTop: 2 }, children: "We'll ask the same questions in chat." })
-                    ]
-                  }
-                ),
-                slots === null && /* @__PURE__ */ jsx6("div", { style: { color: t.muted, fontSize: 13 }, children: "Finding times\u2026" }),
-                (slots == null ? void 0 : slots.length) === 0 && !error && /* @__PURE__ */ jsx6("div", { style: { color: t.muted, fontSize: 13 }, children: "No times available right now." }),
-                [...byDay.entries()].map(([day, daySlots]) => /* @__PURE__ */ jsxs6("div", { style: { marginBottom: 18 }, children: [
-                  /* @__PURE__ */ jsx6("div", { style: { fontSize: 11, color: t.muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: ".6px" }, children: formatDay(daySlots[0].startsAt) }),
-                  /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: daySlots.map((slot) => /* @__PURE__ */ jsx6(
-                    "button",
+                  ),
+                  dayNum,
+                  key === today && /* @__PURE__ */ jsx6(
+                    "span",
                     {
-                      onClick: () => {
-                        setSelected(slot);
-                        setStep("details");
-                      },
+                      "aria-hidden": true,
                       style: {
-                        padding: "8px 14px",
+                        position: "absolute",
+                        bottom: 6,
+                        left: "50%",
+                        width: 4,
+                        height: 4,
+                        marginLeft: -2,
                         borderRadius: 999,
-                        border: `1px solid ${t.border}`,
-                        background: t.surface,
-                        color: t.text,
-                        fontSize: 13,
-                        cursor: "pointer"
-                      },
-                      children: formatTime(slot.startsAt)
-                    },
-                    slot.startsAt
-                  )) })
-                ] }, day))
-              ] }),
-              step === "details" && selected && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-                /* @__PURE__ */ jsxs6("div", { style: { fontSize: 13, color: t.muted }, children: [
-                  formatDay(selected.startsAt),
-                  " \xB7 ",
-                  formatTime(selected.startsAt),
-                  " \xB7 ",
-                  /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      onClick: () => setStep("slots"),
-                      style: { border: 0, background: "transparent", color: t.accent, cursor: "pointer", fontSize: 13, padding: 0 },
-                      children: "change"
+                        background: isSelected ? t.onInk : t.text
+                      }
                     }
                   )
-                ] }),
-                /* @__PURE__ */ jsx6(Field, { label: "Your name", value: name, onChange: setName }),
-                /* @__PURE__ */ jsx6(Field, { label: "Email", value: email, onChange: setEmail, type: "email" }),
-                /* @__PURE__ */ jsx6(
-                  Field,
-                  {
-                    label: "Mobile number",
-                    value: phone,
-                    onChange: setPhone,
-                    type: "tel",
-                    hint: "We send a code here to confirm, then a reminder before the call."
-                  }
-                ),
-                /* @__PURE__ */ jsx6(Field, { label: "Anything we should know? (optional)", value: note, onChange: setNote }),
-                /* @__PURE__ */ jsx6(
-                  "button",
-                  {
-                    onClick: startBooking,
-                    disabled: !canSubmitDetails || busy,
-                    style: primaryStyle(!canSubmitDetails || busy),
-                    children: busy ? "Sending code\u2026" : "Send verification code"
-                  }
-                )
-              ] }),
-              step === "code" && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-                /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.5 }, children: "We sent a 4-digit code to your phone. Your slot is held for 10 minutes." }),
-                /* @__PURE__ */ jsx6(Field, { label: "Code", value: code, onChange: setCode }),
-                /* @__PURE__ */ jsx6(
-                  "button",
-                  {
-                    onClick: confirmBooking,
-                    disabled: code.trim().length < 4 || busy,
-                    style: primaryStyle(code.trim().length < 4 || busy),
-                    children: busy ? "Confirming\u2026" : "Confirm booking"
-                  }
-                )
-              ] }),
-              step === "done" && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-                /* @__PURE__ */ jsx6("div", { style: { fontSize: 15, fontWeight: 600 }, children: "You're booked." }),
-                /* @__PURE__ */ jsxs6("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.6 }, children: [
-                  selected && `${formatDay(selected.startsAt)} at ${formatTime(selected.startsAt)}. `,
-                  "A calendar invite is on its way to ",
-                  email,
-                  ", and we'll send a WhatsApp reminder before the call."
-                ] }),
-                meetUrl && /* @__PURE__ */ jsx6("a", { href: meetUrl, target: "_blank", rel: "noreferrer", style: { ...primaryStyle(false), textAlign: "center", textDecoration: "none" }, children: "Open the meeting link" })
-              ] })
-            ] })
-          ]
+                ]
+              },
+              key
+            );
+          })
+        ] })
+      ]
+    }
+  );
+  const times = /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        width: wide ? 260 : void 0,
+        flex: wide ? "0 0 260px" : void 0,
+        borderLeft: wide ? `1px solid ${t.border}` : void 0,
+        borderTop: wide ? void 0 : `1px solid ${t.border}`,
+        padding: wide ? "24px 20px 0" : "16px 16px 0",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 14 }, children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 16, fontWeight: 600, whiteSpace: "nowrap" }, children: day ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+            new Date(keyToUtc(day)).toLocaleDateString("en-US", { weekday: "short", timeZone: "UTC" }),
+            " ",
+            /* @__PURE__ */ jsx6("span", { style: { fontWeight: 500, ...muted }, children: ordinal(Number(day.slice(8))) })
+          ] }) : /* @__PURE__ */ jsx6("span", { style: { fontWeight: 500, ...muted }, children: "Times" }) }),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              role: "group",
+              "aria-label": "Clock format",
+              style: { display: "flex", padding: 3, borderRadius: 8, background: t.open, flex: "0 0 auto" },
+              children: [true, false].map((h12) => /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": twelve === h12,
+                  onClick: () => setTwelve(h12),
+                  style: {
+                    border: 0,
+                    borderRadius: 6,
+                    padding: "4px 9px",
+                    fontFamily: "inherit",
+                    fontSize: 13,
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    background: twelve === h12 ? t.bg : "transparent",
+                    color: twelve === h12 ? t.text : t.muted,
+                    boxShadow: twelve === h12 ? "0 1px 2px rgba(0,0,0,.12)" : "none"
+                  },
+                  children: h12 ? "12h" : "24h"
+                },
+                String(h12)
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              overflowY: wide ? "auto" : void 0,
+              flex: "1 1 auto",
+              minHeight: 0,
+              paddingBottom: 20,
+              display: wide ? "flex" : "grid",
+              flexDirection: "column",
+              gridTemplateColumns: "repeat(auto-fill, minmax(96px, 1fr))",
+              gap: 8
+            },
+            children: [
+              error && /* @__PURE__ */ jsx6("div", { style: { color: t.danger, fontSize: 13, lineHeight: 1.5, gridColumn: "1 / -1" }, children: error }),
+              !monthLoaded && !error && /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, gridColumn: "1 / -1", ...muted }, children: "Finding times\u2026" }),
+              monthLoaded && !error && !day && /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, lineHeight: 1.5, gridColumn: "1 / -1", ...muted }, children: pastHorizon ? "Nothing can be booked this far ahead yet." : "No times left this month. Try the next one." }),
+              monthLoaded && daySlots.map((slot) => /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  className: "gg-bk-slot",
+                  onClick: () => {
+                    setSelected(slot);
+                    setError(null);
+                    setStep("details");
+                  },
+                  style: {
+                    flex: "0 0 auto",
+                    padding: "11px 12px",
+                    borderRadius: 8,
+                    border: `1px solid ${t.border}`,
+                    background: t.pane,
+                    color: t.text,
+                    fontFamily: "inherit",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    textAlign: "center"
+                  },
+                  children: formatTime(slot.startsAt, zone, twelve)
+                },
+                slot.startsAt
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const form = /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        flex: "1 1 auto",
+        minWidth: 0,
+        padding: wide ? "28px 32px" : "20px",
+        boxSizing: "border-box",
+        overflowY: wide ? "auto" : void 0
+      },
+      children: /* @__PURE__ */ jsxs6("div", { style: { maxWidth: 440, display: "flex", flexDirection: "column", gap: 14 }, children: [
+        error && /* @__PURE__ */ jsx6("div", { style: { color: t.danger, fontSize: 13, lineHeight: 1.5 }, children: error }),
+        step === "details" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+          /* @__PURE__ */ jsx6(Field, { t, label: "Your name", value: name, onChange: setName, autoComplete: "name" }),
+          /* @__PURE__ */ jsx6(Field, { t, label: "Email", value: email, onChange: setEmail, type: "email", autoComplete: "email" }),
+          /* @__PURE__ */ jsx6(
+            Field,
+            {
+              t,
+              label: "Mobile number",
+              value: phone,
+              onChange: setPhone,
+              type: "tel",
+              autoComplete: "tel",
+              hint: "We send a code here to confirm, then a reminder before the call."
+            }
+          ),
+          /* @__PURE__ */ jsx6(Field, { t, label: "Anything we should know? (optional)", value: note, onChange: setNote, multiline: true }),
+          /* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 4 }, children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "gg-bk-ghost",
+                onClick: () => {
+                  setError(null);
+                  setStep("slots");
+                },
+                style: secondaryStyle(t),
+                children: "Back"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: startBooking,
+                disabled: !canSubmitDetails || busy,
+                style: primaryStyle(t, !canSubmitDetails || busy),
+                children: busy ? "Sending code\u2026" : "Send verification code"
+              }
+            )
+          ] })
+        ] }),
+        step === "code" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 14, lineHeight: 1.5, ...muted }, children: "We sent a code to your phone. Your slot is held for 10 minutes." }),
+          /* @__PURE__ */ jsx6(Field, { t, label: "Code", value: code, onChange: setCode, autoComplete: "one-time-code", inputMode: "numeric" }),
+          /* @__PURE__ */ jsx6("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 4 }, children: /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: confirmBooking,
+              disabled: code.trim().length < 4 || busy,
+              style: primaryStyle(t, code.trim().length < 4 || busy),
+              children: busy ? "Confirming\u2026" : "Confirm booking"
+            }
+          ) })
+        ] }),
+        step === "done" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 20, fontWeight: 600 }, children: "You're booked." }),
+          /* @__PURE__ */ jsxs6("div", { style: { fontSize: 14, lineHeight: 1.6, ...muted }, children: [
+            "A calendar invite is on its way to ",
+            email,
+            ", and we'll send a WhatsApp reminder before the call."
+          ] }),
+          meetUrl && /* @__PURE__ */ jsx6(
+            "a",
+            {
+              href: meetUrl,
+              target: "_blank",
+              rel: "noreferrer",
+              style: { ...primaryStyle(t, false), alignSelf: "flex-start", textDecoration: "none" },
+              children: "Open the meeting link"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483e3,
+        background: "rgba(0,0,0,.6)",
+        display: "flex",
+        alignItems: wide ? "center" : "flex-start",
+        justifyContent: "center",
+        padding: wide ? 24 : 12,
+        boxSizing: "border-box",
+        overflowY: "auto",
+        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsx6("style", { children: `
+        .gg-bk-day:hover { box-shadow: inset 0 0 0 1.5px ${t.ink}; }
+        .gg-bk-slot:hover { border-color: ${t.ink} !important; }
+        .gg-bk-ghost:hover { background: ${t.open} !important; }
+        .gg-bk-root button:focus-visible, .gg-bk-root a:focus-visible,
+        .gg-bk-root span:has(> select:focus-visible), .gg-bk-root input:focus-visible, .gg-bk-root textarea:focus-visible {
+          outline: 2px solid ${t.ink}; outline-offset: 2px;
         }
-      )
+      ` }),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": page.title,
+            className: "gg-bk-root",
+            style: {
+              width: step === "slots" ? "min(1060px, 100%)" : "min(820px, 100%)",
+              // A month grid should not jump in height between months; the form
+              // steps are short and would sit in a mostly empty box.
+              height: wide && step === "slots" ? "min(640px, calc(100vh - 48px))" : void 0,
+              minHeight: wide && step !== "slots" ? 420 : void 0,
+              margin: wide ? void 0 : "auto 0",
+              display: "flex",
+              flexDirection: wide ? "row" : "column",
+              background: t.bg,
+              color: t.text,
+              border: `1px solid ${t.border}`,
+              borderRadius: 14,
+              boxShadow: "0 24px 64px rgba(0,0,0,.35)",
+              overflow: "hidden",
+              boxSizing: "border-box",
+              textAlign: "left",
+              lineHeight: 1.4
+            },
+            children: [
+              summary,
+              step === "slots" ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+                calendar,
+                times
+              ] }) : form
+            ]
+          }
+        )
+      ]
     }
   );
 }
-function primaryStyle(disabled) {
+function primaryStyle(t, disabled) {
   return {
-    marginTop: 4,
     padding: "10px 16px",
-    borderRadius: 999,
+    borderRadius: 8,
     border: 0,
-    background: disabled ? "#2a2a2a" : t.accent,
-    color: disabled ? "#6b7280" : "#fff",
+    background: t.ink,
+    color: t.onInk,
+    opacity: disabled ? 0.4 : 1,
+    fontFamily: "inherit",
     fontSize: 14,
-    fontWeight: 500,
+    fontWeight: 600,
     cursor: disabled ? "default" : "pointer"
   };
 }
+function secondaryStyle(t) {
+  return {
+    padding: "10px 16px",
+    borderRadius: 8,
+    border: 0,
+    background: "transparent",
+    color: t.text,
+    fontFamily: "inherit",
+    fontSize: 14,
+    fontWeight: 500,
+    cursor: "pointer"
+  };
+}
+function Row({ icon, t, children }) {
+  return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "flex-start", gap: 10, color: t.text, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx6("span", { style: { color: t.muted, flex: "0 0 auto", marginTop: 1 }, children: /* @__PURE__ */ jsx6(Icon, { name: icon }) }),
+    /* @__PURE__ */ jsx6("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children })
+  ] });
+}
+function NavButton({
+  t,
+  label,
+  icon,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      disabled,
+      onClick,
+      className: disabled ? void 0 : "gg-bk-ghost",
+      style: {
+        width: 32,
+        height: 32,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: 0,
+        borderRadius: 8,
+        background: "transparent",
+        color: disabled ? t.faint : t.text,
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? "default" : "pointer",
+        padding: 0
+      },
+      children: /* @__PURE__ */ jsx6(Icon, { name: icon })
+    }
+  );
+}
+function WhatsAppIcon() {
+  return /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, style: { display: "block" }, children: /* @__PURE__ */ jsx6("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" }) });
+}
+function Icon({ name }) {
+  const paths = {
+    x: /* @__PURE__ */ jsx6("path", { d: "M18 6 6 18M6 6l12 12" }),
+    left: /* @__PURE__ */ jsx6("path", { d: "m15 18-6-6 6-6" }),
+    right: /* @__PURE__ */ jsx6("path", { d: "m9 18 6-6-6-6" }),
+    down: /* @__PURE__ */ jsx6("path", { d: "m6 9 6 6 6-6" }),
+    clock: /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx6("path", { d: "M12 7v5l3 2" })
+    ] }),
+    video: /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx6("rect", { x: "3", y: "6", width: "13", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx6("path", { d: "m16 10 5-3v10l-5-3" })
+    ] }),
+    globe: /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx6("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
+    ] }),
+    calendar: /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx6("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+      /* @__PURE__ */ jsx6("path", { d: "M3 10h18M8 3v4M16 3v4" })
+    ] })
+  };
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { display: "block" },
+      children: paths[name]
+    }
+  );
+}
 function Field({
+  t,
   label,
   value,
   onChange,
   type = "text",
-  hint
+  hint,
+  autoComplete,
+  inputMode,
+  multiline
 }) {
-  return /* @__PURE__ */ jsxs6("label", { style: { display: "block", fontSize: 11, color: t.muted }, children: [
+  const inputStyle = {
+    display: "block",
+    width: "100%",
+    boxSizing: "border-box",
+    marginTop: 6,
+    padding: "9px 12px",
+    background: t.input,
+    color: t.text,
+    border: `1px solid ${t.border}`,
+    borderRadius: 8,
+    fontFamily: "inherit",
+    fontSize: 14,
+    outline: "none",
+    resize: "vertical"
+  };
+  return /* @__PURE__ */ jsxs6("label", { style: { display: "block", fontSize: 13, fontWeight: 500, color: t.text }, children: [
     label,
-    /* @__PURE__ */ jsx6(
+    multiline ? /* @__PURE__ */ jsx6("textarea", { rows: 3, value, onChange: (e) => onChange(e.target.value), style: inputStyle }) : /* @__PURE__ */ jsx6(
       "input",
       {
         type,
         value,
+        autoComplete,
+        inputMode,
         onChange: (e) => onChange(e.target.value),
-        style: {
-          display: "block",
-          width: "100%",
-          boxSizing: "border-box",
-          marginTop: 4,
-          padding: "9px 12px",
-          background: t.surface,
-          color: t.text,
-          border: `1px solid ${t.border}`,
-          borderRadius: 8,
-          fontSize: 13,
-          outline: "none"
-        }
+        style: inputStyle
       }
     ),
-    hint && /* @__PURE__ */ jsx6("div", { style: { marginTop: 4, fontSize: 10, color: t.muted }, children: hint })
+    hint && /* @__PURE__ */ jsx6("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
   ] });
 }