/* Chat UI — BuildNYC / Apple-style */
:root{
        --text:   #1d1d1f;
        --text2:  #6e6e73;
        --text3:  #86868b;
        --bg:     #ffffff;
        --bg2:    #f5f5f7;
        --border: #d2d2d7;

        --blue:   #0071e3;
        --blue2:  #0066cc;

        --shadow: 0 18px 48px rgba(0,0,0,.08);
        --radius: 18px;
        --pill: 980px;

        --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'IBM Plex Sans', system-ui, sans-serif;
        --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{
        font-family: var(--sans);
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
}
nav {
        width: 100dvw;
}

/* Your app */
.app{
        display:flex;
        height:100vh;
        background: var(--bg);
}

.sidebar{
        width: 340px;
        background: var(--bg2);
        border-right: 1px solid var(--border);
        padding: 18px 18px;
        display:flex;
        flex-direction:column;
        gap: 14px;
}

.logo{
        font-weight: 800;
        font-size: 16px;
        letter-spacing: -0.01em;
        color: var(--text);
        padding: 10px 10px;
        border-radius: 12px;
}

.new-chat{
        width: 100%;
        border: none;
        background: var(--blue);
        color: #fff;
        border-radius: var(--pill);
        padding: 12px 14px;
        cursor: pointer;
        font-weight: 600;
        transition: transform .12s, background .15s, opacity .15s;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
}

.new-chat:hover{ background: var(--blue2); transform: translateY(-1px); }
.new-chat:active{ transform: translateY(0); opacity: .95; }

.chat-window{
        flex: 1;
        display:flex;
        flex-direction:column;
        min-width:0;
}

/* Header */
.chat-header{
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 12px;
        background: #fff;
}

.chat-header h1{
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--text);
}

.hide{ display:none; }

/* Messages */
.messages{
        flex: 1;
        overflow-y: auto;
        padding: 18px 20px;
        display:flex;
        flex-direction:column;
        gap: 10px;
        background: var(--bg);
}

.message{
        max-width: 72%;
        padding: 12px 14px;
        border-radius: 16px;
        line-height: 1.55;
        word-wrap: break-word;
        box-shadow: none;
        border: 1px solid transparent;
        font-size: 14px;
}

.message.bot{
        align-self:flex-start;
        background: #fff;
        border-color: var(--border);
        color: var(--text);
}

.message.user{
        align-self:flex-end;
        background: var(--blue);
        border-color: rgba(0,113,227,.25);
        color: #fff;
}

/* Input */
.chat-input{
        padding: 14px 20px;
        border-top: 1px solid var(--border);
        background: var(--bg2);
        display:flex;
        gap: 12px;
        align-items:center;
}

.chat-input input{
        flex:1;
        border: 1px solid var(--border);
        background:#fff;
        border-radius: 12px;
        padding: 12px 14px;
        outline:none;
        font-size: 14px;
        color: var(--text);
        transition: border-color .15s, box-shadow .15s;
}

.chat-input input::placeholder{ color: var(--text3); }

.chat-input input:focus{
        border-color: rgba(0,113,227,.55);
        box-shadow: 0 0 0 4px rgba(0,113,227,.12);
}

.chat-input button{
        border: none;
        background: var(--blue);
        color: #fff;
        border-radius: var(--pill);
        padding: 12px 16px;
        cursor:pointer;
        font-weight: 700;
        font-size: 14px;
        transition: transform .12s, background .15s, opacity .15s;
        white-space: nowrap;
}
.chat-input button:hover{ background: var(--blue2); transform: translateY(-1px); }
.chat-input button:active{ transform: translateY(0); opacity:.95; }
.preview {
        font-size: 0.7rem;
        line-height: 0.9rem;
}

#loadingEl {
        width: 3rem;
        margin: auto;
}


/* Hide shadow template element */
#shadowEl{ display:none; }

/* Mobile */
@media (max-width: 860px){
        .app{ flex-direction:column; }
        .sidebar{
                width: 100%;
                border-right:none;
                border-bottom: 1px solid var(--border);
                flex-direction: row;
                align-items:center;
                justify-content: space-between;
                gap: 12px;
                padding: 14px 14px;
        }
        .logo{ padding: 8px 10px; }
        .new-chat{ width: auto; padding: 10px 14px; margin-top: 3.7rem; }
        .message{ max-width: 90%; }
}