/* =========================================================
   Ham Net profile modal component
   既存の表示値を変えず、プロフィール系モーダルの見た目だけを集約する。
   ========================================================= */

.profile-modal__help {
  margin: 4px 0 6px;
  color: #666;
  font-size: 12px;
}

.profile-editor {
  padding: 12px;
  border: 1px solid rgba(23, 74, 50, 0.18);
  border-radius: 12px;
  background: #f6faf7;
}

.profile-editor__body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-editor__preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  overflow: hidden;
  border: 1px solid #bdd6c8;
  border-radius: 50%;
  background: #e4f1e9;
  color: #466052;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

.profile-editor__image {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-editor__controls {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1 1 190px;
  min-width: 0;
  flex-wrap: wrap;
}

.profile-editor__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-editor__choose {
  display: inline-block;
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid #9fbea9;
  border-radius: 9px;
  background: #fff;
  color: #244332;
  font-size: 14px;
  line-height: 1.2;
}

.profile-editor__delete {
  padding: 9px 12px;
  border: 1px solid #c5cbc7;
  border-radius: 9px;
  background: #f5f6f5;
  color: #4d5550;
  font-size: 14px;
  line-height: 1.2;
}

.profile-editor__description,
.profile-editor__status {
  width: 100%;
  font-size: 12px;
  line-height: 1.45;
}

.profile-editor__description {
  color: #5e675f;
}

.profile-editor__status {
  color: #466052;
}

.profile-modal__voice-select {
  height: 48px;
  min-height: 48px;
  padding: 8px 12px;
}

/* 既存のダークモード配色をそのまま移設する。 */
@media (prefers-color-scheme: dark) {
  .profile-editor {
    background: #202d25 !important;
    border-color: rgba(167, 205, 181, 0.30) !important;
    color: #f0f4f1 !important;
  }

  .profile-editor__preview {
    background: #294033 !important;
    color: #dce9e0 !important;
    border-color: #587763 !important;
  }

  .profile-editor__choose {
    background: #2b3930 !important;
    color: #edf5ef !important;
    border-color: #6f8f79 !important;
  }

  .profile-editor__delete {
    background: #303632 !important;
    color: #e1e6e2 !important;
    border-color: #666f69 !important;
  }

  .profile-editor__description,
  .profile-editor__status {
    color: #c1ccc4 !important;
  }

  .profile-editor__status[style*="#a12a2a"] {
    color: #ff9d9d !important;
  }
}