/* WordApp Messenger CSS - gaya klasik 2008 tanpa merek */
.wordapp-container { font-family: Tahoma, Verdana, Arial, sans-serif; background:#e6eef9; padding:20px; }
.wordapp-anon .wordapp-window { max-width: 700px; margin: 40px auto; }
.wordapp-window { border:1px solid #8aa7d5; border-radius:6px; box-shadow: 0 2px 12px rgba(0,0,0,.15); overflow:hidden; background:#f7fbff; }
.wordapp-titlebar { display:flex; justify-content:space-between; align-items:center; background: linear-gradient(#c9ddff, #9fbef0); padding:6px 10px; border-bottom:1px solid #8aa7d5; }
.wordapp-title { font-weight:bold; color:#1a3d7c; text-shadow:0 1px 0 #fff; }
.wordapp-actions .wa-btn { border:1px solid #7ea2d6; background:#cfe0ff; margin-left:6px; padding:0 6px; border-radius:3px; cursor:default; }
.wordapp-body { display:flex; height:70vh; min-height:460px; }
.wordapp-sidebar { width: 260px; border-right:1px solid #c2d3ef; background:#edf4ff; display:flex; flex-direction:column; }
.wa-search { padding:8px; border-bottom:1px solid #d1e0fb; }
.wa-search input { width:100%; padding:6px 8px; border:1px solid #9cb7e4; border-radius:4px; background:#fff; }
.wa-list { list-style:none; margin:0; padding:0; overflow:auto; }
.wa-list li { padding:10px; border-bottom:1px solid #dae6ff; display:flex; align-items:center; gap:8px; cursor:pointer; }
.wa-list li:hover { background:#e8f1ff; }
.wa-avatar { width:24px; height:24px; border-radius:50%; background:#bcd; display:inline-block; }
.wa-name { color:#123564; font-size:13px; }
.wordapp-chat { flex:1; display:flex; flex-direction:column; }
.wa-tabbar { display:flex; gap:6px; padding:6px; border-bottom:1px solid #cbdaf6; background:#eaf2ff; }
.wa-tab { background:#fff; border:1px solid #9db8e6; border-bottom-color:#fff; border-radius:6px 6px 0 0; padding:6px 10px; cursor:pointer; }
.wa-tab.active { background:#fff; font-weight:bold; }
.wa-chatview { flex:1; padding:10px; overflow:auto; background:#fff; border-left:1px solid #e0ecff; }
.wa-msg { margin:6px 0; max-width:70%; padding:8px 10px; border-radius:10px; border:1px solid #c9dcff; background:#f2f7ff; }
.wa-msg.me { margin-left:auto; background:#e6f7d9; border-color:#b5e1a4; }
.wa-meta { display:block; font-size:11px; color:#6b7da5; margin-top:2px; }
.wa-composer { display:flex; gap:8px; padding:8px; border-top:1px solid #cbdaf6; background:#eef5ff; }
#wa-input { flex:1; resize:vertical; padding:8px; border:1px solid #9cb7e4; border-radius:6px; background:#fff; }
.wa-send { border:1px solid #7ea2d6; background:linear-gradient(#d8e7ff,#bcd3ff); padding:6px 14px; border-radius:6px; font-weight:bold; cursor:pointer; }

@media (max-width: 900px){ .wordapp-sidebar{ width:200px; } }
@media (max-width: 700px){ .wordapp-body{ flex-direction:column; } .wordapp-sidebar{ width:100%; height:200px; } }