@hachther/akilio-widget 0.6.2 → 0.6.6

package/dist/style.css

@@ -1,7 +1,7 @@
 :host,
 .akilio-root {
-  --akilio-primary: #0F766E;
-  --akilio-primary-hover: #115E59;
+  --akilio-primary: #0f766e;
+  --akilio-primary-hover: #115e59;
   --akilio-primary-foreground: #ffffff;
   --akilio-accent: #2563eb;
   --akilio-radius: 22px;
@@ -13,7 +13,14 @@
   all: initial;
   display: block;
   direction: ltr;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
   line-height: 1.5;
   text-align: left;
   color-scheme: light dark;
@@ -73,7 +80,7 @@
   background: linear-gradient(
     135deg,
     var(--akilio-primary),
-    var(--akilio-primary-hover)
+    color-mix(in srgb, var(--akilio-primary) 80%, transparent)
   );
   color: #fff !important;
   padding: 11px 16px 11px 12px;
@@ -199,7 +206,7 @@
   gap: 12px;
   border-bottom: 1px solid rgba(212, 212, 216, 0.82);
   background: rgba(255, 255, 255, 0.78);
-  padding: 16px;
+  padding: 10px;
   backdrop-filter: blur(16px);
 }
 
@@ -210,11 +217,6 @@
   place-items: center;
 }
 
-.akilio-logo {
-  width: 94px;
-  height: 34px;
-}
-
 .akilio-logo img {
   display: block;
   width: 100%;
@@ -292,7 +294,7 @@
 
 .akilio-header-description {
   display: -webkit-box;
-  margin: 6px 0 0;
+  margin: 0;
   overflow: hidden;
   color: #71717a;
   font-size: 12px;
@@ -310,8 +312,8 @@
 
 .akilio-header-actions button {
   display: grid;
-  width: 36px;
-  height: 36px;
+  width: 25px;
+  height: 25px;
   place-items: center;
   border: 0;
   border-radius: 999px;
@@ -400,13 +402,26 @@
 }
 
 @keyframes akilio-status-in {
-  from { transform: translateY(2px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
+  from {
+    transform: translateY(2px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 @keyframes akilio-status-pulse {
-  0%, 100% { transform: scale(0.75); opacity: 0.35; }
-  50% { transform: scale(1); opacity: 1; }
+  0%,
+  100% {
+    transform: scale(0.75);
+    opacity: 0.35;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .akilio-bubble {
@@ -428,7 +443,7 @@
   background: linear-gradient(
     135deg,
     var(--akilio-primary),
-    var(--akilio-primary-hover)
+    color-mix(in srgb, var(--akilio-primary) 80%, transparent)
   );
   color: #fff;
 }
@@ -468,10 +483,16 @@
 
 .akilio-answer {
   color: inherit;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.7;
 }
 
+.akilio-answer h2 {
+  font-size: 15px;
+  font-weight: 700;
+  margin: 0;
+}
+
 .akilio-answer p {
   margin: 0.5rem 0;
 }
@@ -746,15 +767,18 @@
   position: relative;
   border-top: 1px solid rgba(212, 212, 216, 0.85);
   background: rgba(255, 255, 255, 0.86);
-  padding: 12px;
+  padding: 8px 12px;
   backdrop-filter: blur(16px);
 }
 
 .akilio-composer-box {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
   border: 1px solid rgba(212, 212, 216, 0.95);
   border-radius: 24px;
   background: #f8fafc;
-  padding: 8px;
+  padding: 6px 12px;
   box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
   transition:
     border-color 150ms ease,
@@ -771,20 +795,20 @@
 }
 
 .akilio-composer textarea {
-  width: 100%;
-  min-height: 48px;
-  max-height: 148px;
-  height: 48px;
+  flex: 1;
+  min-height: 36px;
+  max-height: 120px;
+  height: 36px;
   overflow-y: hidden;
   resize: none;
   border: 0;
   outline: 0;
   background: transparent;
   color: #09090b;
-  padding: 8px 10px;
+  padding: 6px 0;
   font: inherit;
   font-size: 14px;
-  line-height: 1.55;
+  line-height: 1.5;
 }
 
 .akilio-online--unavailable {
@@ -800,44 +824,58 @@
   color: #a1a1aa;
 }
 
-.akilio-composer-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 2px 2px 7px;
-}
-
-.akilio-composer-footer span {
-  color: #71717a;
-  font-size: 11px;
-}
-
-.akilio-composer-footer button {
+.akilio-composer-submit {
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   border: 0;
   border-radius: 999px;
   background: var(--akilio-primary);
   color: #fff;
   cursor: pointer;
-  padding: 10px 15px;
-  font-size: 12px;
-  font-weight: 850;
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
+  padding: 0;
   transition:
-    transform 150ms ease,
-    opacity 150ms ease;
+    background 150ms ease,
+    opacity 150ms ease,
+    transform 150ms ease;
 }
 
-.akilio-composer-footer button:hover:not(:disabled) {
-  transform: translateY(-1px);
+.akilio-composer-submit:hover:not(:disabled) {
   background: var(--akilio-primary-hover);
+  transform: scale(1.05);
+}
+
+.akilio-composer-submit:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.akilio-composer-submit:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.akilio-composer-submit svg {
+  width: 16px;
+  height: 16px;
+}
+
+.akilio-composer-help {
+  margin-top: 6px;
+  padding: 0 12px;
+  color: #71717a;
+  font-size: 11px;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .akilio-powered-by {
-  padding: 7px 4px 0;
+  margin-top: 6px;
+  padding: 0 4px;
   color: #71717a;
   font-size: 10px;
   font-weight: 600;
@@ -845,19 +883,119 @@
   text-align: center;
 }
 
-.akilio-composer-footer button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
+.akilio-coachmark {
+  position: fixed;
+  right: 22px;
+  bottom: 94px;
+  z-index: calc(var(--akilio-z-index) - 1);
+  display: flex;
+  width: min(320px, calc(100vw - 32px));
+  gap: 11px;
+  border: 1px solid color-mix(in srgb, var(--akilio-primary) 24%, #d4d4d8);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.98);
+  color: #17211f;
+  padding: 15px 38px 15px 15px;
+  pointer-events: auto;
+  box-shadow:
+    0 24px 64px rgba(4, 47, 46, 0.18),
+    0 0 0 1px rgba(15, 118, 110, 0.04);
+  animation: akilio-coachmark-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.akilio-coachmark::after {
+  position: absolute;
+  right: 30px;
+  bottom: -7px;
+  width: 13px;
+  height: 13px;
+  transform: rotate(45deg);
+  border-right: 1px solid
+    color-mix(in srgb, var(--akilio-primary) 24%, #d4d4d8);
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--akilio-primary) 24%, #d4d4d8);
+  background: #fff;
+  content: '';
+}
+
+.akilio-coachmark-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--akilio-primary) 11%, #fff);
+  color: var(--akilio-primary);
+}
+
+.akilio-coachmark-icon svg {
+  width: 17px;
+  height: 17px;
+}
+
+.akilio-coachmark-content {
+  min-width: 0;
 }
 
-.akilio-composer-footer svg {
-  width: 15px;
-  height: 15px;
+.akilio-coachmark-content strong {
+  display: block;
+  margin: 0 0 3px;
+  color: #17211f;
+  font-size: 14px;
+  line-height: 1.35;
 }
 
-.akilio-tour {
-  max-width: 360px;
-  border-radius: 18px !important;
+.akilio-coachmark-content p {
+  margin: 0;
+  color: #52525b;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.akilio-coachmark-action {
+  margin-top: 9px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--akilio-primary);
+  color: var(--akilio-primary-foreground);
+  padding: 7px 12px;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.akilio-coachmark-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #71717a;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.akilio-coachmark-close:hover {
+  background: #f4f4f5;
+  color: #18181b;
+}
+
+@keyframes akilio-coachmark-in {
+  from {
+    transform: translateY(8px) scale(0.98);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
 }
 
 @media (max-width: 640px) {
@@ -867,6 +1005,11 @@
     padding: 10px 12px;
   }
 
+  .akilio-coachmark {
+    right: 16px;
+    bottom: 82px;
+  }
+
   .akilio-launcher strong {
     display: none;
   }
@@ -879,7 +1022,7 @@
     max-width: 94%;
   }
 
-  .akilio-composer-footer span {
+  .akilio-composer-help {
     display: none;
   }
 }
@@ -1101,7 +1244,7 @@
     border-radius: 18px;
   }
   .akilio-panel-header {
-    padding-top: max(14px, env(safe-area-inset-top));
+    padding-top: max(10px, env(safe-area-inset-top));
   }
   .akilio-thread {
     padding-inline: 12px;
@@ -1126,6 +1269,10 @@
   background: rgba(24, 24, 27, 0.92);
   border-color: #3f3f46;
 }
+.akilio-root[data-akilio-color-mode='dark'] .akilio-composer-box {
+  background: #18181b;
+  border-color: #3f3f46;
+}
 .akilio-root[data-akilio-color-mode='dark'] .akilio-composer textarea {
   color: var(--akilio-text, #fafafa);
   caret-color: var(--akilio-text, #fafafa);
@@ -1138,21 +1285,40 @@
   -webkit-text-fill-color: var(--akilio-muted, #a1a1aa);
   opacity: 1;
 }
-.akilio-root[data-akilio-color-mode='dark'] .akilio-composer-footer span {
+.akilio-root[data-akilio-color-mode='dark'] .akilio-composer-help {
   color: var(--akilio-muted, #a1a1aa);
 }
 .akilio-root[data-akilio-color-mode='dark'] .akilio-powered-by {
   color: var(--akilio-muted, #a1a1aa);
 }
-.akilio-root[data-akilio-color-mode='dark'] .akilio-composer-box:focus-within {
+.akilio-root[data-akilio-color-mode='dark'] .akilio-coachmark {
+  border-color: color-mix(in srgb, var(--akilio-primary) 34%, #3f3f46);
+  background: rgba(24, 24, 27, 0.98);
+  color: #fafafa;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-coachmark::after {
+  border-color: color-mix(in srgb, var(--akilio-primary) 34%, #3f3f46);
   background: #18181b;
 }
-
-@media (max-width: 420px) {
-  .akilio-logo {
-    width: 78px;
-    height: 30px;
-  }
+.akilio-root[data-akilio-color-mode='dark']
+  .akilio-coachmark-content
+  strong {
+  color: #fafafa;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-coachmark-content p {
+  color: #a1a1aa;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-coachmark-close {
+  color: #a1a1aa;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-coachmark-close:hover {
+  background: #27272a;
+  color: #fafafa;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-composer-box:focus-within {
+  background: #18181b;
+  border-color: color-mix(in srgb, var(--akilio-primary) 55%, #3f3f46);
 }
 
 .akilio-privacy-consent-copy {
@@ -1216,11 +1382,44 @@
   color: #4338ca;
   font-weight: 700;
 }
-.akilio-product-grid {
+/* Product grid layout variants */
+.akilio-products-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
+
+/* Vertical layout: 2-column grid (default) */
+.akilio-products-grid--vertical {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+/* Horizontal layout: single column full-width cards */
+.akilio-products-grid--horizontal {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Responsive: collapse vertical to single column on small screens */
+@media (max-width: 640px) {
+  .akilio-products-grid--vertical {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 390px) {
+  .akilio-products-grid--vertical {
+    grid-template-columns: 1fr;
+  }
+
+  .akilio-products-grid--horizontal {
+    gap: 8px;
+  }
+}
 .akilio-product-card {
   min-width: 0;
   overflow: hidden;
@@ -1242,7 +1441,9 @@
   object-fit: cover;
   transition: transform 180ms ease;
 }
-.akilio-product-card:hover .akilio-product-media img { transform: scale(1.025); }
+.akilio-product-card:hover .akilio-product-media img {
+  transform: scale(1.025);
+}
 .akilio-product-placeholder {
   width: 100%;
   height: 100%;
@@ -1251,7 +1452,11 @@
   color: var(--akilio-primary);
   font-size: 30px;
   font-weight: 800;
-  background: linear-gradient(145deg, rgba(8,145,178,.12), rgba(37,99,235,.08));
+  background: linear-gradient(
+    145deg,
+    rgba(8, 145, 178, 0.12),
+    rgba(37, 99, 235, 0.08)
+  );
 }
 .akilio-stock {
   position: absolute;
@@ -1263,13 +1468,17 @@
   white-space: nowrap;
   padding: 4px 7px;
   border-radius: 999px;
-  background: rgba(127, 29, 29, .9);
+  background: rgba(127, 29, 29, 0.9);
   color: #fff;
   font-size: 9px;
   font-weight: 700;
 }
-.akilio-stock--available { background: rgba(6, 95, 70, .9); }
-.akilio-product-body { padding: 11px; }
+.akilio-stock--available {
+  background: rgba(6, 95, 70, 0.9);
+}
+.akilio-product-body {
+  padding: 11px;
+}
 .akilio-product-vendor,
 .akilio-product-variant {
   display: block;
@@ -1291,49 +1500,87 @@
   -webkit-box-orient: vertical;
 }
 .akilio-product-price {
-  min-height: 37px;
+  /*min-height: 37px;*/
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 5px;
-  margin-bottom: 9px;
+  /*margin-bottom: 9px;*/
+}
+.akilio-product-price strong {
+  color: #0f172a;
+  font-size: 14px;
+}
+.akilio-product-price del {
+  color: #94a3b8;
+  font-size: 10px;
 }
-.akilio-product-price strong { color: #0f172a; font-size: 14px; }
-.akilio-product-price del { color: #94a3b8; font-size: 10px; }
 .akilio-product-action {
-  width: 100%;
-  min-height: 34px;
+  width: auto;
+  min-height: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 7px 10px;
+  padding: 6px 12px;
   border: 0;
-  border-radius: 10px;
-  background: var(--akilio-primary);
-  color: var(--akilio-primary-foreground);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--akilio-primary);
   font: inherit;
   font-size: 11px;
   font-weight: 700;
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
   cursor: pointer;
+  transition:
+    color 150ms ease,
+    background 150ms ease;
 }
-.akilio-product-action:hover { filter: brightness(.96); }
+
+.akilio-product-action:hover {
+  background: color-mix(in srgb, var(--akilio-primary) 8%, transparent);
+  text-decoration: underline;
+}
+
 .akilio-product-action:focus-visible {
   outline: 3px solid color-mix(in srgb, var(--akilio-primary) 28%, transparent);
   outline-offset: 2px;
 }
-.akilio-product-action:disabled { opacity: .55; cursor: not-allowed; }
-.akilio-root[data-akilio-color-mode='dark'] .akilio-products-heading { color: #94a3b8; }
-.akilio-root[data-akilio-color-mode='dark'] .akilio-products-heading span { background: #312e81; color: #e0e7ff; }
-.akilio-root[data-akilio-color-mode='dark'] .akilio-product-card { background: #111827; border-color: #334155; box-shadow: none; }
-.akilio-root[data-akilio-color-mode='dark'] .akilio-product-media { background: #1e293b; }
+
+.akilio-product-action:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-products-heading {
+  color: #94a3b8;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-products-heading span {
+  background: #312e81;
+  color: #e0e7ff;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-product-card {
+  background: #111827;
+  border-color: #334155;
+  box-shadow: none;
+}
+.akilio-root[data-akilio-color-mode='dark'] .akilio-product-media {
+  background: #1e293b;
+}
 .akilio-root[data-akilio-color-mode='dark'] .akilio-product-card h4,
-.akilio-root[data-akilio-color-mode='dark'] .akilio-product-price strong { color: #f8fafc; }
+.akilio-root[data-akilio-color-mode='dark'] .akilio-product-price strong {
+  color: #f8fafc;
+}
 .akilio-root[data-akilio-color-mode='dark'] .akilio-product-vendor,
-.akilio-root[data-akilio-color-mode='dark'] .akilio-product-variant { color: #94a3b8; }
+.akilio-root[data-akilio-color-mode='dark'] .akilio-product-variant {
+  color: #94a3b8;
+}
 @media (max-width: 390px) {
-  .akilio-product-grid { grid-template-columns: 1fr; }
-  .akilio-product-media { aspect-ratio: 16 / 9; }
+  .akilio-products-grid {
+    grid-template-columns: 1fr;
+  }
+  .akilio-product-media {
+    aspect-ratio: 16 / 9;
+  }
 }
 
 .akilio-response-suggestions {
@@ -1346,7 +1593,7 @@
 .akilio-response-suggestions button {
   appearance: none;
   border: 1px solid color-mix(in srgb, var(--akilio-primary) 26%, #d4d4d8);
-  border-radius: 999px;
+  border-radius: 15px;
   background: color-mix(in srgb, var(--akilio-primary) 7%, #ffffff);
   color: color-mix(in srgb, var(--akilio-primary) 72%, #18181b);
   cursor: pointer;
@@ -1356,7 +1603,10 @@
   font-size: 12px;
   font-weight: 700;
   line-height: 1.35;
-  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
+  transition:
+    transform 150ms ease,
+    border-color 150ms ease,
+    background 150ms ease;
 }
 
 .akilio-response-suggestions button:hover {
@@ -1370,8 +1620,161 @@
   outline-offset: 2px;
 }
 
-.akilio-root[data-akilio-color-mode='dark'] .akilio-response-suggestions button {
+.akilio-root[data-akilio-color-mode='dark']
+  .akilio-response-suggestions
+  button {
   border-color: color-mix(in srgb, var(--akilio-primary) 34%, #3f3f46);
   background: color-mix(in srgb, var(--akilio-primary) 14%, #18181b);
   color: #f4f4f5;
 }
+
+/* Product card layout variants: vertical (default) and horizontal */
+
+/* Vertical layout (default/standard) */
+.akilio-product-card--vertical {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
+}
+
+.akilio-product-card--vertical .akilio-product-media {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  background: #f1f5f9;
+}
+
+.akilio-product-card--vertical .akilio-product-body {
+  padding: 11px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Horizontal layout */
+.akilio-product-card--horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
+  align-items: stretch;
+}
+
+.akilio-product-card--horizontal .akilio-product-media {
+  flex: 0 0 25%;
+  min-width: 80px;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: #f1f5f9;
+}
+
+.akilio-product-card--horizontal .akilio-product-body {
+  flex: 1;
+  padding: 11px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+/* Adjust product action width for horizontal */
+.akilio-product-card--horizontal .akilio-product-action {
+  width: 100%;
+}
+
+/* Dark mode support for horizontal */
+.akilio-root[data-akilio-color-mode='dark'] .akilio-product-card--vertical,
+.akilio-root[data-akilio-color-mode='dark'] .akilio-product-card--horizontal {
+  background: #111827;
+  border-color: #334155;
+  box-shadow: none;
+}
+
+.akilio-root[data-akilio-color-mode='dark']
+  .akilio-product-card--vertical
+  .akilio-product-media,
+.akilio-root[data-akilio-color-mode='dark']
+  .akilio-product-card--horizontal
+  .akilio-product-media {
+  background: #1e293b;
+}
+
+/* System dark mode for horizontal */
+@media (prefers-color-scheme: dark) {
+  .akilio-root[data-akilio-color-mode='system'] .akilio-product-card--vertical,
+  .akilio-root[data-akilio-color-mode='system']
+    .akilio-product-card--horizontal {
+    background: #111827;
+    border-color: #334155;
+    box-shadow: none;
+  }
+
+  .akilio-root[data-akilio-color-mode='system']
+    .akilio-product-card--vertical
+    .akilio-product-media,
+  .akilio-root[data-akilio-color-mode='system']
+    .akilio-product-card--horizontal
+    .akilio-product-media {
+    background: #1e293b;
+  }
+}
+
+/* Responsive: collapse horizontal to vertical on small screens */
+@media (max-width: 480px) {
+  .akilio-product-card--horizontal {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .akilio-product-card--horizontal .akilio-product-media {
+    flex: 1;
+    min-width: unset;
+    aspect-ratio: 4 / 3;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 390px) {
+  .akilio-product-card--vertical .akilio-product-media {
+    aspect-ratio: 16 / 9;
+  }
+
+  .akilio-product-card--horizontal {
+    flex-direction: column;
+  }
+
+  .akilio-product-card--horizontal .akilio-product-media {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+/* Premium inline source badge used in markdown answers */
+.source-ref {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.3rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  vertical-align: super;
+  color: #334155;
+  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+  border: 1px solid #dbeafe;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  user-select: none;
+  white-space: nowrap;
+}