public/message.css

/* 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; } }