#law-chat-widget{
position:fixed;
bottom:24px;
right:24px;
z-index:9999;
font-family:Arial, sans-serif;
}

/* Floating Button */

#law-chat-button{
width:60px;
height:60px;
border-radius:50%;
background:#42B5B7;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
cursor:pointer;
box-shadow:0 8px 20px rgba(0,0,0,.2);
transition:.3s;
}

#law-chat-button:hover{
transform:scale(1.05);
}

/* Chat Box */

#law-chat-box{
position:absolute;
bottom:75px;
right:0;
width:340px;
height:480px;
background:white;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,.25);
display:flex;
flex-direction:column;
overflow:hidden;
transform:translateY(20px);
opacity:0;
pointer-events:none;
transition:.3s;
}

#law-chat-box.open{
transform:translateY(0);
opacity:1;
pointer-events:auto;
}

/* Header */

#law-chat-header{
background:#1D3E52;
color:white;
padding:14px;
font-weight:600;
display:flex;
justify-content:space-between;
}

/* Auth Forms */

.chat-auth{
padding:18px;
display:flex;
flex-direction:column;
gap:10px;
}

.chat-auth input{
padding:10px;
border:1px solid #ddd;
border-radius:8px;
}

.chat-auth button{
background:#42B5B7;
color:white;
border:none;
padding:10px;
border-radius:8px;
cursor:pointer;
}

.chat-auth button:hover{
opacity:.9;
}

.chat-auth a{
text-align:center;
font-size:13px;
cursor:pointer;
color:#42B5B7;
}

/* Messages */

#law-chat-messages{
flex:1;
overflow:auto;
padding:14px;
display:flex;
flex-direction:column;
gap:10px;
}

/* Chat Bubbles */

.msg{
padding:10px 14px;
border-radius:18px;
max-width:75%;
font-size:14px;
}

.msg.user{
background:#e6f7f7;
align-self:flex-end;
}

.msg.admin{
background:#f2f2f2;
align-self:flex-start;
}

/* Message Input */

#law-chat-input{
display:flex;
padding:10px;
border-top:1px solid #eee;
}

#law-chat-input input{
flex:1;
border:none;
outline:none;
font-size:14px;
}

#law-chat-input button{
background:#42B5B7;
color:white;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
}

#law-chat-badge{
position:absolute;
top:-6px;
right:-6px;
background:red;
color:white;
font-size:11px;
border-radius:20px;
padding:3px 6px;
display:flex;
align-items:center;
justify-content:center;
min-width:18px;
}

#typing-indicator{
font-style:italic;
}

#chat-admin{
		display:flex;
		gap:20px;
		font-family:Arial, sans-serif;
}

.thread-list{
		width:250px;
		border-right:1px solid #ddd;
		padding:10px;
		max-height:600px;
		overflow:auto;
}

.thread-item{
		padding:10px;
		border-bottom:1px solid #eee;
		cursor:pointer;
		display:flex;
		justify-content:space-between;
		align-items:center;
}

.thread-item:hover{
		background:#f9f9f9;
}

.thread-item .badge{
		background:red;
		color:white;
		font-size:12px;
		padding:2px 6px;
		border-radius:12px;
		display:flex;
		align-items:center;
		justify-content:center;
}

.chat-window{
		flex:1;
		display:flex;
		flex-direction:column;
		border:1px solid #ddd;
		border-radius:8px;
		max-height:600px;
		overflow:hidden;
}

.user-info{
		padding:10px;
		border-bottom:1px solid #ddd;
		background:#f4f4f4;
}

#messages{
		flex:1;
		padding:10px;
		overflow:auto;
		display:flex;
		flex-direction:column;
		gap:8px;
}

.msg{
		padding:8px 12px;
		border-radius:18px;
		max-width:75%;
		font-size:14px;
}

.msg.user{
		background:#e6f7f7;
		align-self:flex-start;
}

.msg.admin{
		background:#42B5B7;
		color:white;
		align-self:flex-end;
}

.chat-input{
		display:flex;
		border-top:1px solid #ddd;
		padding:8px;
		gap:6px;
}

.chat-input input{
		flex:1;
		padding:8px;
		border-radius:8px;
		border:1px solid #ccc;
}

.chat-input button{
		padding:8px 14px;
		background:#42B5B7;
		color:white;
		border:none;
		border-radius:8px;
		cursor:pointer;
}

#typing-indicator{
		padding:6px 10px;
		font-style:italic;
		font-size:13px;
		color:#666;
}