body{
background:linear-gradient(135deg,#5d7599,#6b5f87,#8b4d6e);
font-family:Georgia;
margin:0;
}

.chat-shell{
max-width:900px;
margin:40px auto;
}

.card{
border-radius:20px;
background:#17131f;
box-shadow:0 15px 40px rgba(0,0,0,.4);
border:none;
}

.card-header{
background:#05050a;
padding:25px;
}

.header-row{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}

.avatar-container{
position:relative;
}

.avatar{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
object-position:center 30%;
border:3px solid white;
}

/* ONLINE DOT */

.online_icon {
    position: absolute;

    bottom: 6px;
    right: 6px;

    width: 16px;
    height: 16px;

    background: #22c55e;
    border-radius: 50%;

    border: 3px solid #0a0a12;
}

.header-text{
max-width:480px;
color:white;
background:rgba(255,255,255,.08);
padding:15px;
border-radius:14px;
}

.header-text h1{
font-size:26px;
margin-bottom:8px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tech-stack{
margin-top:10px;
font-size:13px;
color:#9bb7ff;
}

.header-buttons{
display:flex;
gap:10px;
}

.header-btn{
background:rgba(255,255,255,.1);
color:white;
border:none;
padding:10px 16px;
border-radius:30px;
cursor:pointer;
}

.home-btn{
background:rgba(57,209,90,.2);
}

.msg_card_body{
height:600px;
overflow-y:auto;
background:#1b1522;
padding:20px;

.msg_time,
.msg_time_send {
    position: absolute;
    bottom: -18px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}
}

.msg_time {
    left: 10px;
}

.msg_time_send {
    right: 10px;
}

.tip-text{
color:#cbd5ff;
margin-bottom:16px;
}

.starter-prompts{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
}

.prompt-btn{
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
color:white;
padding:10px 15px;
border-radius:30px;
cursor:pointer;
}

.prompt-btn:hover{
background:rgba(93,117,255,.3);
}

.msg_container{
background:#556eff;
color:white;
padding:14px;
border-radius:18px;
max-width:70%;
position: relative;
}

.msg_container_send{
position: relative;
background:#35cc5a;
color:white;
padding:14px;
border-radius:18px;
max-width:70%;
}

.avatar-small{
width:40px;
height:40px;
border-radius:50%;
margin-right:8px;
}

.card-footer{
background:#0c0a10;
padding:12px;
}

.type_msg{
background:rgba(255,255,255,.1);
border:none;
color:white;
}

.send_btn{
background:#39d15a;
border:none;
color:white;
padding:10px 15px;
border-radius:0 12px 12px 0;
}

/* HEADER IMAGE CONTAINER */

.img_cont {
    position: relative;        /* anchors the online dot */
    display: inline-block;
}

/* BIG HEADER PORTRAIT */

.user_img {
    max-height: 150px;         /* control size without cropping */
    width: auto;               /* keep natural aspect ratio */

    border-radius: 16px;       /* rectangle look */

    border: 3px solid rgba(255,255,255,0.85);
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.6),
        0 10px 25px rgba(0,0,0,0.35),
        0 0 20px rgba(88, 116, 255, 0.25);

    display: block;
}


.typing-bubble {
    background: rgba(112, 124, 255, 0.18);
    color: #fff;
}

.typing-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    animation: blink 1.2s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}