@adatechnology/notification-ui 0.1.0-rc.4 → 0.1.0-rc.6

package/dist/styles.css

@@ -5,16 +5,30 @@
 .adn-workspace,
 .adn-settings {
   --adn-color-surface: var(--adn-surface, #ffffff);
-  --adn-color-text: var(--adn-text, #111827);
-  --adn-color-muted: var(--adn-muted, #6b7280);
-  --adn-color-accent: var(--adn-accent, #3b82f6);
-  --adn-color-danger: var(--adn-danger, #dc2626);
-  --adn-color-border: var(--adn-border, #e5e7eb);
-  --adn-radius: var(--adn-radius-md, 8px);
+  --adn-color-text: var(--adn-text, #0f172a);
+  --adn-color-muted: var(--adn-muted, #64748b);
+  --adn-color-accent: var(--adn-accent, #2f4bd8);
+  --adn-color-danger: var(--adn-danger, #b91c1c);
+  --adn-color-warning: var(--adn-warning, #b45309);
+  --adn-color-border: var(--adn-border, #e2e8f0);
+  --adn-color-canvas: var(--adn-canvas, color-mix(in srgb, var(--adn-color-accent) 4%, #ffffff));
+  --adn-color-accent-soft: color-mix(in srgb, var(--adn-color-accent) 8%, #ffffff);
+  --adn-color-accent-line: color-mix(in srgb, var(--adn-color-accent) 28%, #ffffff);
+  --adn-color-faint: color-mix(in srgb, var(--adn-color-muted) 60%, #ffffff);
+  --adn-shadow-card: 0 1px 2px color-mix(in srgb, var(--adn-color-text) 6%, transparent);
+  --adn-radius: var(--adn-radius-md, 12px);
+  --adn-radius-sm: 8px;
+  --adn-font-mono:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
   --adn-space-1: 4px;
   --adn-space-2: 8px;
   --adn-space-3: 12px;
   --adn-space-4: 16px;
+  --adn-space-5: 20px;
+  --adn-space-6: 24px;
   --adn-touch-target: 44px;
   color: var(--adn-color-text);
   font-family: inherit;
@@ -463,7 +477,7 @@
     grid-template-columns: 2fr 1fr;
   }
   .adn-settings__templates {
-    grid-template-columns: 2fr 3fr;
+    grid-template-columns: 320px minmax(0, 1fr);
   }
   .adn-button {
     min-height: 36px;
@@ -752,4 +766,1684 @@
   flex-wrap: wrap;
   gap: var(--adn-space-3, 12px);
 }
+.adn-settings__templates {
+  align-items: start;
+}
+.adn-settings__template-list,
+.adn-settings__editor {
+  min-width: 0;
+}
+.adn-settings__template-list .adn-settings__row > button:first-child {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.adn-settings__editor {
+  box-shadow: var(--adn-shadow-card);
+  padding: 0;
+  overflow: hidden;
+}
+.adn-settings__editor > * {
+  padding-left: var(--adn-space-4, 16px);
+  padding-right: var(--adn-space-4, 16px);
+}
+.adn-settings__editor-header {
+  padding-top: var(--adn-space-4, 16px);
+  padding-bottom: var(--adn-space-4, 16px);
+  border-bottom: 1px solid var(--adn-color-border);
+}
+.adn-settings__section-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--adn-color-muted);
+}
+.adn-settings__list-header {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--adn-space-2, 8px);
+  padding-bottom: var(--adn-space-3, 12px);
+}
+.adn-settings__list-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--adn-space-3, 12px);
+}
+.adn-settings__template-list ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-settings__template-list li + li {
+  border-top: 0;
+}
+.adn-settings__row > button:first-child {
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-surface);
+  padding: var(--adn-space-3, 12px);
+  text-align: left;
+}
+.adn-settings__row > button:first-child:hover {
+  border-color: var(--adn-color-accent-line);
+}
+.adn-settings__row--active {
+  border-color: var(--adn-color-accent) !important;
+  box-shadow: var(--adn-shadow-card);
+}
+.adn-settings__row-title {
+  font-family: var(--adn-font-mono);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.adn-settings__row-body {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.45;
+}
+.adn-settings__badge {
+  border: 1px solid var(--adn-color-accent-line);
+  background: var(--adn-color-accent-soft);
+  color: var(--adn-color-accent);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+.adn-settings__version {
+  font-size: 0.6875rem;
+  color: var(--adn-color-muted);
+  font-variant-numeric: tabular-nums;
+}
+.adn-settings__new {
+  white-space: nowrap;
+  border: 0;
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-accent);
+  color: #ffffff;
+  font-weight: 500;
+  padding: 7px 12px;
+}
+.adn-settings__template-list .adn-settings__remove {
+  width: auto;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  align-self: stretch;
+  border: 1px solid color-mix(in srgb, var(--adn-color-danger) 30%, #ffffff);
+  border-radius: var(--adn-radius-sm);
+  background: transparent;
+  padding: 0 var(--adn-space-3, 12px);
+}
+.adn-settings__template-list .adn-settings__remove:hover {
+  background: color-mix(in srgb, var(--adn-color-danger) 6%, transparent);
+}
+.adn-settings__variable {
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-surface);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-settings__variable:hover {
+  border-color: var(--adn-color-accent);
+}
+.adn-settings__variable-name {
+  font-family: var(--adn-font-mono);
+  font-weight: 600;
+  color: var(--adn-color-accent);
+}
+.adn-settings__variable--used {
+  background: var(--adn-color-accent-soft);
+}
+.adn-settings__field input,
+.adn-settings__field textarea,
+.adn-settings__field select {
+  border: 1px solid color-mix(in srgb, var(--adn-color-border) 70%, var(--adn-color-muted));
+  border-radius: var(--adn-radius-sm);
+  padding: 9px 12px;
+  font: inherit;
+  color: inherit;
+  background: var(--adn-color-surface);
+}
+.adn-settings__field input:focus-visible,
+.adn-settings__field textarea:focus-visible,
+.adn-settings__field select:focus-visible {
+  outline: 2px solid var(--adn-color-accent);
+  outline-offset: -1px;
+  border-color: var(--adn-color-accent);
+}
+.adn-settings__previews {
+  background: var(--adn-color-canvas);
+  border-top: 1px solid var(--adn-color-border);
+  padding-top: var(--adn-space-4, 16px);
+  padding-bottom: var(--adn-space-4, 16px);
+}
+.adn-settings__preview-frames {
+  --adn-preview-scale: 0.52;
+  align-items: flex-start;
+  overflow: visible;
+}
+.adn-settings__preview-frame {
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-surface);
+  width: var(--adn-preview-width, 600px);
+  zoom: var(--adn-preview-scale);
+}
+.adn-settings__preview-subject {
+  font-weight: 600;
+}
+.adn-settings__preview-warning {
+  font-weight: 500;
+}
+.adn-settings__actions {
+  border-top: 1px solid var(--adn-color-border);
+  background: var(--adn-color-canvas);
+  padding-top: var(--adn-space-3, 12px);
+  padding-bottom: var(--adn-space-3, 12px);
+  display: flex;
+  align-items: center;
+  gap: var(--adn-space-3, 12px);
+}
+.adn-settings__actions button:first-child {
+  border: 0;
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-accent);
+  color: #ffffff;
+  font-weight: 600;
+  padding: 8px 16px;
+}
+.adn-settings__actions button:first-child:disabled {
+  background: var(--adn-color-faint);
+  color: #ffffff;
+}
+.adn-settings__tab {
+  font-weight: 500;
+  min-height: 40px;
+}
+.adn-settings__tab--active {
+  font-weight: 600;
+}
+.adn-settings__policies .adn-settings__category {
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-surface);
+  padding: var(--adn-space-3, 12px) var(--adn-space-4, 16px);
+}
+.adn-settings__category-title {
+  font-weight: 500;
+  margin: 0 0 var(--adn-space-2, 8px);
+}
+.dark .adn-bell,
+.dark .adn-list,
+.dark .adn-preferences,
+.dark .adn-workspace,
+.dark .adn-settings {
+  --adn-color-surface: var(--adn-surface, #0f172a);
+  --adn-color-text: var(--adn-text, #e2e8f0);
+  --adn-color-muted: var(--adn-muted, #94a3b8);
+  --adn-color-border: var(--adn-border, #1e293b);
+  --adn-color-canvas: var(--adn-canvas, #0b1220);
+  --adn-color-accent-soft: color-mix(in srgb, var(--adn-color-accent) 22%, #0f172a);
+  --adn-color-accent-line: color-mix(in srgb, var(--adn-color-accent) 45%, #0f172a);
+  --adn-color-faint: color-mix(in srgb, var(--adn-color-muted) 40%, #0f172a);
+  --adn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.adn-preview-phone {
+  border: 8px solid var(--adn-preview-bezel, #1e2532);
+  overflow: hidden;
+  background: #ffffff;
+}
+.adn-preview-phone--ios {
+  width: 375px;
+  border-radius: 34px;
+}
+.adn-preview-phone--android {
+  width: 360px;
+  border-radius: 18px;
+}
+.adn-preview-phone--dark {
+  background: var(--adn-preview-lockscreen, #0b1220);
+}
+.adn-preview-phone__screen {
+  min-height: 260px;
+  display: flex;
+  flex-direction: column;
+}
+.adn-preview-browser {
+  width: 600px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #ffffff;
+}
+.adn-preview-browser__bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--adn-preview-chrome, #f1f5f9);
+  border-bottom: 1px solid var(--adn-color-border);
+}
+.adn-preview-browser__dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--adn-preview-chrome-dot, #cbd5e1);
+}
+.adn-preview-browser__address {
+  flex: 1;
+  margin-left: 8px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: #ffffff;
+  border: 1px solid var(--adn-color-border);
+  font-size: 11px;
+  color: var(--adn-color-muted);
+}
+.adn-preview-mail {
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.adn-preview-mail--compact {
+  padding: 14px 16px;
+  gap: 8px;
+}
+.adn-preview-mail__subject {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.adn-preview-mail__from {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.adn-preview-mail__sender {
+  font-weight: 500;
+}
+.adn-preview-mail__to {
+  color: var(--adn-color-muted);
+}
+.adn-preview-mail__body {
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--adn-preview-mail-text, #334155);
+  white-space: pre-wrap;
+}
+.adn-preview-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  background: var(--adn-color-accent);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+.adn-preview-avatar--small {
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
+}
+.adn-preview-wa {
+  flex: 1;
+  padding: 16px 12px;
+  background: var(--adn-preview-wa-wallpaper, #efeae2);
+  display: flex;
+}
+.adn-preview-wa__bubble {
+  position: relative;
+  max-width: 85%;
+  background: #ffffff;
+  border-radius: 8px;
+  border-top-left-radius: 0;
+  padding: 8px 10px 6px;
+  box-shadow: 0 1px 1px var(--adn-preview-wa-shadow, rgba(11, 20, 26, 0.13));
+  align-self: flex-start;
+}
+.adn-preview-wa__text {
+  font-size: 15px;
+  line-height: 1.45;
+  color: var(--adn-preview-wa-text, #111b21);
+  white-space: pre-wrap;
+}
+.adn-preview-wa__time {
+  font-size: 11px;
+  color: var(--adn-preview-wa-time, #667781);
+  text-align: right;
+  margin-top: 2px;
+}
+.adn-preview-sms {
+  flex: 1;
+  padding: 16px 12px;
+  background: #ffffff;
+  display: flex;
+}
+.adn-preview-sms__bubble {
+  max-width: 85%;
+  background: var(--adn-preview-sms-bubble, #e9e9eb);
+  color: var(--adn-preview-sms-text, #000000);
+  border-radius: 18px;
+  padding: 9px 13px;
+  font-size: 15px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  align-self: flex-start;
+}
+.adn-preview-push {
+  flex: 1;
+  padding: 40px 12px 16px;
+  background: var(--adn-preview-lockscreen-bg, linear-gradient(160deg, #172033, #0b1220));
+  display: flex;
+  align-items: flex-start;
+}
+.adn-preview-push__card {
+  width: 100%;
+  border-radius: 16px;
+  padding: 10px 12px;
+  background: var(--adn-preview-push-card, rgba(255, 255, 255, 0.92));
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.adn-preview-push__app {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--adn-preview-push-app, #4b5563);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.adn-preview-push__time {
+  margin-left: auto;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.adn-preview-push__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--adn-preview-push-title, #111827);
+}
+.adn-preview-push__body {
+  font-size: 14px;
+  line-height: 1.35;
+  color: var(--adn-preview-push-body, #374151);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.adn-preview-inbox {
+  width: 480px;
+  display: flex;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--adn-color-surface);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+}
+.adn-preview-inbox__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--adn-color-accent);
+  margin-top: 6px;
+  flex-shrink: 0;
+}
+.adn-preview-inbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.adn-preview-inbox__title {
+  font-size: 14px;
+  font-weight: 600;
+}
+.adn-preview-inbox__body {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--adn-color-muted);
+  white-space: pre-wrap;
+}
+.adn-preview-phone--android .adn-preview-sms__bubble {
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+  background: var(--adn-preview-sms-bubble-android, #e8eaed);
+}
+.adn-preview-phone--android .adn-preview-push__card {
+  border-radius: 24px;
+}
+.adn-preview-phone--ios .adn-preview-push__card {
+  border-radius: 14px;
+}
+.adn-preview-phone--android .adn-preview-push__title {
+  font-weight: 500;
+}
+.adn-preview-phone--android .adn-preview-wa__bubble {
+  border-radius: 6px;
+  border-top-left-radius: 0;
+}
+.adn-settings__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.adn-settings__field-label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0;
+}
+.adn-settings__field .adn-settings__hint {
+  margin: -2px 0 2px;
+  line-height: 1.4;
+}
+.adn-settings__field input,
+.adn-settings__field select {
+  min-height: 40px;
+}
+.adn-settings__field textarea {
+  min-height: 120px;
+  resize: vertical;
+  line-height: 1.55;
+}
+.adn-settings__identity {
+  align-items: start;
+  gap: var(--adn-space-3, 12px);
+}
+@media (min-width: 640px) {
+  .adn-settings__identity {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
+  }
+}
+.adn-settings__channel-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-settings__channel-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 0 12px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  background: var(--adn-color-surface);
+  cursor: pointer;
+}
+.adn-settings__channel-chip:hover {
+  border-color: var(--adn-color-accent-line);
+}
+.adn-settings__channel-chip:has(input:checked) {
+  border-color: var(--adn-color-accent);
+  background: var(--adn-color-accent-soft);
+  color: var(--adn-color-accent);
+  font-weight: 500;
+}
+.adn-settings__channel-chip input {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--adn-color-accent);
+}
+.adn-settings__preview-frames {
+  --adn-preview-scale: 0.46;
+  gap: var(--adn-space-3, 12px);
+}
+.adn-settings__preview-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-2, 8px);
+  padding-top: var(--adn-space-3, 12px);
+}
+.adn-settings__preview-group + .adn-settings__preview-group {
+  border-top: 1px dashed var(--adn-color-border);
+}
+.adn-settings__preview-channel {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--adn-color-accent);
+}
+.adn-preview-phone__screen {
+  min-height: 260px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+.adn-preview-phone--ios .adn-preview-phone__screen {
+  border-radius: 26px;
+}
+.adn-preview-phone--android .adn-preview-phone__screen {
+  border-radius: 10px;
+}
+.adn-preview-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--adn-preview-status, #111827);
+  flex-shrink: 0;
+}
+.adn-preview-phone--dark .adn-preview-status {
+  color: #ffffff;
+}
+.adn-preview-status__time {
+  min-width: 34px;
+}
+.adn-preview-status__icons {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.adn-preview-phone__island {
+  width: 62px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--adn-preview-bezel, #1e2532);
+  margin: 0 auto;
+}
+.adn-preview-phone__punch {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--adn-preview-bezel, #1e2532);
+  margin-left: 6px;
+}
+.adn-preview-phone__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.adn-preview-phone__gesture {
+  width: 108px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--adn-preview-gesture, rgba(17, 24, 39, 0.35));
+  margin: 6px auto 7px;
+  flex-shrink: 0;
+}
+.adn-preview-phone--dark .adn-preview-phone__gesture {
+  background: rgba(255, 255, 255, 0.5);
+}
+.adn-preview-phone--android .adn-preview-phone__gesture {
+  width: 88px;
+}
+.adn-preview-mailapp {
+  display: flex;
+  flex-direction: column;
+}
+.adn-preview-mailapp__bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--adn-color-border);
+}
+.adn-preview-mailapp__menu {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.adn-preview-mailapp__menu span {
+  width: 15px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--adn-preview-mail-text, #334155);
+  display: block;
+}
+.adn-preview-mailapp__search {
+  flex: 1;
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: var(--adn-preview-chrome, #f1f5f9);
+  font-size: 12px;
+  color: var(--adn-color-muted);
+}
+.adn-preview-mailapp__actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 14px;
+  color: var(--adn-preview-mail-text, #334155);
+  border-bottom: 1px solid var(--adn-color-border);
+  flex-shrink: 0;
+}
+.adn-preview-mailapp__spacer {
+  flex: 1;
+}
+.adn-preview-mail__time {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--adn-color-muted);
+}
+.adn-preview-phone__content {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.adn-preview-mailapp__body-scroll,
+.adn-preview-wa,
+.adn-preview-sms {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.adn-preview-phone--ios .adn-preview-phone__screen {
+  height: 760px;
+}
+.adn-preview-phone--android .adn-preview-phone__screen {
+  height: 740px;
+}
+.adn-preview-browser__viewport {
+  height: 620px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.adn-settings__preview-frames {
+  overflow-x: auto;
+  padding-bottom: var(--adn-space-2, 8px);
+}
+.adn-preview-phone {
+  position: relative;
+  border-width: 5px;
+}
+.adn-preview-phone__btn {
+  position: absolute;
+  background: var(--adn-preview-bezel, #1e2532);
+  border-radius: 2px;
+}
+.adn-preview-phone__btn--mute {
+  left: -7px;
+  top: 96px;
+  width: 3px;
+  height: 26px;
+}
+.adn-preview-phone__btn--up {
+  left: -7px;
+  top: 140px;
+  width: 3px;
+  height: 46px;
+}
+.adn-preview-phone__btn--down {
+  left: -7px;
+  top: 198px;
+  width: 3px;
+  height: 46px;
+}
+.adn-preview-phone__btn--power {
+  right: -7px;
+  top: 160px;
+  width: 3px;
+  height: 70px;
+}
+.adn-preview-phone--android .adn-preview-phone__btn--mute {
+  display: none;
+}
+.adn-preview-phone--android .adn-preview-phone__btn--up {
+  top: 120px;
+  height: 40px;
+}
+.adn-preview-phone--android .adn-preview-phone__btn--down {
+  top: 168px;
+  height: 40px;
+}
+.adn-preview-mailapp__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 20px;
+  color: var(--adn-preview-mail-icon, #5f6368);
+  border-bottom: 1px solid var(--adn-color-border);
+}
+.adn-preview-mailapp__search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--adn-color-muted);
+}
+.adn-preview-mail__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.adn-preview-mail__from {
+  align-items: flex-start;
+}
+.adn-preview-mail__subject {
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+.adn-settings__channel-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-3, 12px);
+  padding: var(--adn-space-4, 16px);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-canvas);
+}
+.adn-settings__channel-block-header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--adn-space-2, 8px);
+  flex-wrap: wrap;
+}
+.adn-settings__channel-block .adn-settings__previews {
+  border-top: 1px solid var(--adn-color-border);
+  background: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+.adn-settings__channel-block input,
+.adn-settings__channel-block textarea {
+  background: var(--adn-color-surface);
+}
+.adn-settings__channel-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--adn-space-1, 4px);
+  border-bottom: 1px solid var(--adn-color-border);
+}
+.adn-settings__channel-tabs .adn-settings__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  background: none;
+  color: var(--adn-color-muted);
+  min-height: 40px;
+}
+.adn-settings__channel-tabs .adn-settings__tab--active {
+  border-bottom-color: var(--adn-color-accent);
+  color: var(--adn-color-accent);
+}
+.adn-settings__tab-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--adn-color-danger);
+}
+.adn-settings__channel-block {
+  border: 0;
+  background: transparent;
+  padding: var(--adn-space-3, 12px) 0 0;
+}
+.adn-preview-mailapp__account {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--adn-preview-mail-icon, #5f6368);
+}
+.adn-preview-mailapp__split {
+  display: flex;
+  min-height: 0;
+}
+.adn-preview-mailapp__rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 10px;
+  color: var(--adn-preview-mail-icon, #5f6368);
+  flex-shrink: 0;
+}
+.adn-preview-mailapp__compose {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  background: var(--adn-color-accent-soft);
+  color: var(--adn-color-accent);
+}
+.adn-preview-mailapp__rail-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+}
+.adn-preview-mailapp__rail-item--active {
+  background: var(--adn-color-accent-soft);
+  color: var(--adn-color-accent);
+}
+.adn-preview-mailapp__divider {
+  width: 1px;
+  height: 16px;
+  background: var(--adn-color-border);
+}
+.adn-preview-mailapp__toolbar {
+  gap: 12px;
+}
+.adn-preview-mailapp__counter {
+  font-size: 11px;
+  color: var(--adn-color-muted);
+  font-variant-numeric: tabular-nums;
+}
+.adn-preview-mail__subject-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.adn-preview-mail__folder {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--adn-preview-chrome, #f1f5f9);
+  color: var(--adn-color-muted);
+  white-space: nowrap;
+}
+.adn-preview-mail__subject-actions,
+.adn-preview-mail__from-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  color: var(--adn-preview-mail-icon, #5f6368);
+  flex-shrink: 0;
+}
+.adn-preview-mail__sender-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.adn-preview-mail__address {
+  font-size: 12px;
+  color: var(--adn-color-muted);
+}
+.adn-preview-mail__unsubscribe {
+  font-size: 12px;
+  color: var(--adn-color-accent);
+  font-weight: 500;
+}
+.adn-preview-mailapp__actions {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--adn-color-surface);
+}
+.adn-preview-mailapp__scroll {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+}
+.adn-preview-phone__content {
+  overflow: hidden;
+}
+.adn-preview-wa__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--adn-preview-wa-header, #075e54);
+  color: #ffffff;
+  flex-shrink: 0;
+}
+.adn-preview-wa__avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.25);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+.adn-preview-wa__contact {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.adn-preview-wa__name {
+  font-size: 14px;
+  font-weight: 500;
+}
+.adn-preview-wa__status {
+  font-size: 11px;
+  opacity: 0.85;
+}
+.adn-preview-wa__header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  margin-left: auto;
+}
+.adn-preview-wa {
+  flex: 1;
+  padding: 14px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+.adn-preview-wa__day {
+  align-self: center;
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--adn-preview-wa-time, #667781);
+}
+.adn-preview-wa__bubble::before {
+  content: "";
+  position: absolute;
+  left: -7px;
+  top: 0;
+  width: 8px;
+  height: 13px;
+  background: #ffffff;
+  clip-path: polygon(100% 0, 100% 100%, 0 0);
+}
+.adn-preview-wa__composer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: var(--adn-preview-wa-wallpaper, #efeae2);
+  flex-shrink: 0;
+}
+.adn-preview-wa__input {
+  flex: 1;
+  padding: 9px 14px;
+  border-radius: 999px;
+  background: #ffffff;
+  font-size: 13px;
+  color: var(--adn-preview-wa-time, #667781);
+}
+.adn-preview-wa__send {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: var(--adn-preview-wa-send, #00a884);
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.adn-preview-mail__reply {
+  display: flex;
+  gap: 10px;
+  padding-top: var(--adn-space-3, 12px);
+}
+.adn-preview-mail__reply-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 16px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: 999px;
+  font-size: 13px;
+  color: var(--adn-preview-mail-text, #334155);
+}
+.adn-settings__previews {
+  padding: var(--adn-space-4, 16px);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-canvas);
+}
+.adn-settings__channel-block .adn-settings__previews {
+  background: var(--adn-color-canvas);
+  padding: var(--adn-space-4, 16px);
+}
+.adn-settings__field--channels {
+  padding: var(--adn-space-3, 12px);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-surface);
+}
+.adn-settings__channel-tabs {
+  padding: 0 var(--adn-space-1, 4px);
+  margin-top: var(--adn-space-2, 8px);
+}
+.adn-settings__channel-block {
+  padding: var(--adn-space-4, 16px) var(--adn-space-1, 4px) 0;
+}
+.adn-settings__policies .adn-settings__category + .adn-settings__category {
+  margin-top: var(--adn-space-2, 8px);
+}
+.adn-preview-mail--compact {
+  padding: 16px 16px 20px;
+  gap: 10px;
+}
+.adn-preview-mail--compact .adn-preview-mail__subject {
+  font-size: 22px;
+  line-height: 1.25;
+  -webkit-line-clamp: 3;
+}
+.adn-preview-avatar--large {
+  width: 36px;
+  height: 36px;
+  font-size: 15px;
+}
+.adn-preview-mail__from--mobile {
+  gap: 12px;
+  padding-top: 4px;
+}
+.adn-preview-mail__from--mobile .adn-preview-mail__sender-row {
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+}
+.adn-preview-mail__from--mobile .adn-preview-mail__sender {
+  font-size: 14px;
+  font-weight: 600;
+}
+.adn-preview-mail__recipients {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 12px;
+  color: var(--adn-color-muted);
+}
+.adn-preview-mail--compact .adn-preview-mail__body {
+  font-size: 15px;
+  line-height: 1.65;
+}
+.adn-preview-mail__reply {
+  flex-wrap: wrap;
+  padding-top: var(--adn-space-4, 16px);
+}
+.adn-preview-mail--compact .adn-preview-mail__reply-button {
+  padding: 8px 14px;
+  font-size: 12px;
+}
+.adn-settings__list-filters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-2, 8px);
+  padding-bottom: var(--adn-space-3, 12px);
+}
+.adn-settings__search input {
+  width: 100%;
+  min-height: 40px;
+  padding: 9px 12px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius-sm);
+  font: inherit;
+  color: inherit;
+  background: var(--adn-color-surface);
+}
+.adn-settings__search input:focus-visible {
+  outline: 2px solid var(--adn-color-accent);
+  outline-offset: -1px;
+}
+.adn-settings__filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.adn-settings__template-list .adn-settings__filter {
+  width: auto;
+  flex: 0 0 auto;
+  padding: 5px 10px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: 999px;
+  background: var(--adn-color-surface);
+  font-size: 0.75rem;
+  color: var(--adn-color-muted);
+  min-height: 30px;
+}
+.adn-settings__template-list .adn-settings__filter:hover {
+  border-color: var(--adn-color-accent-line);
+}
+.adn-settings__template-list .adn-settings__filter--on {
+  border-color: var(--adn-color-accent);
+  background: var(--adn-color-accent-soft);
+  color: var(--adn-color-accent);
+  font-weight: 500;
+}
+.adn-settings__template-list .adn-settings__clear {
+  width: auto;
+  align-self: flex-start;
+  border: 0;
+  background: none;
+  padding: 2px 0;
+  font-size: 0.75rem;
+  color: var(--adn-color-accent);
+  text-decoration: underline;
+  min-height: auto;
+}
+.adn-settings__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-settings__group + .adn-settings__group {
+  margin-top: var(--adn-space-4, 16px);
+}
+.adn-settings__group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--adn-color-muted);
+}
+.adn-settings__group-count {
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--adn-preview-chrome, #f1f5f9);
+  font-size: 0.6875rem;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+.adn-settings__visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.adn-settings__list-header {
+  padding-bottom: var(--adn-space-2, 8px);
+}
+.adn-settings__list-filters {
+  gap: 6px;
+  padding-bottom: var(--adn-space-3, 12px);
+  margin-bottom: var(--adn-space-3, 12px);
+  border-bottom: 1px solid var(--adn-color-border);
+}
+.adn-settings__search input {
+  min-height: 36px;
+  padding: 7px 12px;
+}
+.adn-settings__template-list .adn-settings__filter {
+  min-height: 26px;
+  padding: 3px 10px;
+}
+.adn-settings__template-list .adn-settings__row > button:first-child {
+  padding: var(--adn-space-2, 8px) var(--adn-space-3, 12px);
+}
+.adn-settings__templates--browsing {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 1024px) {
+  .adn-settings__templates--browsing {
+    grid-template-columns: 1fr;
+  }
+  .adn-settings__templates--browsing .adn-settings__list-filters {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .adn-settings__templates--browsing .adn-settings__search {
+    flex: 1 1 260px;
+    min-width: 0;
+  }
+  .adn-settings__templates--browsing .adn-settings__template-list ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: var(--adn-space-2, 8px);
+  }
+}
+@media (min-width: 1024px) {
+  .adn-settings__templates--browsing .adn-settings__template-list .adn-settings__remove {
+    align-self: center;
+    padding: 0 var(--adn-space-2, 8px);
+    font-size: 0.75rem;
+    min-height: 32px;
+  }
+}
+.adn-settings__list-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-settings__view-switch {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-surface);
+}
+.adn-settings__template-list .adn-settings__view {
+  width: auto;
+  flex: 0 0 auto;
+  min-height: 28px;
+  padding: 0 var(--adn-space-3, 12px);
+  border: 0;
+  border-radius: calc(var(--adn-radius-sm) - 1px);
+  background: transparent;
+  font-size: 0.75rem;
+  color: var(--adn-color-muted);
+  white-space: nowrap;
+}
+.adn-settings__template-list .adn-settings__view--on {
+  background: var(--adn-color-accent-soft);
+  color: var(--adn-color-accent);
+  font-weight: 600;
+}
+.adn-settings__table-scroll {
+  overflow-x: auto;
+}
+.adn-settings__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+.adn-settings__table th {
+  padding: 0;
+  text-align: left;
+  border-bottom: 1px solid var(--adn-color-border);
+  white-space: nowrap;
+}
+.adn-settings__template-list .adn-settings__table th button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: auto;
+  min-height: 34px;
+  padding: 0 var(--adn-space-3, 12px);
+  border: 0;
+  background: transparent;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--adn-color-muted);
+}
+.adn-settings__table th > span {
+  display: inline-block;
+  padding: 0 var(--adn-space-3, 12px);
+}
+.adn-settings__sort-mark {
+  font-size: 0.75rem;
+  letter-spacing: 0;
+}
+.adn-settings__table td {
+  padding: var(--adn-space-2, 8px) var(--adn-space-3, 12px);
+  border-bottom: 1px solid var(--adn-color-border);
+  vertical-align: middle;
+}
+.adn-settings__table tbody tr:nth-child(even) {
+  background: color-mix(in srgb, var(--adn-color-muted) 5%, transparent);
+}
+.adn-settings__table tbody tr:hover {
+  background: var(--adn-color-accent-soft);
+}
+.adn-settings__table-row--active {
+  box-shadow: inset 3px 0 0 var(--adn-color-accent);
+}
+.adn-settings__template-list .adn-settings__table-key {
+  width: auto;
+  min-height: 34px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--adn-font-mono);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: inherit;
+  text-align: left;
+}
+.adn-settings__table-body {
+  max-width: 42ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--adn-color-muted);
+}
+.adn-settings__table .adn-settings__version {
+  white-space: nowrap;
+}
+.adn-settings__template-list .adn-settings__table .adn-settings__remove {
+  align-self: center;
+  min-height: 30px;
+  padding: 0 var(--adn-space-2, 8px);
+  font-size: 0.75rem;
+}
+.adn-settings__editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-4, 16px);
+  padding-bottom: var(--adn-space-4, 16px);
+}
+.adn-settings__editor > .adn-settings__channel-tabs,
+.adn-settings__editor > .adn-settings__variables,
+.adn-settings__editor > .adn-settings__identity {
+  margin-top: 0;
+}
+.adn-settings__editor > .adn-settings__actions {
+  margin-top: 0;
+  padding-top: var(--adn-space-4, 16px);
+  border-top: 1px solid var(--adn-color-border);
+}
+.adn-settings__editor > .adn-settings__channel-block {
+  padding-top: 0;
+}
+.adn-settings__button-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: currentColor;
+}
+.adn-settings__template-list .adn-settings__new,
+.adn-settings__new {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+  width: auto;
+  flex: 0 0 auto;
+  min-height: 34px;
+  padding: 0 var(--adn-space-3, 12px);
+  border: 1px solid var(--adn-color-accent);
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-accent);
+  color: #ffffff;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.adn-settings__template-list .adn-settings__new:hover,
+.adn-settings__new:hover {
+  background: color-mix(in srgb, #000000 10%, var(--adn-color-accent));
+}
+.adn-settings__close {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+  min-height: 34px;
+  padding: 0 var(--adn-space-3, 12px);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius-sm);
+  background: var(--adn-color-surface);
+  color: var(--adn-color-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+.adn-settings__close:hover {
+  border-color: var(--adn-color-accent-line);
+  color: var(--adn-color-text);
+}
+.adn-settings__template-list .adn-settings__remove {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.adn-settings__new:focus-visible,
+.adn-settings__close:focus-visible,
+.adn-settings__template-list .adn-settings__view:focus-visible {
+  outline: 2px solid var(--adn-color-accent);
+  outline-offset: 2px;
+}
+.adn-settings__previews,
+.adn-settings__channel-block .adn-settings__previews {
+  background: color-mix(in srgb, var(--adn-color-text) 7%, var(--adn-color-canvas));
+  border: 1px solid var(--adn-color-border);
+}
+.adn-settings__editor > * {
+  padding-left: var(--adn-space-6, 24px);
+  padding-right: var(--adn-space-6, 24px);
+}
+.adn-settings__editor > .adn-settings__channel-block,
+.adn-settings__editor > .adn-settings__channel-tabs {
+  padding-left: var(--adn-space-6, 24px);
+  padding-right: var(--adn-space-6, 24px);
+}
+.adn-settings__editor {
+  padding-bottom: var(--adn-space-6, 24px);
+}
+.adn-settings__editor > .adn-settings__editor-header {
+  padding-top: var(--adn-space-5, 20px);
+  padding-bottom: var(--adn-space-5, 20px);
+}
+.adn-settings__table-row {
+  cursor: pointer;
+}
+.adn-preview-mail__frame {
+  display: block;
+  width: 100%;
+  min-height: 420px;
+  border: 0;
+  background: #ffffff;
+}
+.adn-settings__email-report {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-1, 4px);
+  margin: var(--adn-space-2, 8px) 0 0;
+  padding: 0;
+  list-style: none;
+}
+.adn-settings__email-problem {
+  padding: var(--adn-space-2, 8px) var(--adn-space-3, 12px);
+  border-radius: var(--adn-radius-sm);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  border-left: 3px solid transparent;
+}
+.adn-settings__email-problem--error {
+  border-left-color: var(--adn-color-danger);
+  background: color-mix(in srgb, var(--adn-color-danger) 8%, transparent);
+  color: var(--adn-color-danger);
+}
+.adn-settings__email-problem--warning {
+  border-left-color: var(--adn-color-warning);
+  background: color-mix(in srgb, var(--adn-color-warning) 8%, transparent);
+  color: var(--adn-color-warning);
+}
+.adn-code {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-code__editor {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-canvas);
+}
+.adn-code__editor:focus-within {
+  border-color: var(--adn-color-accent);
+  box-shadow: 0 0 0 1px var(--adn-color-accent);
+}
+.adn-code__gutter {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  padding: 12px 10px;
+  border-right: 1px solid var(--adn-color-border);
+  font: 400 12.5px/1.6 var(--adn-font-mono);
+  color: var(--adn-color-muted);
+  text-align: right;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+.adn-code__surface {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.adn-code__highlight,
+.adn-code__input {
+  margin: 0;
+  padding: 12px 14px;
+  font: 400 12.5px/1.6 var(--adn-font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  tab-size: 2;
+  border: 0;
+}
+.adn-code__highlight {
+  min-height: 260px;
+  max-height: 420px;
+  overflow: auto;
+  color: var(--adn-color-text);
+}
+.adn-code__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  resize: vertical;
+  overflow: auto;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--adn-color-text);
+  outline: none;
+}
+.adn-code__input::selection {
+  background: color-mix(in srgb, var(--adn-color-accent) 28%, transparent);
+}
+.adn-code__token--tag,
+.adn-code__token--name {
+  color: var(--adn-color-accent);
+}
+.adn-code__token--name {
+  font-weight: 600;
+}
+.adn-code__token--attribute {
+  color: color-mix(in srgb, var(--adn-color-accent) 55%, var(--adn-color-text));
+}
+.adn-code__token--value {
+  color: var(--adn-color-warning);
+}
+.adn-code__token--comment,
+.adn-code__token--doctype {
+  color: var(--adn-color-muted);
+  font-style: italic;
+}
+.adn-code__token--variable {
+  padding: 0 3px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--adn-color-accent) 14%, transparent);
+  color: var(--adn-color-accent);
+  font-weight: 600;
+}
+.adn-settings__template-list {
+  overflow: hidden;
+}
+.adn-settings__list-header-row {
+  flex-wrap: wrap;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-settings__list-header-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  min-width: 0;
+}
+.adn-settings__template-list .adn-settings__new {
+  max-width: 100%;
+}
+.adn-message-field {
+  display: flex;
+  flex-direction: column;
+}
+.adn-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  border: 1px solid var(--adn-color-border);
+  border-bottom: 0;
+  border-radius: var(--adn-radius) var(--adn-radius) 0 0;
+  background: var(--adn-color-canvas);
+}
+.adn-message-field textarea {
+  border-radius: 0 0 var(--adn-radius) var(--adn-radius);
+}
+.adn-toolbar__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--adn-radius-sm);
+  background: transparent;
+  color: var(--adn-color-muted);
+  cursor: pointer;
+}
+.adn-toolbar__button:hover {
+  background: var(--adn-color-surface);
+  color: var(--adn-color-text);
+}
+.adn-toolbar__button:focus-visible {
+  outline: 2px solid var(--adn-color-accent);
+  outline-offset: -2px;
+}
+.adn-toolbar__divider {
+  width: 1px;
+  height: 18px;
+  margin: 0 4px;
+  background: var(--adn-color-border);
+}
+.adn-toolbar__emoji {
+  position: relative;
+}
+.adn-toolbar__palette {
+  position: absolute;
+  z-index: 2;
+  top: calc(100% + 4px);
+  left: 0;
+  display: grid;
+  grid-template-columns: repeat(4, 34px);
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: var(--adn-color-surface);
+  box-shadow: var(--adn-shadow-card);
+}
+.adn-toolbar__emoji-button {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--adn-radius-sm);
+  background: transparent;
+  font-size: 17px;
+  line-height: 1;
+  cursor: pointer;
+}
+.adn-toolbar__emoji-button:hover {
+  background: var(--adn-color-accent-soft);
+}
 /*# sourceMappingURL=styles.css.map */