* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f5f5f5; color: #333; overflow: hidden; }

/* 通用屏幕 */
.screen {
  position: absolute; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .5s ease;
}

/* 输入框对齐 */
.input-wrapper {
  width: 80%; display: flex; justify-content: flex-start; align-items: center;
  margin-bottom: 15px;
}
.keep-login { font-size: .9em; color: #555; }
.keep-login input { margin-right: 5px; }

/* 按钮按压效果 */
.btn-press:active { transform: scale(.9); }

/* 登录 */
#login-screen { background: #fff; }
#login-screen h1 { margin-bottom: 20px; font-size: 1.5em; }
#login-screen input {
  width: 80%; margin: 8px 0; padding: 10px;
  border: 1px solid #ccc; border-radius: 5px;
}
#login-btn {
  position: relative; padding: 10px 20px;
  background: #0066ff; color: #fff; border: none; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .3s;
}
#login-btn.loading { background: #888 !important; cursor: not-allowed; }
#login-btn.loading .btn-text { visibility: hidden; }

/* loader */
.loader {
  width: 16px; height: 16px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,0.6); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
.hidden { display: none !important; }

/* 聊天 */
#chat-screen {
  background: #eaeaea; top: 0; left: 0; transform: translateX(100%);
}
#chat-header {
  width: 100%; padding: 10px; background: #0066ff; color: #fff;
  display: flex; align-items: center; justify-content: center; position: relative;
}
#search-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
}
#chat-title { font-size: 1.2em; }

/* 消息列表 */
#messages {
  flex: 1; width: 100%; overflow-y: auto; padding: 10px; position: relative;
}
.msg {
  max-width: 70%; margin: 5px 0; padding: 10px; border-radius: 10px;
  position: relative; animation: fadeIn .3s;
}
.msg.self { background: #0066ff; color: #fff; margin-left: auto; }
.msg.other { background: #fff; color: #333; margin-right: auto; }
.msg .meta { font-size: .75em; opacity: .7; margin-bottom: 5px; display: flex; align-items: center;}
.msg .meta img { margin-right: 5px; }
/* 对方：头像、用户名、时间一行；文字下面 */
.msg.other .text { margin-top: 5px; }
/* 撤回消息：完全居中，无 loader 图标 */
.msg.recalled {
  border: none; background: transparent; font-style: italic; color: #666;
  margin: 10px auto; padding: 0; max-width: 80%; text-align: center;
}

/* 中心 loader */
.center-loader {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border: 4px solid rgba(0,0,0,0.1); border-top-color: #0066ff;
  border-radius: 50%; animation: spin 1s linear infinite;
}

/* 输入区 */
#input-area {
  width: 100%; padding: 10px; display: flex; align-items: flex-end; background: #fff;
}
#emoji-btn { margin-right: 10px; background: none; border: none; cursor: pointer; }
#msg-input {
  flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 20px; resize: none;
  overflow: hidden; font-size: 1em; line-height: 1.2em; max-height: 100px; transition: height .2s;
}
#send-btn {
  position: relative; margin-left: 10px; padding: 8px 16px; border: none; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #0066ff; color: #fff; transition: background .3s;
}
#send-btn.loading { background: #888 !important; cursor: not-allowed; }
#send-btn.loading .btn-text { visibility: hidden; }

/* 表情框 */
#emoji-panel {
  position: absolute; bottom: 60px; width: 100%; display: flex; justify-content: center;
  opacity: 0; transform: translateY(20px);
}
#emoji-panel.visible { animation: emoji-in .3s forwards; }
#emoji-panel.hide { animation: emoji-out .3s forwards; }
.emoji-list {
  background: #fff; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px;
}
.emoji-list span { font-size: 1.5em; margin: 5px; cursor: pointer; }

/* 搜索面板动画 */
#search-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,0.95); display: flex; flex-direction: column;
  transform: translateX(-100%);
}
#search-overlay.visible {
  transform: translateX(0); transition: transform .3s ease-out;
}
#search-overlay.hidden {
  transform: translateX(-100%); transition: transform .3s ease-in;
}
#search-bar {
  display: flex; align-items: center; padding: 10px; background: #0066ff;
}
#search-back { background: none; border: none; color: #fff; font-size: 1.2em; cursor: pointer; }
.search-input-wrapper {
  position: relative; flex: 1; margin-left: 10px;
}
.search-input-wrapper .search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
}
.search-input-wrapper input {
  width: 100%; padding: 8px 8px 8px 36px; border: none; border-radius: 5px;
}
#search-results {
  flex: 1; overflow-y: auto; padding: 10px; position: relative;
}
.search-item { margin: 5px 0; padding: 10px; border-radius: 8px; background: #fff; }
.search-item .meta { font-size: .75em; opacity: .7; margin-bottom: 5px; }

/* 菜单 */
.ctx-menu {
  position: absolute; background: #fff; border: 1px solid #ccc; border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000;
}
.ctx-menu .menu-item {
  display: flex; align-items: center; padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.ctx-menu .menu-item:hover { background: #f0f0f0; }
.ctx-menu .loader {
  width: 16px; height: 16px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,0.6); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}

/* 动画 */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes emoji-in { to { opacity: 1; transform: translateY(0); } }
@keyframes emoji-out { to { opacity: 0; transform: translateY(20px); } }