UI/UX D2: branded header, custom theme, bubble styles, streaming animation, responsive

- app.py: styled HTML header with robot icon + subtitle (D2-11)
- app.py: gr.themes.Soft(blue/indigo/slate) applied to gr.Blocks (D2-12)
- app.py: user_selector moved to header Row, right-aligned scale=0 (D2-13)
- app.py: .message-wrap .user/.bot custom background + border-radius CSS (D2-14)
- app.py: streaming-indicator blink animation on _live_html (D2-15)
- app.py: @media max-width:768px responsive CSS (D2-16)
- ROADMAP.md: mark all D2 items complete

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ROADMAP.md

@@ -339,11 +339,12 @@ youlbot-webui/
 - [x] `문서 수집` 버튼 크기 적정화 — `scale=0, min_width=200`
 
 #### D2
-- [ ] 헤더 아이콘/로고 추가
-- [ ] `gr.themes.Soft()` 또는 커스텀 테마 적용
-- [ ] 사용자 드롭다운 위치 이동
-- [ ] 채팅 버블 커스텀 CSS
-- [ ] 스트리밍 로딩 표시
+- [x] 헤더 아이콘/로고 추가 — `gr.HTML` 🤖 아이콘 + 타이틀/서브타이틀 레이아웃
+- [x] 커스텀 테마 적용 — `gr.themes.Soft(primary_hue="blue", secondary_hue="indigo", neutral_hue="slate")`
+- [x] 사용자 드롭다운 위치 이동 — 탭 내부 → 헤더 Row 우측 (`scale=0, min_width=160`)
+- [x] 채팅 버블 커스텀 CSS — `.message-wrap .user` 파란 배경, `.message-wrap .bot` 회색 배경
+- [x] 스트리밍 로딩 표시 — `_live_html`에 `streaming-indicator` blink 애니메이션
+- [x] 반응형 레이아웃 — `@media (max-width: 768px)` 모바일 대응 CSS
 
 #### D3
 - [ ] 다크 모드 토글