/* CC商聊 · r172 视觉与手感修正
 * 1. 加号面板：4 列、图标加大、黑白配色
 * 2. 表情面板：整体拉高
 * 3. 底栏气泡提示：蓝色 -> 红色
 * 4. 扫一扫：全屏
 * 5. 账号资料：卡片式排版
 */

/* ---------- 1. 加号面板 ---------- */
.plus-panel {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: .6rem .35rem !important;
  padding: .9rem .8rem calc(1.1rem + max(env(safe-area-inset-bottom, 0px), var(--sat-bot, 0px))) !important;
}
.plus-item {
  justify-content: flex-start !important;
}
.plus-ico {
  width: 3.35rem !important;
  height: 3.35rem !important;
  border-radius: 18px !important;
  background: #f4f5f7 !important;
  border: 1px solid #e9ebef !important;
  box-shadow: none !important;
  color: #1c1f24 !important;
  margin: 0 auto !important;
}
.plus-ico svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #1c1f24 !important;
}
.plus-ico svg * {
  stroke: #1c1f24 !important;
}
.plus-item > span:last-child {
  color: #5f646c !important;
  font-size: 11px !important;
}
.plus-item:active .plus-ico {
  background: #e8eaee !important;
}

/* ---------- 2. 表情面板拉高 ---------- */
div.border-t.border-line.bg-\[\#f7f8fa\] .max-h-52 {
  max-height: 19rem !important;
}
div.border-t.border-line.bg-\[\#f7f8fa\] .max-h-52 .grid-cols-5 {
  gap: .45rem !important;
}
div.border-t.border-line.bg-\[\#f7f8fa\] .max-h-52 .h-16 {
  height: 3.75rem !important;
}

/* ---------- 3. 底栏气泡提示：红色 ---------- */
.tab-badge {
  background: #ff3b30 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--surface), 0 1px 4px rgba(255, 59, 48, .45) !important;
}

/* ---------- 4. 扫一扫：全屏 ---------- */
.scan-page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90 !important;
  background: #000 !important;
  overflow: hidden !important;
}
.scan-page .app-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding-top: calc(.35rem + env(safe-area-inset-top, 0px)) !important;
}
.scan-page .app-header * {
  color: #fff !important;
  background-color: transparent !important;
}
.scan-page .app-header svg {
  stroke: #fff !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.scan-page .scan-body {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 0 8.5rem 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  background: #000 !important;
}
.scan-page .scan-stage {
  position: absolute !important;
  inset: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}
.scan-page .scan-stage video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.scan-frame {
  position: absolute !important;
  left: 15% !important;
  top: 22% !important;
  width: 70% !important;
  height: 46% !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .3) !important;
}
.scan-page .scan-line {
  left: 16% !important;
  right: 16% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0), #4ade80 45%, #bbf7d0 55%, rgba(74, 222, 128, 0)) !important;
  box-shadow: 0 0 14px rgba(74, 222, 128, .9) !important;
  animation: jyScanMove 2.4s ease-in-out infinite !important;
}
@keyframes jyScanMove {
  0% { top: 24%; opacity: .35; }
  50% { top: 66%; opacity: 1; }
  100% { top: 24%; opacity: .35; }
}
.scan-tip {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 18% !important;
  text-align: center !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 12px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65) !important;
}
/* 原来的按钮条和灰提示在全屏下隐藏（改用底部圆钮） */
.scan-page .scan-body > .mx-4.mt-4.flex.items-center.gap-3 {
  display: none !important;
}
.scan-page .scan-body > p.px-4.pt-4 {
  display: none !important;
}
/* 扫到人 / 选的照片卡片：压在底部圆钮上方 */
.scan-page .scan-body > .mx-4.mt-4.overflow-hidden {
  margin: 0 .8rem .5rem !important;
  border-radius: 16px !important;
}
/* 底部两个圆钮 */
.scan-actions {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.6rem !important;
}
.scan-act {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .5rem !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 11px !important;
  padding: 0 !important;
}
.scan-act i {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  display: grid !important;
  place-items: center !important;
  backdrop-filter: blur(6px);
}
.scan-act svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #fff !important;
}
.scan-act:active i {
  background: rgba(255, 255, 255, .3) !important;
}

/* ---------- 5. 账号资料：卡片式 ---------- */
.jy-prof {
  background: #f4f5f7 !important;
  padding: 0 0 .4rem !important;
  min-height: 100% !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: .75rem .8rem 0 !important;
  padding: .55rem .95rem !important;
  border-radius: 16px !important;
  background: #fff !important;
  gap: .6rem !important;
  min-height: 64px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white > p {
  order: 1 !important;
  margin: 0 !important;
  flex: 1 !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1c1f24 !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white > button {
  order: 2 !important;
  flex: none !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white > input {
  display: none !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white::after {
  content: '\203A';
  order: 3 !important;
  color: #c4c9d1 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin-left: .1rem;
}
.jy-prof > .flex.flex-col.items-center.bg-white .avatar-no-callout {
  width: 42px !important;
  height: 42px !important;
  border-radius: 21px !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white .avatar-no-callout > span:first-child {
  font-size: 17px !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white button > span.absolute {
  width: 19px !important;
  height: 19px !important;
  border-radius: 999px !important;
  background: #1c1f24 !important;
  border-color: #fff !important;
}
.jy-prof > .flex.flex-col.items-center.bg-white button > span.absolute svg {
  width: 11px !important;
  height: 11px !important;
  stroke: #fff !important;
}
.jy-prof > .mt-3.bg-white {
  margin: .75rem .8rem 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
.jy-prof > .mt-3.bg-white label {
  padding: .85rem .95rem !important;
}
.jy-prof > .mt-3.bg-white .cell {
  padding: .85rem .95rem !important;
}
.jy-prof > .mt-3.bg-white label > span {
  color: #1c1f24 !important;
}
.jy-prof > .mt-3.bg-white input {
  color: #6b7280 !important;
}
.jy-prof > .px-4.pt-5 {
  padding: 1.1rem .8rem 1rem !important;
}
.jy-prof .jy-prof-arrow {
  color: #c4c9d1 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex: none;
}