v0.3.0

frontend/src/components/MessageInput.css

@@ -2,9 +2,13 @@
   background: white;
   border-top: 1px solid var(--border);
   padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   display: flex;
   flex-direction: column;
   gap: 8px;
+  flex-shrink: 0;  /* never compress — always visible above keyboard */
+  position: relative;
+  z-index: 2;
 }
 
 .reply-bar-input {
@@ -133,7 +137,7 @@
 .msg-input {
   width: 100%;
   min-height: 40px;
-  max-height: 120px;
+  max-height: calc(1.4em * 5 + 20px); /* 5 lines × line-height + padding */
   padding: 10px 14px;
   border: 1px solid var(--border);
   border-radius: 20px;
@@ -143,9 +147,10 @@
   color: var(--text-primary);
   background: var(--surface-variant);
   transition: border-color var(--transition);
-  overflow-y: auto;
+  overflow-y: hidden;
+  resize: none;
 }
-.msg-input:focus { outline: none; border-color: var(--primary); background: white; }
+.msg-input:focus { outline: none; border-color: var(--primary); background: var(--surface-variant); }
 .msg-input::placeholder { color: var(--text-tertiary); }
 
 .send-btn {
@@ -166,3 +171,68 @@
 }
 .send-btn.active:hover { background: var(--primary-dark); }
 .send-btn:disabled { opacity: 0.4; cursor: default; }
+
+/* + attach button */
+.attach-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.attach-btn {
+  color: var(--primary);
+}
+.attach-btn:hover {
+  color: var(--primary-dark);
+}
+
+/* Attach menu popup */
+.attach-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  z-index: 100;
+  min-width: 140px;
+}
+
+.attach-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 16px;
+  width: 100%;
+  font-size: 14px;
+  color: var(--text-primary);
+  transition: var(--transition);
+  white-space: nowrap;
+}
+.attach-item:hover {
+  background: var(--primary-light);
+  color: var(--primary);
+}
+.attach-item svg {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.attach-item:hover svg {
+  color: var(--primary);
+}
+
+/* Emoji picker popover — positioned above the input area */
+.emoji-input-picker {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  z-index: 200;
+}
+
+/* PC only: enforce minimum width on the input row so send button never disappears */
+@media (pointer: fine) {
+  .input-row {
+    min-width: 480px;
+  }
+}