* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background: #07110c;
color: #ffffff;
height: 100vh;
overflow: hidden;
}

.app {
display: flex;
height: 100vh;
background:
radial-gradient(circle at 80% 20%, rgba(48, 180, 80, 0.12), transparent 35%),
linear-gradient(135deg, #07
a1711);
}

.sidebar {
width: 280px;
height: 100vh;
padding: 32px 22px;
background: rgba(4, 13, 9, 0.94);
border-right: 1px solid #193b28;
display: flex;
flex-direction: column;
}

.brand {
padding: 5px 10px 35px;
}

.brand img {
width: 190px;
height: auto;
display: block;
}

.brand span {
display: block;
margin-top: 12px;
font-size: 12px;
letter-spacing: 2px;
color: #8ca397;
}

nav {
display: flex;
flex-direction: column;
gap: 10px;
}

.nav-item {
width: 100%;
border: 1px solid transparent;
background: transparent;
color: #b8c6bf;
padding: 16px 18px;
border-radius: 12px;
text-align: left;
font-size: 15px;
cursor: pointer;
transition: 0.2s;
}

.nav-item:hover {
background: #0d2116;
color: white;
}

.nav-item.active {
background: linear-gradient(90deg, #12331f, #0b1d13);
border-color: #2b7543;
color: #69e58a;
box-shadow: inset 3px 0 #54e276;
}

.status {
margin-top: auto;
padding: 18px;
border: 1px solid #193b28;
border-radius: 14px;
background: #091811;
font-size: 13px;
color: #b8c6bf;
}

.status-dot {
display: inline-block;
width: 9px;
height: 9px;
margin-right: 8px;
border-radius: 50%;
background: #55e879;
box-shadow: 0 0 12px #55e879;
}

.workspace {
flex: 1;
height: 100vh;
position: relative;
overflow-y: auto;
}

.tool-page {
display: none;
height: 100%;
padding: 55px;
}

.tool-page.active {
display: flex;
flex-direction: column;
}

.welcome {
text-align: center;
margin: auto auto 30px;
}

.welcome h1,
.image-header h1 {
font-size: 38px;
margin-bottom: 12px;
}

.welcome h1 {
color: #61e382;
}

.welcome p,
.image-header p {
color: #8da096;
font-size: 17px;
}

.messages {
width: min(900px, 100%);
margin: 0 auto;
flex: 1;
overflow-y: auto;
padding: 20px 0;
}

.messages p {
padding: 14px 18px;
margin-bottom: 12px;
background: #0d1c14;
border: 1px solid #193b28;
border-radius: 14px;
line-height: 1.6;
}

.composer {
width: min(900px, 100%);
margin: 20px auto 0;
padding: 10px;
display: flex;
gap: 10px;
background: #0b1811;
border: 1px solid #244832;
border-radius: 16px;
}

.composer input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: white;
font-size: 16px;
padding: 10px 12px;
}

.composer button,
.image-generator button {
border: none;
border-radius: 11px;
padding: 13px 24px;
background: #55df78;
color: #051009;
font-weight: bold;
cursor: pointer;
}

.image-header {
margin-bottom: 35px;
}

.image-generator {
max-width: 900px;
padding: 22px;
border: 1px solid #244832;
border-radius: 18px;
background: #0a1710;
}

.image-generator textarea {
width: 100%;
height: 150px;
resize: vertical;
background: #07110c;
border: 1px solid #244832;
border-radius: 12px;
outline: none;
color: white;
padding: 16px;
font-size: 15px;
margin-bottom: 14px;
}

.image-result {
max-width: 900px;
flex: 1;
margin-top: 24px;
border: 1px dashed #29543a;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: #71857a;
background: rgba(7, 17, 12, 0.5);
}

@media (max-width: 800px) {
.sidebar {
width: 210px;
}

.brand img {
width: 150px;
}

.tool-page {
padding: 30px 20px;
}
}

.workspace {
scrollbar-width: thin;
scrollbar-color: #55e879 #07110c;
}

.workspace::-webkit-scrollbar {
width: 9px;
}

.workspace::-webkit-scrollbar-track {
background: #07110c;
}

.workspace::-webkit-scrollbar-thumb {
background: #55e879;
border-radius: 10px;
border: 2px solid #07110c;
}

.workspace::-webkit-scrollbar-thumb:hover {
background: #75f294;
}

.history-list {
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}

.history-card {
padding: 18px;
border: 1px solid #244832;
border-radius: 14px;
background: #0a1710;
}

.history-card p {
margin-top: 10px;
line-height: 1.5;
color: #dce7e0;
}

.history-date {
font-size: 12px;
color: #6f8c7a;
}