--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/src/public/mjj-composer.css	Fri Aug 07 16:05:29 2026 -0700
@@ -0,0 +1,109 @@
+mjj-composer {
+  --zenbu-composer-action-reserve: calc(
+    var(--zenbu-sys-control-height-sm) + var(--zenbu-sys-space-container)
+  );
+  display: block;
+  min-width: 0;
+  min-height: 0;
+}
+
+mjj-composer > form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: var(--zenbu-sys-space-control);
+  height: 100%;
+  min-height: 0;
+}
+
+mjj-composer [data-composer-control] {
+  position: relative;
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+mjj-composer [data-composer-control] > zen-field {
+  height: 100%;
+  min-height: 0;
+}
+
+mjj-composer [data-composer-label] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+mjj-composer [data-composer-control] > zen-field:not(
+  [appearance="plain"]
+) > textarea {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: var(--zenbu-control-height);
+  padding-inline-end: var(--zenbu-composer-action-reserve);
+  resize: none;
+}
+
+mjj-composer [data-composer-actions] {
+  position: absolute;
+  z-index: 1;
+  inset-inline-end: var(--zenbu-sys-padding-sm);
+  inset-block-end: var(--zenbu-sys-padding-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--zenbu-sys-space-control);
+}
+
+mjj-composer [data-composer-actions] zen-button,
+mjj-composer [data-composer-actions] button {
+  width: 100%;
+}
+
+mjj-composer [data-composer-meta] {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  margin: 0;
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
+mjj-composer [data-composer-meta][hidden],
+mjj-composer [data-composer-cancel-owner][hidden] {
+  display: none;
+}
+
+mjj-composer[compact] {
+  --zenbu-composer-action-size: var(--zenbu-sys-control-height-sm);
+  --zenbu-composer-action-reserve: calc(
+    var(--zenbu-composer-action-size) + var(--zenbu-sys-padding-md)
+  );
+}
+
+mjj-composer[compact] > form {
+  gap: var(--zenbu-sys-space-icon-label);
+}
+
+mjj-composer[compact] [data-composer-actions] {
+  gap: var(--zenbu-sys-space-icon-label);
+}
+
+mjj-composer[compact] [data-composer-actions] zen-button,
+mjj-composer[compact] [data-composer-actions] button {
+  width: var(--zenbu-composer-action-size);
+}
+
+mjj-composer[compact] [data-composer-actions] button {
+  height: var(--zenbu-composer-action-size);
+  min-height: var(--zenbu-composer-action-size);
+  padding: 0;
+}
+
+mjj-composer[compact] [data-composer-action-label] {
+  display: none;
+}