/* MasterD AI 会议室 · 样式 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #16130C;
  color: #F7F1E6;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* 顶部 */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: #221D14; border-bottom: 1px solid #3A3122;
}
.logo { font-weight: 700; font-size: 17px; color: #FFE08A; letter-spacing: .5px; }
.mode-switch { display: flex; gap: 6px; }
.mode-switch button {
  padding: 7px 16px; border: none; border-radius: 18px; font-size: 13px;
  background: #3A3122; color: #B8AD97; cursor: pointer; transition: all .2s;
}
.mode-switch button.active { background: #F5C451; color: #fff; }

/* 视图 */
.view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }

/* 成员栏 */
.member-bar {
  display: flex; gap: 10px; padding: 14px 16px; overflow-x: auto;
  background: #1A1610; border-bottom: 1px solid #2A2418;
}
.member {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px; border-radius: 10px; background: #2A2418;
  cursor: pointer; transition: all .2s; min-width: 62px; flex-shrink: 0;
}
.member.active { background: #F5C451; box-shadow: 0 0 16px rgba(8,145,178,.5); }
.member .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #3A3122;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.member.active .avatar { background: #FFE08A; color: #16130C; }
.member .mname { font-size: 12px; color: #E3DAC8; }
.member.active .mname { color: #fff; font-weight: 600; }
.member .mrole { font-size: 10px; color: #8A7F6A; }
.member.active .mrole { color: #FFF3D6; }

/* 消息区 */
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sys-msg { text-align: center; color: #8A7F6A; font-size: 13px; padding: 20px; }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.55; }
.msg.user { align-self: flex-end; background: #F5C451; color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: #3A3122; border-bottom-left-radius: 4px; }
.msg .who { font-size: 12px; color: #FFE08A; margin-bottom: 5px; font-weight: 600; }
.msg .content { white-space: pre-wrap; word-break: break-word; }
.msg .play-btn {
  margin-top: 7px; font-size: 12px; color: #FFE08A; cursor: pointer;
  background: none; border: 1px solid #FFE08A; border-radius: 10px; padding: 3px 10px;
}

/* 输入栏 */
.input-bar {
  display: flex; gap: 9px; padding: 12px 14px; background: #221D14;
  border-top: 1px solid #3A3122; align-items: center;
  flex-shrink: 0;
  margin-bottom: env(safe-area-inset-bottom, 0);
}
.input-bar input {
  flex: 1; padding: 11px 14px; border-radius: 22px; border: 1px solid #3A3122;
  background: #1A1610; color: #F7F1E6; font-size: 15px; outline: none;
}
.input-bar input:focus { border-color: #F5C451; }
.mic, .send {
  padding: 11px 16px; border: none; border-radius: 22px; font-size: 15px;
  cursor: pointer; background: #3A3122; color: #F7F1E6;
}
.mic { font-size: 19px; padding: 10px 15px; }
.mic.recording { background: #dc2626; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.send { background: #F5C451; color: #fff; font-weight: 600; }

/* 会议室 */
.meeting-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #1A1610; }
.meeting-title { font-size: 16px; font-weight: 600; }
.meeting-status { font-size: 12px; color: #8A7F6A; }
.participants { display: flex; gap: 12px; padding: 16px; overflow-x: auto; justify-content: center; }
.participant {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px;
  border-radius: 14px; background: #2A2418; min-width: 84px; transition: all .3s;
}
.participant.speaking { background: #F5C451; transform: scale(1.08); box-shadow: 0 0 22px rgba(8,145,178,.6); }
.participant .pavatar { width: 44px; height: 44px; border-radius: 50%; background: #3A3122; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.participant.speaking .pavatar { background: #FFE08A; }
.participant .pname { font-size: 12px; }
.topic-bar { display: flex; gap: 9px; padding: 12px 16px; }
.topic-bar input { flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid #3A3122; background: #1A1610; color: #F7F1E6; font-size: 14px; outline: none; }
.topic-bar button { padding: 11px 18px; border: none; border-radius: 10px; background: #F5C451; color: #fff; font-weight: 600; cursor: pointer; }
.topic-bar button:disabled { background: #3A3122; cursor: not-allowed; }
.meeting-log { flex: 1; overflow-y: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.log-item { padding: 10px 14px; border-radius: 12px; background: #2A2418; border-left: 3px solid #F5C451; }
.log-item .lwho { font-size: 12px; color: #FFE08A; font-weight: 600; margin-bottom: 4px; }
.log-item .ltext { font-size: 14px; line-height: 1.5; color: #E3DAC8; white-space: pre-wrap; }