*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-width:100%}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-height:100vh;display:flex;flex-direction:column;width:100%;align-items:center}.message-board-container{width:100%;min-width:100%;min-height:100vh;background-color:#f8f9fa;padding:2rem 0;display:flex;justify-content:center}.message-board{width:90%;margin:0 auto;box-sizing:border-box;padding:0 1rem}.board-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2rem}.message-form{background-color:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:2rem;border:1px solid #e0e0e0}.form-group{margin-bottom:1rem}.form-label{display:block;margin-bottom:.5rem;font-weight:500;color:#333}.form-input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.form-input:focus{outline:none;border-color:#4d90fe;box-shadow:0 0 0 2px #4d90fe33}.form-textarea{min-height:100px;resize:vertical}.submit-button{width:100%;padding:.75rem;background-color:#4d90fe;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;border:1px solid #3079ed}.submit-button:hover{background-color:#3b7de0}.message-list{display:flex;flex-direction:column;gap:1rem;transition:all .3s ease;min-height:200px}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.message-author{font-weight:600;color:#333}.message-date{font-size:.875rem;color:#666}.message-content{color:#333;white-space:pre-wrap;line-height:1.5}.pagination button{padding:.5rem 1rem;border:1px solid #e2e8f0;background:#fff;border-radius:.375rem;cursor:pointer;transition:all .2s}.pagination{display:flex;gap:.5rem;align-items:center;margin-top:1rem;flex-direction:column;justify-content:space-between;padding:.5rem;background:#f5f5f5;border-radius:4px}.is-loading .message-list{opacity:.8}.skeleton{background:#f0f0f0;border-radius:8px;margin-bottom:1rem}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.skeleton>*{animation:pulse 1.5s infinite}.skeleton-header,.skeleton-content{height:20px;width:90%;background:linear-gradient(to right,#f0f0f0 8%,#e0e0e0 18%,#f0f0f0 33%);background-size:1000px 100%;animation:shimmer 2s infinite linear;border-radius:4px;margin-bottom:10px}.skeleton-content{height:60px}.message-card.optimistic{opacity:.7;background-color:#f8f9fa;border-left:3px solid #4d90fe}.error-fallback{padding:2rem;text-align:center}.error-fallback button{padding:.5rem 1rem;background:#4d90fe;color:#fff;border:none;border-radius:4px;cursor:pointer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.message-card.skeleton{background:#f5f5f5;border-radius:8px;margin-bottom:1rem;overflow:hidden}.optimistic-preview{background-color:#f8f9fa;animation:pulse 1.5s infinite}.message-card.optimistic,.message-card.optimistic-preview{opacity:.9;border-left:3px solid #4d90fe;background-color:#f8f9fa}.message-card{background-color:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:1rem;transition:all .3s ease;border:1px solid #e0e0e0;transition:opacity .3s ease,transform .3s ease}.error-message{background:#ffebee;color:#c62828;padding:1rem;margin-bottom:1rem;border-radius:4px;display:flex;justify-content:space-between;align-items:center;border-left:4px solid #c62828}.error-message button{background:none;border:none;color:inherit;font-size:1.2rem;cursor:pointer;padding:0 .5rem}.debug-overlay{position:fixed;bottom:10px;right:10px;background:#000000b3;color:#fff;padding:10px;border-radius:5px;z-index:1000;font-size:14px}.pagination-info{font-size:.9rem;margin-right:auto;color:#666}.pagination-controls{display:flex;gap:.5rem;align-items:center;justify-content:center}.page-info{padding:0 1rem}.pagination button:hover:not(:disabled){background:#f0f0f0}.pagination button:disabled{opacity:.5;cursor:not-allowed}.form-input,.form-textarea{transition:all .3s ease}.submit-button:disabled{opacity:.7}