Create message.css

public/message.css

@@ -0,0 +1,59 @@
+/* public/style.css */
+:root { --bg:#0d1117; --card:#161b22; --border:#30363d; --text:#e6edf3; --muted:#8b949e; --primary:#58a6ff; --primary-h:#1f6feb; --danger:#f85149; --success:#3fb950; --warn:#d29922; --font: system-ui, -apple-system, sans-serif; }
+* { box-sizing:border-box; margin:0; padding:0; }
+body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; display:flex; flex-direction:column; }
+header { background:var(--card); border-bottom:1px solid var(--border); padding:1rem; text-align:center; position:sticky; top:0; z-index:10; }
+header h1 { font-size:1.1rem; font-weight:600; }
+main { flex:1; padding:1rem; max-width:640px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:1rem; padding-bottom: 100px; }
+.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
+.card h2 { margin-bottom:1rem; font-size:1rem; font-weight:600; display:flex; align-items:center; gap:0.5rem; }
+.form-group { margin-bottom:1rem; }
+label { display:block; font-size:0.875rem; color:var(--muted); margin-bottom:0.5rem; }
+textarea { width:100%; min-height:120px; padding:0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; font-size:1rem; resize:vertical; }
+textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(88,166,255,0.3); }
+.char-count { text-align:right; font-size:0.75rem; color:var(--muted); margin-top:0.25rem; }
+.char-count.warning { color:var(--warn); }
+.char-count.danger { color:var(--danger); }
+
+.drop-zone { border:2px dashed var(--border); border-radius:8px; padding:1.5rem; text-align:center; cursor:pointer; transition:border-color 0.1s, background 0.1s; position:relative; -webkit-tap-highlight-color: transparent; }
+.drop-zone:hover, .drop-zone.drag { border-color:var(--primary); background:rgba(88,166,255,0.05); }
+.drop-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; z-index: 1; }
+.drop-zone p { margin:0; color:var(--muted); font-size:0.875rem; pointer-events: none; }
+.previews { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; }
+.preview-item { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--bg); flex-shrink:0; }
+.preview-item img { width:100%; height:100%; object-fit:cover; display:block; }
+.preview-item button { position:absolute; top:2px; right:2px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,0.7); color:white; border:none; font-size:14px; line-height:1; cursor:pointer; opacity:0; transition:opacity 0.1s; z-index:2; }
+.preview-item:hover button, .preview-item:focus-within button { opacity:1; }
+
+.legal-group { display:flex; align-items:flex-start; gap:0.5rem; margin-top:1rem; padding:0.75rem; background:rgba(210,153,34,0.1); border:1px solid var(--warn); border-radius:8px; }
+.legal-group input[type="checkbox"] { width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color: var(--primary); cursor: pointer; }
+.legal-group label { margin:0; font-size:0.8rem; color:var(--text); line-height:1.4; cursor: pointer; }
+.legal-group a { color:var(--primary); text-decoration:underline; }
+
+.btn { padding:0.75rem 1.5rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; border:none; transition:background 0.1s, opacity 0.1s; width:100%; }
+.btn-primary { background:var(--primary); color:#fff; }
+.btn-primary:hover:not(:disabled) { background:var(--primary-h); }
+.btn-primary:disabled { opacity:0.4; cursor:not-allowed; background:var(--primary); }
+
+.messages-list { display:flex; flex-direction:column; gap:1rem; }
+.msg-card { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:1rem; animation:fadeIn 0.3s; }
+@keyframes fadeIn { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:none;} }
+.msg-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; font-size:0.75rem; color:var(--muted); gap:1rem; flex-wrap:wrap; }
+.msg-content { white-space:pre-wrap; word-break:break-word; font-size:0.95rem; line-height:1.6; margin-bottom:0.75rem; }
+.msg-images { display:flex; gap:0.5rem; flex-wrap:wrap; }
+.msg-images img { max-width:100%; max-height:200px; border-radius:6px; border:1px solid var(--border); cursor:zoom-in; transition:transform 0.2s; }
+.msg-images img:hover { transform:scale(1.02); }
+.empty-msg { text-align:center; color:var(--muted); padding:2rem; font-size:0.875rem; }
+
+.toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(100px); opacity:0; padding:1rem 1.5rem; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:100; transition:all 0.3s; text-align:center; max-width:90vw; font-size:0.9rem; }
+.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
+.toast.error { border-left:4px solid var(--danger); }
+.toast.success { border-left:4px solid var(--success); }
+
+.img-modal { position:fixed; inset:0; background:rgba(0,0,0,0.95); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; visibility:hidden; transition:all 0.2s; padding: 1rem; }
+.img-modal.open { opacity:1; visibility:visible; }
+.img-modal img { max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 0 30px rgba(0,0,0,0.5); transform:scale(0.9); transition:transform 0.2s; }
+.img-modal.open img { transform:scale(1); }
+.img-modal .close-btn { position:absolute; top:1.5rem; right:1.5rem; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.1); border:none; color:white; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index: 201; }
+
+@media (max-width: 480px) { .card { padding:1rem; } .preview-item { width:70px; height:70px; } .drop-zone { padding: 1rem; } .legal-group label { font-size: 0.75rem; } }