body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: #121212 url('/ai-background-cajun-sketch.jpeg') no-repeat center center fixed;
    background-size: cover;
    color: #ececf1; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden; 
    position: relative;
}

/* Glass overlay sheet to soften the sketch lines behind the chat text */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(18, 18, 18, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}

.chat-container { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px 0; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    -webkit-overflow-scrolling: touch; 
    z-index: 1;
}

.message-row { 
    display: flex; 
    padding: 12px 24px; 
    width: 100%; 
    box-sizing: border-box; 
    justify-content: center; 
}

.message-row.user { 
    background: rgba(33, 33, 33, 0.4); 
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.message-row.assistant { 
    background: rgba(47, 47, 47, 0.8); 
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.message-content { width: 100%; max-width: 850px; display: flex; gap: 16px; font-size: 16px; line-height: 1.6; }
.avatar { width: 30px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0; }
.user .avatar { background: #543a3a; color: #ffbcbc; }
.assistant .avatar { background: #10a37f; color: #fff; }
.text { flex: 1; white-space: pre-wrap; word-break: break-word; }

.image-card { 
    margin-top: 16px; 
    display: inline-flex; flex-direction: column; 
    background: #18181a; 
    border: 1px solid #3f3f46; 
    border-radius: 12px; 
    padding: 12px; 
    max-width: 100%; 
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.5); 
    box-sizing: border-box; 
}
.image-card img { max-width: 100%; height: auto; border-radius: 8px; object-fit: contain; }

.download-btn { background: #10a37f; color: white; border: none; border-radius: 6px; padding: 10px 14px; font-size: 14px; font-weight: bold; margin-top: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s, transform 0.1s; align-self: flex-start; }
.download-btn:hover { background: #1a7f64; transform: translateY(-1px); }
.download-btn:active { transform: translateY(0); }

.input-panel { 
    padding: 16px 16px env(safe-area-inset-bottom, 16px) 16px; 
    background: linear-gradient(to top, #0d0d0d 0%, rgba(18, 18, 18, 0.95) 70%, rgba(18, 18, 18, 0) 100%);
    display: flex; 
    justify-content: center; 
    flex-shrink: 0; 
    z-index: 1;
}

.input-container { width: 100%; max-width: 850px; position: relative; background: #262626; border: 1px solid #404040; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); display: flex; align-items: flex-end; padding: 12px 16px; gap: 12px; box-sizing: border-box; transition: border-color 0.2s; }
.input-container:focus-within { border-color: #10a37f; }

textarea { flex: 1; background: transparent; color: #ececf1; border: none; outline: none; font-size: 16px; font-family: inherit; resize: none; min-height: 24px; max-height: 120px; box-sizing: border-box; line-height: 1.4; padding: 2px 0; overflow-y: auto; }
button.send-btn { background: #10a37f; color: white; border: none; border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, opacity 0.2s; flex-shrink: 0; margin-bottom: 2px; }
button.send-btn:hover { background: #1a7f64; }
button.send-btn:disabled { background: #262626; border: 1px solid #333; opacity: 0.4; cursor: not-allowed; color: #737373; }
.loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }