:root {
    --max-w: 800px;
    --bg: #ffffff;
    --panel: #f7f7f7;
    --muted: #767676;
    --accent: #000;
    --rounded: 12px;
}
html,body { height:100%; margin:0; font-family: Inter, Arial, sans-serif; background:var(--bg); color:#111; }
.outer { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; box-sizing:border-box; }
.container {
    width:100%; max-width:var(--max-w);
    display:flex; flex-direction:column;
    gap:16px;
}

/* header */
.top-bar { display:flex; align-items:center; gap:12px; }
.model-select {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:10px;
    background:#f2f2f2;
    border:1px solid #e6e6e6;
    cursor:pointer;
    min-width:220px;
    box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.model-select .selected {
    display:flex; align-items:center; gap:10px;
}
    .model-select .meta {
        display:flex;
        flex-direction:column;
    }
.model-select img { width:32px; height:32px; border-radius:6px; object-fit:cover; }
.model-select .name { font-weight:600; font-size:14px; }
.model-select .note { font-size:12px; color:var(--muted); margin-left:6px; font-weight:500; }

/* dropdown list */
.dropdown {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:auto;
    background:white;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    border:1px solid #eee;
    overflow:hidden;
    z-index:30;
    max-height:360px;
        overflow-y: auto;
    width:250px;
}
.dropdown .item {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; cursor:pointer;
}
.dropdown .item:hover { background:#fafafa; }
.dropdown .item .meta { display:flex; flex-direction:column; }
.dropdown .item .title { font-weight:600; font-size:13px; }
.dropdown .item .sub { font-size:12px; color:var(--muted); }

/* chat area */
.chat-box {
    background:var(--panel);
    padding:20px;
    border-radius:var(--rounded);
    min-height:720px;
    max-height:56vh;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.message { max-width:72%; padding:12px 14px; border-radius:12px; }
.user { margin-left:auto; background:white; border:1px solid #f1d8f8; }
.assistant { margin-right:auto; background:white; border:1px solid #ececec; }

/* input area */
.input-row {
    display:flex; gap:10px; align-items:center;
}
    .input {
        flex: 1;
        background: white;
        border-radius: 24px;
        border: 1px solid #ddd;
        padding: 12px 24px;
        box-sizing: border-box;   /* VERY IMPORTANT */
        min-height: 48px;
        max-height: 200px;        /* limit expansion */
        overflow-y: auto;         /* show scroll after max-height */
        resize: none;
        outline: none;
        font-size: 18px;
        line-height: 1.5;         /* slightly bigger line spacing */
    }


.send-btn {
    width:44px; height:44px; border-radius:50%;
    background:var(--accent); color:white; display:inline-flex;
    align-items:center; justify-content:center; border:none; cursor:pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.note-footer {
    text-align:center; color:var(--muted); font-size:13px; margin-top:6px;
}

/* small helpers */
.small { font-size:12px; color:var(--muted); }