@qfei-design/make-ai-assistant 0.2.6 → 0.2.7

package/dist/styles.css

@@ -18,21 +18,28 @@
   --make-ai-internal-on-overlay: var(--make-ai-theme-on-overlay, var(--make-ai-on-overlay, #fcfcff));
   --make-ai-internal-overlay-shadow: color-mix(in srgb, var(--make-ai-internal-accent) 18%, transparent);
   --make-ai-internal-highlight: color-mix(in srgb, var(--make-ai-internal-bg) 58%, transparent);
-  --make-ai-internal-drawer-min-width: var(--make-ai-drawer-width, 432px);
+  --make-ai-internal-drawer-min-width: var(--make-ai-drawer-width, 480px);
   --make-ai-internal-drawer-width: var(--make-ai-internal-drawer-min-width);
   --make-ai-internal-drawer-max-width: max(var(--make-ai-internal-drawer-min-width), min(1024px, 72vw));
   --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, var(--make-ai-internal-accent));
   --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
-  --make-ai-internal-font-size-body: var(--make-ai-font-size-body, .75rem);
-  --make-ai-internal-font-size-markdown: var(--make-ai-font-size-markdown, .6875rem);
-  --make-ai-internal-font-size-ui: var(--make-ai-font-size-ui, .75rem);
-  --make-ai-internal-line-height-body: var(--make-ai-line-height-body, 1.58);
+  --make-ai-internal-font-size-heading: var(--make-ai-font-size-heading, .875rem);
+  --make-ai-internal-font-size-body: var(--make-ai-font-size-body, .8125rem);
+  --make-ai-internal-font-size-markdown: var(--make-ai-font-size-markdown, .8125rem);
+  --make-ai-internal-font-size-meta: var(--make-ai-font-size-meta, .75rem);
+  --make-ai-internal-font-size-caption: var(--make-ai-font-size-caption, .6875rem);
+  --make-ai-internal-font-size-ui: var(--make-ai-font-size-ui, var(--make-ai-internal-font-size-caption));
+  --make-ai-internal-line-height-heading: var(--make-ai-line-height-heading, 1.43);
+  --make-ai-internal-line-height-body: var(--make-ai-line-height-body, 1.62);
+  --make-ai-internal-line-height-meta: var(--make-ai-line-height-meta, 1.5);
+  --make-ai-internal-line-height-caption: var(--make-ai-line-height-caption, 1.45);
   --make-ai-internal-panel-gutter: var(--make-ai-panel-gutter, 16px);
   --make-ai-internal-panel-gutter-compact: var(--make-ai-panel-gutter-compact, 12px);
   --make-ai-internal-panel-gutter-wide: var(--make-ai-panel-gutter-wide, 24px);
   --make-ai-internal-header-height: var(--make-ai-header-height, 50px);
   --make-ai-internal-message-turn-gap: var(--make-ai-message-turn-gap, 8px);
-  --make-ai-internal-assistant-content-gap: var(--make-ai-assistant-content-gap, 12px);
+  --make-ai-internal-assistant-content-gap: var(--make-ai-assistant-content-gap, 8px);
+  --make-ai-internal-assistant-block-gap: var(--make-ai-assistant-block-gap, 12px);
 }
 
 .make-ai-assistant,
@@ -64,6 +71,7 @@
 }
 
 .make-ai-assistant__launcher {
+  --make-ai-internal-launcher-translate: translate3d(0, 0, 0);
   align-items: center;
   background:
     radial-gradient(circle at 34% 24%, var(--make-ai-internal-highlight), transparent 31%),
@@ -79,7 +87,7 @@
     );
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 34%, var(--make-ai-internal-border));
   border-radius: 50%;
-  bottom: auto;
+  bottom: var(--make-ai-launcher-bottom, 18px);
   box-shadow:
     0 12px 26px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent),
     0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent),
@@ -92,9 +100,10 @@
   overflow: visible;
   padding: 0;
   position: fixed;
-  right: var(--make-ai-launcher-right, 18px);
-  top: var(--make-ai-launcher-top, 50%);
-  transform: translateY(-50%);
+  left: var(--make-ai-launcher-left, 18px);
+  right: auto;
+  top: auto;
+  transform: var(--make-ai-internal-launcher-translate) scale(1);
   transition:
     box-shadow 180ms cubic-bezier(.25, 1, .5, 1),
     transform 180ms cubic-bezier(.25, 1, .5, 1);
@@ -102,16 +111,47 @@
   z-index: calc(var(--make-ai-internal-z-index) + 2);
 }
 
+.make-ai-assistant__launcher[data-launcher-position="bottom-right"] {
+  left: auto;
+  right: var(--make-ai-launcher-right, 18px);
+}
+
+.make-ai-assistant__launcher[data-launcher-position="top-left"] {
+  bottom: auto;
+  top: var(--make-ai-launcher-top, 18px);
+}
+
+.make-ai-assistant__launcher[data-launcher-position="top-right"] {
+  bottom: auto;
+  left: auto;
+  right: var(--make-ai-launcher-right, 18px);
+  top: var(--make-ai-launcher-top, 18px);
+}
+
+.make-ai-assistant__launcher[data-launcher-position="left-center"] {
+  --make-ai-internal-launcher-translate: translateY(-50%);
+  bottom: auto;
+  top: var(--make-ai-launcher-top, 50%);
+}
+
+.make-ai-assistant__launcher[data-launcher-position="right-center"] {
+  --make-ai-internal-launcher-translate: translateY(-50%);
+  bottom: auto;
+  left: auto;
+  right: var(--make-ai-launcher-right, 18px);
+  top: var(--make-ai-launcher-top, 50%);
+}
+
 .make-ai-assistant__launcher:hover {
   box-shadow:
     0 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 17%, transparent),
     0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
     inset 0 1px 0 var(--make-ai-internal-highlight);
-  transform: translateY(-50%) scale(1.04);
+  transform: var(--make-ai-internal-launcher-translate) scale(1.04);
 }
 
 .make-ai-assistant__launcher:active {
-  transform: translateY(-50%) scale(.98);
+  transform: var(--make-ai-internal-launcher-translate) scale(.98);
 }
 
 .make-ai-assistant__launcher:focus-visible,
@@ -252,7 +292,7 @@
 }
 
 .make-ai-assistant__header h2 {
-  font-size: .875rem;
+  font-size: var(--make-ai-internal-font-size-heading);
   font-weight: 700;
   letter-spacing: 0;
   line-height: 18px;
@@ -260,7 +300,7 @@
 
 .make-ai-assistant__header p {
   color: var(--make-ai-internal-text-secondary);
-  font-size: .6875rem;
+  font-size: var(--make-ai-internal-font-size-meta);
   line-height: 14px;
 }
 
@@ -343,9 +383,9 @@
   border-radius: 5px;
   color: color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-text));
   flex: 0 0 auto;
-  font-size: .625rem;
+  font-size: var(--make-ai-internal-font-size-caption);
   font-weight: 650;
-  line-height: 16px;
+  line-height: var(--make-ai-internal-line-height-caption);
   padding: 0 5px;
 }
 
@@ -393,9 +433,9 @@
   border-radius: 8px;
   box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
   color: var(--make-ai-internal-on-overlay);
-  font-size: 11px;
+  font-size: var(--make-ai-internal-font-size-meta);
   font-weight: 500;
-  line-height: 1.5;
+  line-height: var(--make-ai-internal-line-height-meta);
   max-height: calc(100vh - 32px);
   max-width: min(280px, calc(100vw - 32px));
   opacity: 0;
@@ -509,10 +549,10 @@
 
 .make-ai-assistant__load-failure-label {
   color: var(--make-ai-load-failure-accent);
-  font-size: .625rem;
+  font-size: var(--make-ai-internal-font-size-caption);
   font-weight: 700;
   letter-spacing: .04em;
-  line-height: 1.4;
+  line-height: var(--make-ai-internal-line-height-caption);
 }
 
 .make-ai-assistant__load-failure h3,
@@ -522,15 +562,15 @@
 
 .make-ai-assistant__load-failure h3 {
   color: var(--make-ai-internal-text);
-  font-size: 1rem;
+  font-size: var(--make-ai-internal-font-size-heading);
   font-weight: 700;
-  line-height: 1.45;
+  line-height: var(--make-ai-internal-line-height-heading);
 }
 
 .make-ai-assistant__load-failure p {
   color: var(--make-ai-internal-text-secondary);
   font-size: var(--make-ai-internal-font-size-body);
-  line-height: 1.55;
+  line-height: var(--make-ai-internal-line-height-body);
 }
 
 .make-ai-assistant__message {
@@ -589,9 +629,9 @@
 
 .make-ai-assistant__message-sender {
   color: var(--make-ai-internal-text-secondary);
-  font-size: 12px;
+  font-size: var(--make-ai-internal-font-size-meta);
   font-weight: 600;
-  line-height: 16px;
+  line-height: var(--make-ai-internal-line-height-meta);
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__message-sender {
@@ -637,6 +677,8 @@
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 7%, var(--make-ai-internal-border));
   border-radius: 16px 5px 16px 16px;
   color: color-mix(in srgb, var(--make-ai-internal-text) 82%, var(--make-ai-internal-accent));
+  font-size: var(--make-ai-internal-font-size-heading);
+  line-height: var(--make-ai-internal-line-height-heading);
   padding: 10px 13px;
   white-space: pre-wrap;
 }
@@ -644,8 +686,8 @@
 .make-ai-assistant__assistant-text {
   display: grid;
   font-size: var(--make-ai-internal-font-size-markdown);
-  gap: 10px;
-  line-height: 1.7;
+  gap: var(--make-ai-internal-assistant-block-gap);
+  line-height: var(--make-ai-internal-line-height-body);
   max-width: 100%;
   white-space: normal;
   width: 100%;
@@ -665,10 +707,10 @@
   border-left: 3px solid color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-border));
   color: color-mix(in srgb, var(--make-ai-internal-text) 94%, var(--make-ai-internal-accent));
   display: block;
-  font-size: 1.04em;
+  font-size: var(--make-ai-internal-font-size-heading);
   font-weight: 720;
   letter-spacing: -.01em;
-  line-height: 1.45;
+  line-height: var(--make-ai-internal-line-height-heading);
   min-width: 0;
   padding: 0 0 0 8px;
 }
@@ -678,7 +720,7 @@
 .make-ai-assistant__markdown-heading--5,
 .make-ai-assistant__markdown-heading--6 {
   color: color-mix(in srgb, var(--make-ai-internal-text) 90%, var(--make-ai-internal-accent));
-  font-size: 1em;
+  font-size: var(--make-ai-internal-font-size-heading);
   font-weight: 680;
 }
 
@@ -842,7 +884,7 @@
   flex-direction: column;
   font-size: var(--make-ai-internal-font-size-body);
   gap: 4px;
-  line-height: 1.55;
+  line-height: var(--make-ai-internal-line-height-body);
   overflow-wrap: anywhere;
   padding: 10px 12px;
 }
@@ -858,8 +900,9 @@
   align-items: center;
   color: var(--make-ai-internal-danger);
   display: flex;
+  font-size: var(--make-ai-internal-font-size-heading);
   gap: 8px;
-  line-height: 20px;
+  line-height: var(--make-ai-internal-line-height-heading);
 }
 
 .make-ai-assistant__message-status-icon {
@@ -893,9 +936,9 @@
   color: var(--make-ai-internal-text-secondary);
   display: flex;
   flex: 1;
-  font-size: 12px;
+  font-size: var(--make-ai-internal-font-size-meta);
   gap: 7px;
-  line-height: 18px;
+  line-height: var(--make-ai-internal-line-height-meta);
   min-width: 0;
   min-height: 24px;
 }
@@ -919,8 +962,8 @@
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 88%, transparent);
   border-radius: 10px;
   color: var(--make-ai-internal-text-secondary);
-  font-size: 12px;
-  line-height: 1.55;
+  font-size: var(--make-ai-internal-font-size-meta);
+  line-height: var(--make-ai-internal-line-height-meta);
   overflow: hidden;
   overflow-wrap: anywhere;
 }
@@ -958,7 +1001,7 @@
 .make-ai-assistant__process-count {
   color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 78%, var(--make-ai-internal-bg));
   flex: 0 0 auto;
-  font-size: 11px;
+  font-size: var(--make-ai-internal-font-size-caption);
   margin-left: auto;
 }
 
@@ -991,6 +1034,9 @@
 }
 
 .make-ai-assistant__process li > span:last-child {
+  color: var(--make-ai-internal-text);
+  font-size: var(--make-ai-internal-font-size-body);
+  line-height: var(--make-ai-internal-line-height-body);
   min-width: 0;
   overflow-wrap: anywhere;
 }
@@ -1045,10 +1091,10 @@
   box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
   color: var(--make-ai-internal-on-overlay);
   content: attr(data-tooltip);
-  font-size: 11px;
+  font-size: var(--make-ai-internal-font-size-meta);
   font-weight: 600;
   left: 50%;
-  line-height: 1;
+  line-height: var(--make-ai-internal-line-height-meta);
   opacity: 0;
   padding: 6px 8px;
   pointer-events: none;
@@ -1131,7 +1177,7 @@
   color: var(--make-ai-internal-danger);
   cursor: pointer;
   display: inline-flex;
-  font-size: 12px;
+  font-size: var(--make-ai-internal-font-size-meta);
   font-weight: 600;
   gap: 6px;
   margin-top: 4px;
@@ -1195,7 +1241,7 @@
   color: var(--make-ai-internal-text-secondary);
   cursor: pointer;
   flex: 0 0 auto;
-  font-size: 12px;
+  font-size: var(--make-ai-internal-font-size-meta);
   padding: 7px 10px;
 }
 
@@ -1229,7 +1275,7 @@
   border: 0;
   color: var(--make-ai-internal-text);
   font-size: var(--make-ai-internal-font-size-body);
-  line-height: 1.5;
+  line-height: var(--make-ai-internal-line-height-body);
   max-height: 112px;
   min-height: 38px;
   outline: 0;
@@ -1296,8 +1342,8 @@
 
 .make-ai-assistant__composer-region > p {
   color: var(--make-ai-internal-text-secondary);
-  font-size: 10px;
-  line-height: 1.45;
+  font-size: var(--make-ai-internal-font-size-caption);
+  line-height: var(--make-ai-internal-line-height-caption);
   margin: 7px 0 0;
   text-align: center;
 }
@@ -1307,6 +1353,8 @@
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 86%, transparent);
   border-radius: var(--make-ai-internal-radius);
   container-type: inline-size;
+  font-size: var(--make-ai-internal-font-size-body);
+  line-height: var(--make-ai-internal-line-height-body);
   overflow: hidden;
   padding: 14px;
   width: 100%;
@@ -1322,19 +1370,25 @@
 }
 
 .make-ai-artifact__title {
-  font-size: var(--make-ai-internal-font-size-body);
+  font-size: var(--make-ai-internal-font-size-heading);
   font-weight: 600;
-  line-height: 20px;
+  line-height: var(--make-ai-internal-line-height-heading);
   margin: 0;
 }
 
 .make-ai-artifact__summary,
-.make-ai-artifact__context,
+.make-ai-artifact__context {
+  color: var(--make-ai-internal-text-secondary);
+  font-size: var(--make-ai-internal-font-size-meta);
+  line-height: var(--make-ai-internal-line-height-meta);
+  margin: 6px 0 0;
+}
+
 .make-ai-artifact__record-total {
   color: var(--make-ai-internal-text-secondary);
-  font-size: 11px;
-  line-height: 1.5;
-  margin: 4px 0 0;
+  font-size: var(--make-ai-internal-font-size-caption);
+  line-height: var(--make-ai-internal-line-height-caption);
+  margin: 6px 0 0;
 }
 
 .make-ai-artifact__metric-value {
@@ -1350,7 +1404,7 @@
   align-items: center;
   color: var(--make-ai-internal-text-secondary);
   display: flex;
-  font-size: 11px;
+  font-size: var(--make-ai-internal-font-size-meta);
   gap: 4px;
   margin-top: 5px;
 }
@@ -1373,7 +1427,7 @@
   color: var(--make-ai-internal-accent);
   cursor: pointer;
   display: inline-flex;
-  font-size: 12px;
+  font-size: var(--make-ai-internal-font-size-meta);
   font-weight: 600;
   gap: 5px;
   padding: 3px 0;
@@ -1411,21 +1465,23 @@
 
 .make-ai-artifact__comparison-item:first-child { border-left: 0; padding-left: 0; }
 .make-ai-artifact__comparison-item span,
-.make-ai-artifact__comparison-item small { color: var(--make-ai-internal-text-secondary); font-size: 11px; }
+.make-ai-artifact__comparison-item small { color: var(--make-ai-internal-text-secondary); }
+.make-ai-artifact__comparison-item span { font-size: var(--make-ai-internal-font-size-meta); line-height: var(--make-ai-internal-line-height-meta); }
+.make-ai-artifact__comparison-item small { font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); }
 .make-ai-artifact__comparison-item strong { font-size: 18px; }
 
 .make-ai-artifact__trend { margin-top: 12px; }
-.make-ai-artifact__trend-label { color: var(--make-ai-internal-text-secondary); font-size: 11px; margin-bottom: 8px; }
+.make-ai-artifact__trend-label { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-meta); line-height: var(--make-ai-internal-line-height-meta); margin-bottom: 8px; }
 .make-ai-artifact__trend-bars { align-items: flex-end; display: flex; gap: 5px; height: 112px; }
 .make-ai-artifact__trend-point { align-items: center; display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: flex-end; min-width: 0; }
 .make-ai-artifact__trend-bar { background: var(--make-ai-internal-accent); border-radius: 4px 4px 1px 1px; min-height: 4px; width: min(18px, 70%); }
-.make-ai-artifact__trend-point small { color: var(--make-ai-internal-text-secondary); font-size: 9px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
+.make-ai-artifact__trend-point small { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
 
 .make-ai-artifact__ranking { list-style: none; margin: 12px 0 0; padding: 0; }
-.make-ai-artifact__ranking li { align-items: center; display: grid; font-size: 12px; gap: 8px; grid-template-columns: 20px minmax(72px, auto) minmax(40px, 1fr) auto; margin-top: 9px; }
-.make-ai-artifact__rank { align-items: center; background: var(--make-ai-internal-surface-strong); border-radius: 6px; color: var(--make-ai-internal-text-secondary); display: flex; height: 20px; justify-content: center; }
+.make-ai-artifact__ranking li { align-items: center; display: grid; font-size: var(--make-ai-internal-font-size-body); gap: 8px; grid-template-columns: 20px minmax(72px, auto) minmax(40px, 1fr) auto; margin-top: 9px; }
+.make-ai-artifact__rank { align-items: center; background: var(--make-ai-internal-surface-strong); border-radius: 6px; color: var(--make-ai-internal-text-secondary); display: flex; font-size: var(--make-ai-internal-font-size-meta); height: 20px; justify-content: center; }
 .make-ai-artifact__ranking-label { display: flex; flex-direction: column; min-width: 0; }
-.make-ai-artifact__ranking-label small { color: var(--make-ai-internal-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.make-ai-artifact__ranking-label small { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .make-ai-artifact__ranking-track { background: var(--make-ai-internal-surface-strong); border-radius: 999px; height: 5px; overflow: hidden; }
 .make-ai-artifact__ranking-track span { background: var(--make-ai-internal-accent); border-radius: inherit; display: block; height: 100%; }
 
@@ -1435,10 +1491,10 @@ button.make-ai-artifact__record { cursor: pointer; }
 button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accent-soft); }
 .make-ai-artifact__record-values { display: flex; gap: 12px; min-width: 0; }
 .make-ai-artifact__record-values > span { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.make-ai-artifact__record-values small { color: var(--make-ai-internal-text-secondary); font-size: 9px; }
-.make-ai-artifact__empty { color: var(--make-ai-internal-text-secondary); font-size: 12px; text-align: center; }
+.make-ai-artifact__record-values small { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); }
+.make-ai-artifact__empty { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-meta); line-height: var(--make-ai-internal-line-height-meta); text-align: center; }
 
-.make-ai-artifact__notice { align-items: flex-start; display: flex; font-size: 12px; gap: 9px; line-height: 1.6; margin-top: 8px; }
+.make-ai-artifact__notice { align-items: flex-start; display: flex; font-size: var(--make-ai-internal-font-size-meta); gap: 9px; line-height: var(--make-ai-internal-line-height-meta); margin-top: 8px; }
 .make-ai-artifact__notice > span { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; flex: 0 0 auto; height: 20px; justify-content: center; margin-top: 1px; width: 20px; }
 .make-ai-artifact__notice p { margin: 0; }
 .make-ai-artifact__notice--success { color: var(--make-ai-internal-success); }
@@ -1446,7 +1502,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 .make-ai-artifact__notice--danger { color: var(--make-ai-internal-danger); }
 .make-ai-artifact__notice--info { color: var(--make-ai-internal-accent); }
 
-.make-ai-artifact--unsupported { color: var(--make-ai-internal-text-secondary); display: flex; flex-direction: column; font-size: 12px; gap: 3px; }
+.make-ai-artifact--unsupported { color: var(--make-ai-internal-text-secondary); display: flex; flex-direction: column; font-size: var(--make-ai-internal-font-size-meta); gap: 3px; line-height: var(--make-ai-internal-line-height-meta); }
 
 @keyframes make-ai-pulse {
   0% { opacity: .75; transform: scale(.92); }
@@ -1621,7 +1677,36 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 @media (max-width: 560px) {
   .make-ai-assistant__drawer { width: 100vw; }
   .make-ai-assistant__drawer-resize-handle { display: none; }
-  .make-ai-assistant__launcher { right: var(--make-ai-launcher-mobile-right, 16px); }
+  .make-ai-assistant__launcher {
+    bottom: var(--make-ai-launcher-mobile-bottom, var(--make-ai-launcher-bottom, 16px));
+    left: var(--make-ai-launcher-mobile-left, var(--make-ai-launcher-left, 16px));
+    right: auto;
+    top: auto;
+  }
+  .make-ai-assistant__launcher[data-launcher-position="bottom-right"] {
+    left: auto;
+    right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
+  }
+  .make-ai-assistant__launcher[data-launcher-position="top-left"] {
+    bottom: auto;
+    top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 16px));
+  }
+  .make-ai-assistant__launcher[data-launcher-position="top-right"] {
+    bottom: auto;
+    left: auto;
+    right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
+    top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 16px));
+  }
+  .make-ai-assistant__launcher[data-launcher-position="left-center"] {
+    bottom: auto;
+    top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 50%));
+  }
+  .make-ai-assistant__launcher[data-launcher-position="right-center"] {
+    bottom: auto;
+    left: auto;
+    right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
+    top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 50%));
+  }
   .make-ai-artifact__record {
     grid-template-columns: minmax(0, 1fr) auto;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qfei-design/make-ai-assistant",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [