:root { font-family: system-ui, -apple-system, "Noto Sans SC", sans-serif; color:#e9edef; background:#0b141a }
* { box-sizing:border-box }
body { margin:0; background:#0b141a }
.hidden { display:none!important }
button,input,textarea,select { font:inherit }
.pair { min-height:100vh; display:grid; place-items:center; padding:24px }
.card { width:min(420px,100%); background:#111b21; padding:26px; border-radius:18px; border:1px solid #263942 }
.card h1 { margin-top:0; color:#25d366 }
.card input { width:100%; padding:14px; margin:14px 0; background:#202c33; border:1px solid #3b4a54; border-radius:12px; color:#fff }
.card button,.primary,.send,.assistant button,.image-confirm { border:0; border-radius:10px; padding:12px 15px; background:#00a884; color:#fff; font-weight:700 }
.error { color:#ff8a80; margin-top:12px }
.app { height:100dvh; display:grid; grid-template-columns:minmax(300px,34vw) 1fr; overflow:hidden }
.sidebar,.conversation { min-height:0; display:flex; flex-direction:column }
.sidebar { background:#111b21; border-right:1px solid #263942 }
.sidebar header,.conversation>header { height:64px; flex:0 0 64px; display:flex; align-items:center; gap:11px; padding:0 14px; background:#202c33 }
.sidebar header>div:first-child { flex:1; display:flex; flex-direction:column }
.sidebar header b { font-size:19px }
.sidebar header small,.contact-title small { color:#8696a0; font-size:11px }
.icon { border:0; background:transparent; color:#aebac1; font-size:26px; padding:7px }
.search-wrap { display:flex; align-items:center; gap:8px; margin:9px 12px; padding:0 12px; background:#202c33; border-radius:10px; color:#8696a0 }
.search-wrap input { width:100%; padding:10px 0; border:0; outline:0; background:transparent; color:#fff }
.chats { flex:1; overflow:auto }
.chat { height:74px; padding:9px 13px; display:grid; grid-template-columns:48px 1fr; align-items:center; gap:11px; border-bottom:1px solid #202c33; cursor:pointer }
.chat:active { background:#202c33 }
.chat-copy { min-width:0 }
.chat b { display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat small { display:block; color:#8696a0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; font-size:13px }
.avatar { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; background:#546e7a; flex:0 0 auto }
.avatar.small { width:39px; height:39px; font-size:14px }
.avatar img { width:100%; height:100%; display:block; object-fit:cover; border-radius:50% }
.contact-title { flex:1; min-width:0; display:flex; flex-direction:column }
.contact-title b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.list-status { min-height:22px; padding:2px 13px 5px; color:#8696a0; font-size:12px }
.messages { flex:1; min-height:0; overflow:auto; padding:14px 12px 8px; background-color:#0b141a; background-image:radial-gradient(#16242c 1px,transparent 1px); background-size:22px 22px }
.message { width:max-content; max-width:82%; padding:8px 10px 6px; margin:5px 0; border-radius:9px 9px 9px 2px; background:#202c33; white-space:pre-wrap; word-break:break-word; font-size:15px; line-height:1.36; box-shadow:0 1px 1px #0004 }
.message.mine { margin-left:auto; background:#005c4b; border-radius:9px 9px 2px 9px }
.translation { margin-top:6px; padding-top:5px; border-top:1px solid #ffffff26; color:#8ee0c5; font-size:12px; line-height:1.42 }
.message small { display:block; color:#a7b8bf; margin-top:4px; text-align:right; font-size:10px }
.receipt { margin-left:3px; font-weight:800; letter-spacing:-2px; color:#a7b8bf }
.receipt.read { color:#53bdeb }
.message img { display:block; max-width:min(72vw,360px); max-height:330px; border-radius:7px; margin-bottom:5px }
.empty { color:#8696a0; text-align:center; margin-top:35vh }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:7px 9px 0; background:#111b21; border-top:1px solid #263942 }
.quick-actions button { min-height:38px; border:1px solid #00a884; border-radius:10px; background:#102a2a; color:#57d9ba; font-weight:700 }
.composer { display:flex; align-items:flex-end; gap:7px; padding:8px 9px; background:#111b21 }
.composer textarea { flex:1; min-width:0; max-height:110px; resize:none; padding:10px 12px; border:0; outline:0; border-radius:20px; background:#202c33; color:#fff; line-height:1.35 }
.attach,.ai-button { width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; display:grid; place-items:center; background:#202c33; color:#aebac1; font-weight:700; font-size:20px }
.attach input { display:none }
.ai-button { background:#00a884; color:#fff; font-size:13px }
.attach.selected { background:#005c4b; color:#fff }
.assistant { padding:11px 12px; background:#111b21; border-top:1px solid #263942; max-height:46vh; overflow:auto }
.panel-title { display:flex; align-items:center; margin-bottom:9px }
.panel-title b { flex:1 }
.assistant>.primary { width:100%; margin-bottom:9px }
.row { display:flex; gap:8px }
.row select { flex:1; min-width:0; background:#202c33; color:#fff; border:1px solid #3b4a54; border-radius:9px; padding:9px }
.result { max-height:34vh; overflow:auto; white-space:pre-wrap; background:#091015; border-radius:9px; margin-top:9px; padding:10px; font-size:14px; line-height:1.5 }
.send { width:100%; margin-top:9px }
.image-confirm { margin:0 9px 7px }
.status { min-height:20px; padding:2px 12px 5px; background:#111b21; color:#8696a0; font-size:12px }
#back { display:none }
@media(max-width:720px) {
  .app { display:block }
  .sidebar,.conversation { height:100dvh }
  .conversation { display:none }
  .app.open .sidebar { display:none }
  .app.open .conversation { display:flex }
  #back { display:block }
}