/* ─── 个人参与端 │ join.css ────────────────────────────────
   手机端单列布局 · 375px–428px 优化
   ─────────────────────────────────────────────────────── */

.layout--mobile {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--c-bg-warm);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ── 顶部信息条 ── */
.m-topbar {
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.m-topbar__session {
  flex: 1;
  min-width: 0;
}
.m-topbar__session-id {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  opacity: 0.8;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-topbar__role {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
}
.m-topbar__role-icon { font-size: 1.1rem; }
.m-topbar__role-name {
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}

.m-topbar__status {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
}
.m-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.m-status-dot--idle     { background: #9CA3AF; }
.m-status-dot--active   { background: var(--c-success); animation: m-pulse 1.5s infinite; }
.m-status-dot--locked   { background: var(--c-accent-light); }
.m-status-dot--review   { background: var(--c-info); animation: m-pulse 1.5s infinite; }

.m-topbar__status-text {
  font-size: var(--fs-xs);
  opacity: 0.8;
}

@keyframes m-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ── 主体内容区 ── */
.m-main {
  padding: var(--sp-md) var(--sp-md) var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ── 区块通用 ── */
.m-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.m-section__title {
  font-family: var(--f-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin: 0;
}

.m-section__icon { font-size: 1.15rem; }

.m-section__desc {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0 0 var(--sp-sm) 0;
  line-height: 1.5;
}


/* ── 欢迎面板 ── */
.m-welcome {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  padding: var(--sp-xl) 0;
}

.m-welcome__hero {
  text-align: center;
}
.m-welcome__icon {
  font-size: 3.5rem;
  margin-bottom: var(--sp-md);
  line-height: 1;
}
.m-welcome__title {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  color: var(--c-primary);
  line-height: 1.2;
  margin: 0;
}
.m-welcome__desc {
  font-size: var(--fs-body);
  color: var(--c-muted);
  line-height: 1.8;
  margin: 0;
}

/* ── 加入表单 ── */
.m-join-form {
  padding: var(--sp-lg) var(--sp-md);
}

.m-card__title {
  font-family: var(--f-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-primary);
  margin: 0 0 var(--sp-md) 0;
}

.m-form-group {
  margin-bottom: var(--sp-md);
}
.m-form-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-body);
  margin-bottom: var(--sp-xs);
}
.m-form-input {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  font-family: var(--f-body);
  background: var(--c-bg);
  transition: border-color var(--duration) var(--ease-out);
  min-height: 44px;
}
.m-form-input:focus {
  border-color: var(--c-primary);
  outline: none;
}

/* ── 团队选择器 ── */
.m-team-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}
.m-team-picker__option {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-sm);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--c-bg);
  transition: all var(--duration) var(--ease-out);
  min-height: 48px;
}
.m-team-picker__option:active {
  transform: scale(0.97);
}
.m-team-picker__option:hover {
  border-color: var(--c-primary-light);
  background: var(--c-primary-bg2);
}
.m-team-picker__option--selected {
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
}
.m-team-picker__option--selected .m-team-picker__icon {
  color: var(--c-primary);
}
.m-team-picker__icon {
  font-family: var(--f-number);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--c-muted);
  transition: color var(--duration);
}
.m-team-picker__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-body);
}

.m-join-btn {
  width: 100%;
  margin-top: var(--sp-sm);
  min-height: 48px;
}

/* ── 欢迎页提示 ── */
.m-welcome__tip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: var(--c-primary-bg2);
  border-radius: var(--r-md);
}
.m-tip__icon { font-size: 1.1rem; flex-shrink: 0; }
.m-tip__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.5;
}


/* ── 角色卡 ── */
.m-role-card {
  padding: var(--sp-md);
}

.m-role-card__hero {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.m-role-card__avatar {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: var(--c-accent-bg);
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.m-role-card__identity {
  flex: 1;
  min-width: 0;
}
.m-role-card__name {
  font-family: var(--f-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 var(--sp-xs) 0;
  line-height: 1.2;
}
.m-role-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.m-role-card__section {
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.m-role-card__section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.m-role-card__section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xs);
}
.m-role-card__section-icon { font-size: var(--fs-body); }
.m-role-card__section-title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-muted);
  flex: 1;
}
.m-role-card__section--private .m-role-card__section-title {
  color: var(--c-accent);
}
.m-role-card__private-badge {
  font-size: var(--fs-xs);
  color: var(--c-accent);
  background: var(--c-accent-bg);
  padding: 2px var(--sp-sm);
  border-radius: var(--r-pill);
  font-weight: 500;
}

.m-role-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-role-card__list-item {
  font-size: var(--fs-body);
  color: var(--c-body);
  line-height: 1.6;
  padding-left: var(--sp-md);
  position: relative;
  margin-bottom: var(--sp-xs);
}
.m-role-card__list-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

.m-role-card__footer {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
}
.m-role-card__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.m-role-card__kpi-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
}
.m-role-card__kpi-value {
  font-size: var(--fs-small);
  color: var(--c-body);
  font-weight: 500;
}


/* ── 专属信息 ── */
.m-intel-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.m-intel-item {
  border-left: 4px solid var(--c-primary-light);
  background: var(--c-primary-bg2);
  border-radius: var(--r-md);
  padding: var(--sp-md);
}
.m-intel-item__header {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xs);
}
.m-intel-item__icon { font-size: 1rem; }
.m-intel-item__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.m-intel-item__text {
  font-size: var(--fs-body);
  color: var(--c-body);
  line-height: 1.6;
  margin: 0;
}

.m-intel-item--urgent {
  border-left-color: var(--c-danger);
  background: #FEF2F2;
}
.m-intel-item--urgent .m-intel-item__label { color: var(--c-danger); }

.m-intel-item--opportunity {
  border-left-color: var(--c-accent);
  background: var(--c-accent-bg2);
}
.m-intel-item--opportunity .m-intel-item__label { color: var(--c-accent); }

.m-intel-empty, .m-vote-empty, .m-review-empty {
  text-align: center;
  padding: var(--sp-xl) var(--sp-md);
  color: var(--c-muted);
}
.m-intel-empty__icon, .m-vote-empty__icon, .m-review-empty__icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-sm);
  line-height: 1;
}
.m-intel-empty__text, .m-vote-empty__text, .m-review-empty__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0;
}


/* ── 决策投票 ── */
.m-vote-panel {
  padding: var(--sp-md);
}

.m-vote-panel__round {
  margin-bottom: var(--sp-sm);
}

.m-vote-panel__question {
  font-family: var(--f-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-primary);
  margin: 0 0 var(--sp-md) 0;
  line-height: 1.4;
}

.m-vote-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.m-vote-option {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--c-bg);
  transition: all var(--duration) var(--ease-out);
  min-height: 48px;
}
.m-vote-option:active { transform: scale(0.98); }
.m-vote-option:hover {
  border-color: var(--c-primary-light);
  background: var(--c-primary-bg2);
}
.m-vote-option--selected {
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
}

.m-vote-option__radio {
  width: 22px;
  height: 22px;
  border: 2px solid var(--c-border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all var(--duration) var(--ease-out);
}
.m-vote-option--selected .m-vote-option__radio {
  border-color: var(--c-primary);
}
.m-vote-option--selected .m-vote-option__radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: var(--c-primary);
  border-radius: 50%;
}

.m-vote-option__label {
  flex: 1;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-body);
}
.m-vote-option--selected .m-vote-option__label {
  color: var(--c-primary);
  font-weight: 600;
}

.m-vote-submit {
  width: 100%;
  margin-top: var(--sp-md);
  min-height: 48px;
}

/* 投票结果 */
.m-vote-result {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
}
.m-vote-result__title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: var(--sp-sm);
}
.m-vote-result__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}
.m-vote-result__bar-label {
  font-size: var(--fs-small);
  color: var(--c-body);
  width: 60px;
  flex-shrink: 0;
}
.m-vote-result__bar-track {
  flex: 1;
  height: 24px;
  background: var(--c-bg-card);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
}
.m-vote-result__bar-fill {
  height: 100%;
  border-radius: var(--r-sm);
  transition: width 0.6s var(--ease-out);
}
.m-vote-result__bar-count {
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
  font-weight: 600;
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

.m-vote-result__my-vote {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--c-primary-bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
}


/* ── 复盘互动 ── */
.m-subsection__title {
  font-family: var(--f-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-primary);
  margin: var(--sp-lg) 0 var(--sp-sm) 0;
}

.m-review-questions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.m-review-question {
  background: var(--c-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-md);
  border-left: 4px solid var(--c-accent);
}

.m-review-question__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.m-review-question__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.m-review-question__text {
  font-size: var(--fs-body);
  color: var(--c-dark);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.m-review-question__answer {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  font-family: var(--f-body);
  line-height: 1.6;
  resize: vertical;
  min-height: 80px;
  background: var(--c-bg-warm);
  transition: border-color var(--duration) var(--ease-out);
}
.m-review-question__answer:focus {
  border-color: var(--c-primary);
  outline: none;
  background: var(--c-bg);
}

.m-review-question__actions {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}
.m-review-question__btn {
  flex: 1;
  min-height: 44px;
}

/* 复盘维度反馈 */
.m-review-feedback {
  margin-top: var(--sp-lg);
}

.m-feedback-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.m-feedback-item {
  background: var(--c-bg);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-md);
  border-left: 4px solid var(--c-primary-light);
}

.m-feedback-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
}
.m-feedback-item__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-body);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.m-feedback-item__score {
  font-family: var(--f-number);
  font-weight: 700;
  font-size: var(--fs-h3);
}

.m-feedback-item__bar {
  height: 6px;
  background: var(--c-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--sp-xs);
}
.m-feedback-item__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--ease-out);
}

.m-feedback-item__comment {
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0;
}

/* BSC 维度色 */
.m-feedback-item[data-bsc="financial_health"]               { border-left-color: var(--bsc-finance); }
.m-feedback-item[data-bsc="financial_health"] .m-feedback-item__bar-fill { background: var(--bsc-finance); }
.m-feedback-item[data-bsc="financial_health"] .m-feedback-item__score  { color: var(--bsc-finance); }

.m-feedback-item[data-bsc="customer_value"]                 { border-left-color: var(--bsc-customer); }
.m-feedback-item[data-bsc="customer_value"] .m-feedback-item__bar-fill { background: var(--bsc-customer); }
.m-feedback-item[data-bsc="customer_value"] .m-feedback-item__score    { color: var(--bsc-customer); }

.m-feedback-item[data-bsc="internal_operations"]            { border-left-color: var(--bsc-ops); }
.m-feedback-item[data-bsc="internal_operations"] .m-feedback-item__bar-fill { background: var(--bsc-ops); }
.m-feedback-item[data-bsc="internal_operations"] .m-feedback-item__score    { color: var(--bsc-ops); }

.m-feedback-item[data-bsc="learning_growth"]                { border-left-color: var(--bsc-learning); }
.m-feedback-item[data-bsc="learning_growth"] .m-feedback-item__bar-fill { background: var(--bsc-learning); }
.m-feedback-item[data-bsc="learning_growth"] .m-feedback-item__score    { color: var(--bsc-learning); }

.m-feedback-item[data-bsc="risk_resilience"]                { border-left-color: var(--bsc-risk); }
.m-feedback-item[data-bsc="risk_resilience"] .m-feedback-item__bar-fill { background: var(--bsc-risk); }
.m-feedback-item[data-bsc="risk_resilience"] .m-feedback-item__score    { color: var(--bsc-risk); }

.m-feedback-item[data-bsc="cross_department_collaboration"] { border-left-color: var(--bsc-collab); }
.m-feedback-item[data-bsc="cross_department_collaboration"] .m-feedback-item__bar-fill { background: var(--bsc-collab); }
.m-feedback-item[data-bsc="cross_department_collaboration"] .m-feedback-item__score    { color: var(--bsc-collab); }


/* ── 底部状态条 ── */
.m-footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  z-index: 100;
}
.m-footer__info {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.m-footer__round {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-body);
}
.m-footer__divider {
  color: var(--c-light-muted);
  font-size: var(--fs-xs);
}
.m-footer__team {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.m-footer__ws-status {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.m-ws-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.m-ws-dot--online  { background: var(--c-success); animation: m-pulse 2s infinite; }
.m-ws-dot--offline { background: #9CA3AF; }
.m-ws-dot--reconnecting { background: var(--c-warning); animation: m-pulse 1s infinite; }
.m-ws-text {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}


/* ── Toast 通知 ── */
.m-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-dark);
  color: #fff;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  animation: m-toast-in var(--duration) var(--ease-out);
  max-width: 90vw;
}
.m-toast--out {
  animation: m-toast-out var(--duration) var(--ease-out) forwards;
}
.m-toast__icon { font-size: var(--fs-body); }
.m-toast__text {
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes m-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes m-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 20px); }
}


/* ── 响应式：仅手机 375–428px ── */
@media (max-width: 374px) {
  .m-team-picker { grid-template-columns: 1fr; }
  .m-role-card__avatar { width: 48px; height: 48px; font-size: 1.5rem; }
  .m-role-card__name { font-size: var(--fs-h3); }
}

@media (min-width: 429px) {
  .m-main {
    max-width: 428px;
    margin: 0 auto;
  }
  .m-topbar, .m-footer {
    max-width: 428px;
    margin: 0 auto;
    width: 100%;
  }
}