/* Theme system variables and color schemes */
:root { --cfff:#ffffff; --c888:#888888; --erro:rgba(239, 68, 68, 0.3); --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --boun: cubic-bezier(0.68, -0.55, 0.265, 1.55); --bo-ra-smal: .6rem; --bo-ra-aver: 1rem; --bo-ra-larg: 1.6rem; --bo-ra-larx: 9rem; --bo-ra-icon: .5rem; --bo-ra-roun: 50%; }

[data-theme="dark"] { --bg-firs: #131313; --bg-fir2: #191919; --bg-seco: #232323; --bg-thir: #333333; --bg-four: #434343; --text-firs: #e9e9e9; --text-seco: #a8b2c0; --text-thir: #6c7b8a; --bran-firs: #45b39d; --bran-seco: #3a9b87; }
[data-theme="ligh"] { --bg-firs: #f6f6f6; --bg-fir2: #e9e9e9; --bg-seco: #e3e3e3; --bg-thir: #d3d3d3; --bg-four: #c3c3c3; --text-firs: #030303; --text-seco: #090909; --text-thir: #161616; --bran-firs: #45b39d; --bran-seco: #3a9b87; }

/* Base layout and typography */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg-firs);color:var(--text-firs);height:100vh;overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh}

/* Header section with title and controls */
.header{background:var(--bg-seco);border-bottom:solid 1px var(--bg-thir);color:var(--text-firs);padding:1rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a}
.header h1{font-size:1.5rem;font-weight:600}
.header-right{display:flex;align-items:center;gap:.75rem}
.theme-toggle{background:var(--c888);border:1px solid var(--c888);cursor:pointer;padding:0;border-radius:var(--bo-ra-roun);transition:all .2s;display:flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem}

/* Status indicators for connection states */
.status{padding:.1rem .5rem .2rem .5rem;border-radius:var(--bo-ra-larg);font-size:.8rem;font-weight:500} 
.status.online{background:#4caf5033;color:#4CAF50}
.status.offline{background:#f4433633;color:#f44336}
.status.realtime{background:#2196f333;color:#2196F3}

/* Main chat area and message styling */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.mess-wrap{flex:1;overflow-y:auto;padding:1rem;background:var(--bg-firs)}
.mess{margin-bottom:1rem;max-width:80%}
.mess.user{margin-left:auto;text-align:right}
.mess.user .mess-cont{background:var(--bg-fir2);color:var(--text-firs);border:1px solid var(--bg-seco);margin-left:auto;text-align:left}
.mess.syst .mess-cont{background:transparent;color:var(--text-firs);padding:.2rem .5rem .2rem 0;} .mess.syst{margin-bottom:1.5rem;} 
.mess.other{margin-right:auto}
.mess.other .mess-cont{background:var(--bg-thir);color:var(--text-firs);}
.mess-cont{padding:.7rem 1rem .9rem 1rem;border-radius:var(--bo-ra-larg);word-wrap:break-word;display:inline-block;max-width:100%}
.mess-time{font-size:.75rem;color:var(--text-thir);text-align:right;}
.mess.syst .mess-time{text-align:left}
.mess-foot{margin-top:.1rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:nowrap;} 
.mess.syst .mess-foot {margin-left:1rem;justify-content:flex-start;} 
.mess.user .mess-foot {margin-right:1.5rem;justify-content:flex-end;}

/* Footer container */
.footer{padding:1rem}

/* Custom scrollbar styling for main chat */
.mess-wrap{scrollbar-width:none;-ms-overflow-style:none} 
.mess-wrap::-webkit-scrollbar{display:none}


/* Responsive layouts */
@media (max-width: 600px) {.header,.footer{padding:.5rem} .header h1{font-size:1.2rem} .mess{max-width:100%} .mess-wrap{padding:.5rem;} .mess-cont{padding:.5rem .5rem .65rem .5rem;border-radius: var(--bo-ra-aver);} #app{margin-right:0}}