@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";
:root{--brown-dark:#3e2723;--brown-mid:#5d4037;--brown-light:#8d6e63;--orange-warm:#ff8f00;--orange-light:#ffb74d;--pink-soft:#f48fb1;--pink-light:#fce4ec;--cream:#fff8e1;--gold:#ffd54f;--gold-border:#ffab00;--text-dark:#3e2723;--text-light:#efebe9;--bg-kitchen:#4e342e;--pixel-border:#2e1a12}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-kitchen);height:100%;color:var(--text-light);font-family:VT323,monospace;overflow:hidden}.pixel-border{border:4px solid var(--pixel-border);box-shadow:inset -4px -4px 0px 0px #0000004d,inset 4px 4px 0px 0px #ffffff1a,0 0 0 4px var(--pixel-border)}.pixel-border-gold{border:4px solid var(--gold-border);box-shadow:inset -4px -4px 0px 0px #0003,inset 4px 4px 0px 0px #ffffff26,0 0 0 4px var(--gold-border),0 0 16px #ffab004d}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--brown-dark)}::-webkit-scrollbar-thumb{background:var(--brown-light);border:2px solid var(--brown-dark)}.app-container{background:linear-gradient(#5d4037 0%,#4e342e 30%,#3e2723 100%);flex-direction:column;height:100vh;max-height:100vh;display:flex}.header{background:linear-gradient(90deg,var(--brown-dark),var(--brown-mid));border-bottom:4px solid var(--pixel-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.header-title{color:var(--gold);text-shadow:3px 3px 0px var(--brown-dark),-1px -1px 0px #ffd54f4d;letter-spacing:2px;font-family:"Press Start 2P",cursive;font-size:18px}.header-icons{gap:12px;display:flex}.header-icons a{color:var(--orange-light);font-size:24px;text-decoration:none;transition:color .2s}.header-icons a:hover{color:var(--gold)}.main-content{flex:1;min-height:0;display:flex;overflow:hidden}.chat-area{flex-direction:column;flex:1;min-width:0;display:flex}.messages-container{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow-y:auto}.message{word-wrap:break-word;border-radius:0;max-width:85%;padding:8px 12px;font-size:20px;line-height:1.4;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message-user{background:var(--brown-mid);border:3px solid var(--brown-light);color:var(--cream);align-self:flex-start}.message-mommy{border:3px solid var(--gold-border);max-width:90%;color:var(--cream);background:linear-gradient(135deg,#4a3728,#5d4037);align-self:flex-start;box-shadow:0 0 12px #ffab0033}.message-system{color:var(--brown-light);background:0 0;align-self:center;padding:4px 8px;font-size:16px;font-style:italic}.message-nickname{align-items:center;gap:8px;margin-bottom:4px;font-family:"Press Start 2P",cursive;font-size:10px;display:flex}.message-nickname.user-nick{color:var(--orange-light)}.message-nickname.mommy-nick{color:var(--gold)}.mommy-avatar{background:var(--gold);border:2px solid var(--gold-border);text-align:center;width:20px;height:20px;font-size:12px;line-height:18px;display:inline-block}.message-time{color:var(--brown-light);margin-left:auto;font-family:VT323,monospace;font-size:12px}.message-text{font-family:VT323,monospace}.typing-indicator{color:var(--gold);flex-shrink:0;min-height:32px;padding:8px 16px;font-size:16px;font-style:italic}.input-area{background:var(--brown-dark);border-top:4px solid var(--pixel-border);flex-shrink:0;gap:8px;padding:12px 16px;display:flex}.input-area input{background:var(--brown-mid);color:var(--cream);border:3px solid var(--brown-light);outline:none;flex:1;padding:10px 14px;font-family:VT323,monospace;font-size:20px}.input-area input::placeholder{color:var(--brown-light)}.input-area input:focus{border-color:var(--orange-warm)}.input-area button{background:var(--orange-warm);color:var(--brown-dark);border:3px solid var(--pixel-border);cursor:pointer;white-space:nowrap;padding:10px 20px;font-family:"Press Start 2P",cursive;font-size:12px;transition:background .2s}.input-area button:hover{background:var(--gold)}.input-area button:active{transform:translate(2px,2px)}.sidebar{background:var(--brown-dark);border-left:4px solid var(--pixel-border);flex-direction:column;flex-shrink:0;width:220px;display:flex}.sidebar-title{color:var(--orange-light);text-align:center;border-bottom:3px solid var(--pixel-border);padding:12px;font-family:"Press Start 2P",cursive;font-size:10px}.users-list{flex:1;padding:8px;overflow-y:auto}.user-item{color:var(--cream);align-items:center;gap:8px;padding:6px 8px;font-size:16px;display:flex}.user-avatar{background:var(--orange-warm);border:2px solid var(--pixel-border);flex-shrink:0;width:16px;height:16px}.user-avatar.mommy{background:var(--gold);border-color:var(--gold-border)}.user-count{color:var(--brown-light);text-align:center;padding:4px 12px;font-size:12px}.nickname-area{border-top:3px solid var(--pixel-border);flex-direction:column;gap:4px;padding:8px 12px;display:flex}.nickname-label{color:var(--brown-light);font-family:"Press Start 2P",cursive;font-size:10px}.nickname-display{color:var(--gold);cursor:pointer;font-size:16px}.nickname-display:hover{text-decoration:underline}.connection-status{background:var(--brown-dark);border:4px solid var(--orange-warm);text-align:center;z-index:100;padding:32px 48px;font-family:"Press Start 2P",cursive;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.connection-status h2{color:var(--gold);margin-bottom:16px;font-size:14px}.connection-status p{color:var(--orange-light);font-family:VT323,monospace;font-size:18px}.dots:after{content:"";animation:1.5s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@media (max-width:768px){.header-title{font-size:12px}.main-content{flex-direction:column}.sidebar{border-left:none;border-top:4px solid var(--pixel-border);width:100%;max-height:120px}.sidebar-title{padding:8px;font-size:8px}.users-list{flex-wrap:wrap;gap:4px;padding:4px 8px;display:flex}.user-item{padding:2px 6px;font-size:14px}.message{max-width:95%;font-size:18px}.message-nickname{font-size:8px}.input-area button{padding:10px 12px;font-size:10px}.nickname-area{display:none}}